Access to XMLHttpRequest at 'http://192.168.0.61:3000/project/19/interface/api/181' from origin 'http://localhost:8848' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
时间: 2025-03-19 22:13:16 浏览: 28
当你遇到错误提示:“Access to XMLHttpRequest at 'http://192.168.0.61:3000/project/19/interface/api/181' from origin 'http://localhost:8848' has been blocked by CORS policy...”,这实际上是因为跨域资源共享(CORS)策略导致的问题。
### 解释原因
浏览器出于安全考虑,默认不允许前端网页向另一个域名发起HTTP请求。当你的应用从前端地址(http://localhost:8848)尝试调用位于其他服务器上的API服务(http://192.168.0.61:3000),如果目标服务器未明确允许该来源访问其资源,则会发生上述错误。
具体来说,这里的“preflight request”是指在执行真正的POST、PUT等非GET方法之前,浏览器会自动发送一个OPTIONS类型的预检请求询问服务器是否支持此次通信的所有条件。而目前的目标服务器回应中缺乏关键头部信息——即缺少`Access-Control-Allow-Origin`头字段告知客户端哪些源是可以接受的连接方。
### 解决方案
#### 方案一:调整后端配置增加CORS支持
这是最推荐的方式,在您的Web API所在的服务器程序里添加适当的响应标头以开放权限给指定或所有站点:
例如对于Node.js + Express环境可以这样做:
```javascript
var cors = require('cors');
app.use(cors());
```
或者是手动设置headers如下面这样:
```javascript
app.all('*', function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "X-Requested-With");
res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
res.header("Content-Type", "application/json;charset=utf-8");
if (req.method === 'OPTIONS') {
res.sendStatus(200); // 预检测结果返回OK即可
}
});
```
#### 方案二:代理转发解决跨域问题
如果不方便更改后台设置的话也可以选择通过代理的方式来绕过这个问题。比如你在Vue项目下运行时可以用webpack-dev-server提供的proxy功能来做处理。修改项目的config/index.js文件内的devServer部分如下所示:
```javascript
module.exports = {
devServer:{
proxy:'http://192.168.0.61:3000'
}
}
```
这意味着所有的请求都会经由本地主机8848转交给真实的接口地址后再反馈回来,从而规避了直接跨越不同网络空间带来的限制情况发生。
#### 其它注意事项
此外还有一点需要注意的是关于凭证(cookie/session)传输方面的兼容性设定也需要同步关注起来哦~
阅读全文
相关推荐


















