axios解决 No 'Access-Control-Allow-Origin' header is present on the requested resource

在使用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`请求头的值），则表示任意源都可以接收响应；如果没有设置或者只设置了特定源，那么只有那些列在允许列表中的源才能成功接收跨域数据。

为了修复这个问题，你需要在服务器端设置适当的响应头，例如如果你希望只允许特定的域访问资源，你可以这样做：

// 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` 请求头，比如：

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 ]