express使用cros开启跨域访问

简介: express使用cros开启跨域访问

如果跨域,前端直接请求后端数据会报错

Access to XMLHttpRequest at 'http://127.0.0.1:8080/' 
from origin 'null' has been blocked by CORS policy: 
No 'Access-Control-Allow-Origin' header is present on the requested resource.

项目结构

├── index.html

├── index.js
└── package.json

package.json

{
"dependencies": {
"cors": "^2.8.5",
"express": "^4.17.1"
}
}

index.js

var express = require('express')
var cors = require('cors')
var app = express()

app.use(cors())

app.get('/', function (req, res) {
res.send("hello")
})

app.listen(8080, function () {
console.log('listening: http://127.0.0.1:8080/')
})

index.html

<script>
var request = new XMLHttpRequest();
request.open('GET', 'http://127.0.0.1:8080', true)
request.send(null)
request.onreadystatechange = function () {
if (request.readyState == 4 && request.status == 200) {
console.log(request.responseText);
}
}
</script>

通过以上代码就可以正常请求获取后台数据了

            </div>
目录
相关文章
|
前端开发 搜索推荐 API
webpack和vite devServer的进阶用法:配置proxy修改请求和响应
在前端日常开发中我们一般都是配置本地开发服务器的proxy来解决跨域问题,查看官网文档或者通过搜索引擎搜出来的都是比较基础的用法。
2129 0
|
4月前
|
小程序 前端开发 中间件
ThinkPHP 配置跨域请求,使用TP的内置跨域类配置,小程序和web网页跨域请求的区别及格式说明
本文介绍了如何在ThinkPHP框架中配置跨域请求,使用了TP内置的跨域类`\think\middleware\AllowCrossDomain::class`。文章还讨论了小程序和web网页在跨域请求格式上的区别,并提供了解决方案,包括修改跨域中间件源码以支持`Origin`和`token`。此外,还介绍了微信小程序跨域请求的示例和web网页前端发送Axios跨域请求的请求拦截器配置。
ThinkPHP 配置跨域请求,使用TP的内置跨域类配置,小程序和web网页跨域请求的区别及格式说明
|
7月前
|
JavaScript API
蓝易云 - 如何使用CORS来允许设置Cookie
以上就是使用CORS来允许设置Cookie的方法。
36 2
|
前端开发 PHP
ThinkPHP跨域设置”samesite=none”和“secure”参数的方法和注意事项
ThinkPHP跨域设置”samesite=none”和“secure”参数的方法和注意事项
|
前端开发
express使用cros开启跨域访问
express使用cros开启跨域访问
65 0
|
JavaScript 前端开发 网络协议
|
存储 JavaScript 安全
Express+FetchAPI 简单实践Cookie
Express+FetchAPI 简单实践Cookie
335 0
|
前端开发 测试技术 开发工具
使用rush.js管理monorepo
使用rush.js管理monorepo
743 0
使用rush.js管理monorepo
【史上最全面esp32教程】oled显示篇
【史上最全面esp32教程】oled显示篇
1417 0

热门文章

最新文章

下一篇
开通oss服务