axios解决 No 'Access-Control-Allow-Origin' header is present on the requested resource
时间: 2023-08-25 09:11:51 浏览: 167
在使用axios进行跨域请求时,如果出现"No 'Access-Control-Allow-Origin' header is present on the requested resource"的错误,这是由于浏览器的同源策略导致的。
同源策略要求请求的源(协议、域名、端口)必须与目标资源的源相同,否则就会出现跨域问题。浏览器会在发送请求时自动添加一个Origin头部字段,用于告知服务器请求的源。
要解决这个问题,有几种方法可以尝试:
1. 使用代理:在你的后端服务器上设置一个代理,将跨域请求转发到目标服务器。这样可以绕过浏览器的同源策略限制。
2. 设置CORS(跨域资源共享):在后端服务器的响应中添加适当的CORS头部字段,允许来自其他域的请求访问资源。例如,在响应中添加"Access-Control-Allow-Origin: *",表示允许任何域的请求访问资源。
3. JSONP:如果目标服务器支持JSONP,可以通过在请求中添加一个回调函数来实现跨域请求。
4. 修改服务器设置:如果你有权限访问目标服务器,可以尝试修改服务器的配置,允许跨域请求。
需要注意的是,在生产环境中,应该考虑安全性和授权问题来限制跨域访问。以上方法中,使用代理和设置CORS是比较常见和推荐的解决方案。
相关问题
No 'Access-Control-Origin' header is present on the requested resource
当浏览器尝试发起一个跨域请求时,如果服务器返回的响应头中没有包含`Access-Control-Allow-Origin`字段,就会收到类似 "No 'Access-Control-Allow-Origin' header is present on the requested resource" 的错误提示。这通常是因为服务器没有明确允许来自特定源的跨域请求。
`Access-Control-Allow-Origin` 是 CORS(Cross-Origin Resource Sharing,跨源资源共享)协议的一部分,它告诉浏览器哪些源(通常是域名)被允许接收响应数据。如果服务器设置了 `*` 或者客户端请求的源(即`Origin`请求头的值),则表示任意源都可以接收响应;如果没有设置或者只设置了特定源,那么只有那些列在允许列表中的源才能成功接收跨域数据。
为了修复这个问题,你需要在服务器端设置适当的响应头,例如如果你希望只允许特定的域访问资源,你可以这样做:
```javascript
// Node.js 使用 express 框架示例
app.all('*', function(req, res, next) {
res.header('Access-Control-Allow-Origin', 'http://example.com');
res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
res.header('Access-Control-Allow-Headers', 'X-Requested-With, Content-Type');
next();
});
```
然后在发送跨域请求时,确保你的前端代码也包含了正确的 `Origin` 请求头,比如:
```javascript
axios.get('/api/data', {
headers: {
'Origin': 'http://example.com',
},
})
```
vue二次封装的axios报错 No 'Access-Control-Allow-Origin' header is present on the requested resource.
这个错误是CORS(跨源资源共享)策略引起的。CORS是一种浏览器机制,用于控制跨域资源请求的安全性。当你在浏览器中发送跨域请求时,浏览器会发送一个预检请求(preflight request)来检查服务器是否允许此请求。如果服务器没有正确配置响应头中的Access-Control-Allow-Origin字段,浏览器就会报错,显示"No 'Access-Control-Allow-Origin' header is present on the requested resource"。
在你提供的代码中,baseURL设置为"127.0.0.1:20011",这可能导致发送跨域请求。为了解决这个问题,你需要在服务器端配置响应头,允许来自"127.0.0.1:20011"域的请求。
在你的代码中,你可以尝试在axios实例的配置中添加以下代码来解决跨域问题:
headers: {
"Access-Control-Allow-Origin": "http://127.0.0.1:20011",
"Access-Control-Allow-Methods": "GET, POST, OPTIONS",
"Access-Control-Allow-Headers": "Content-Type",
"Access-Control-Allow-Credentials": "true"
}
请注意,这只是一个示例,你需要根据你的具体需求进行配置。另外,你也可以在服务器端配置响应头来解决跨域问题。
希望我的回答对你有帮助!<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [vue跨域问题Response to preflight request doesn‘t pass access control check: No ‘Access-Control-...](https://blog.csdn.net/m0_45251955/article/details/122108170)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* [Vue跨域问题 has been blocked by CORS policy:....No ‘Access-Control-Allow-Origin‘ header](https://blog.csdn.net/qq_40794785/article/details/108991340)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)