运行报错No 'Access-Control-Allow-Origin' header is present on the requested resource.且未输出进入拦截器这个提示信息。
时间: 2024-05-22 11:09:34 浏览: 9
这个错误通常发生在跨域请求的情况下,浏览器会向服务器发送一个预检请求OPTIONS,检查是否允许该跨域请求。如果服务器返回的响应头中没有Access-Control-Allow-Origin字段,浏览器就会报错。要解决这个问题,可以在服务器端设置响应头中的Access-Control-Allow-Origin字段,允许特定的源进行跨域请求。
至于未输出进入拦截器的提示信息,可能是拦截器没有正确配置或者未被正确调用。可以检查拦截器的配置和使用方式是否正确。另外也可以在拦截器中加入日志输出,方便调试。
相关问题
No Access-Control-Allow-Origin header is present on the requested resource.
No 'Access-Control-Allow-Origin' header is present on the requested resource是一个跨域问题。这个问题通常发生在前端访问后端接口时,由于安全限制,浏览器会阻止跨域请求。要解决这个问题,有几种方法可以尝试。
一种方法是在后端接口或配置文件中添加跨域代码。可以使用以下代码来允许所有来源访问接口:
header('Access-Control-Allow-Origin:*');//允许所有来源访问
header('Access-Control-Allow-Method:POST,GET');//允许访问的方式
或者在过滤器中添加以下代码:
httpResponse.setHeader("Access-Control-Allow-Origin","*");
httpResponse.setHeader("Access-Control-Allow-Credentials", "true");
httpResponse.setHeader("Access-Control-Allow-Methods", "POST, PUT, GET, OPTIONS, DELETE");
另一种可能的原因是在配置文件或其他设置中重复配置了跨域。比如在FileUtil中配置了response.addHeader("Access-Control-Allow-Origin", "*"),然后又在CorsFilter中添加了一次配置。这样就会出现两个Access-Control-Allow-Origin问题。在这种情况下,只需要删除其中一个配置即可解决问题。
总结来说,解决"No 'Access-Control-Allow-Origin' header is present on the requested resource"问题的方法是添加跨域代码或删除重复的跨域配置。这样浏览器就能正确处理跨域请求了。
vue 报错no 'Access-Control-Allow-Origin' header is present on the requested resource.
这个错误是由于浏览器的同源策略导致的。同源策略要求在进行跨域请求时,服务器必须在响应中包含特定的响应头信息 "Access-Control-Allow-Origin"。如果服务器没有正确配置这个响应头,浏览器会阻止访问返回数据。
要解决这个问题,有几种方法可以尝试:
1. 通过后端进行配置:在服务器端的响应中添加 "Access-Control-Allow-Origin" 头信息,并设置它的值为允许访问的域名或 "*"(表示允许来自所有域名的访问)。例如,在 Node.js 的 Express 框架中,可以使用如下代码添加该头信息:
```javascript
app.use(function(req, res, next) {
res.setHeader("Access-Control-Allow-Origin", "*");
// 其他响应头设置
next();
});
```
2. 使用代理:可以设置一个代理服务器,将前端的请求转发到目标服务器上,并在代理服务器上进行跨域配置。例如,在 Vue CLI 3+ 的项目中,可以在 vue.config.js 文件中配置代理:
```javascript
module.exports = {
devServer: {
proxy: {
"/api": {
target: "http://目标服务器地址",
changeOrigin: true,
pathRewrite: {
"^/api": "" // 如果接口路径中有 "/api" 前缀,去掉它
}
}
}
}
};
```
3. JSONP:如果后端支持 JSONP,可以使用 JSONP 发起跨域请求。JSONP 是通过动态创建 script 标签来实现的,因为浏览器对于 script 标签的跨域能力没有限制。但是,这种方法只适用于 GET 请求。
请根据你的具体场景选择适合的解决方案来解决这个问题。