axios解决has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

当我们在使用axios进行跨域请求时，可能会遇到"has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource."的问题。这是因为浏览器的同源策略限制了跨域请求。为了解决这个问题，我们可以在后端服务器上设置响应头，允许特定的域名或所有域名访问该资源。具体来说，可以在后端服务器的响应头中添加"Access-Control-Allow-Origin"字段，值为"*"或特定的域名，表示允许所有域名或特定域名访问该资源。如果后端服务器不支持设置响应头，我们也可以使用代理服务器或JSONP等方式来解决跨域问题。

相关问题

has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested，vue解决办法

引用[1]:要解决Vue项目中的CORS跨域问题，可以通过在服务端添加响应头来解决。具体的解决办法是在服务端的响应中添加"Access-Control-Allow-Origin"头，并设置为允许跨域请求的域名或通配符"*"。例如，在Node.js中使用Express框架，可以通过以下方式解决CORS问题[^1]：

const express = require('express');
const app = express();

app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', '*');
  next();
});

// 其他路由和中间件

这样设置之后，服务端就会在响应中添加"Access-Control-Allow-Origin"头，允许任何域名进行跨域请求。

引用:在Vue项目中使用axios发送请求时，可以通过在请求中设置"Access-Control-Allow-Origin"头来解决CORS问题。具体的解决办法是在axios请求的配置中添加"headers"字段，并设置"Access-Control-Allow-Origin"头为允许跨域请求的域名或通配符"*"。例如：

const url = "http://www.a-bm.cn/chanpin-0_p0.html";
this.$axios({
  method: "get",
  url: url,
  headers: {
    "Access-Control-Allow-Origin": "*"
  }
}).then(res => {
  window.console.log(res);
});

这样设置之后，axios发送的请求就会带上"Access-Control-Allow-Origin"头，允许跨域请求。

'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

"'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource." 表示在请求的资源上没有提供 'Access-Control-Allow-Origin' 头，导致该资源无法被访问。这是由于浏览器的同源策略所引起的安全限制。同源策略要求AJAX请求只能在同一域名下进行访问，如果请求的资源位于不同的域名下，并且服务器没有设置允许跨域访问的响应头（'Access-Control-Allow-Origin'），浏览器会拦截这个请求，阻止其访问。

为了解决这个问题，你可以在服务端设置响应头，允许特定的域名访问该资源。可以通过在响应头中添加 'Access-Control-Allow-Origin' 字段，并将其值设置为请求的域名，即允许该域名跨域访问该资源。如果允许多个域名访问该资源，可以使用通配符 '*' 来设置 'Access-Control-Allow-Origin' 的值。

另外，还可以设置其他的CORS相关的响应头，例如 'Access-Control-Allow-Methods' 用于指定允许的请求方法， 'Access-Control-Allow-Headers' 用于指定允许的请求头，以及 'Access-Control-Max-Age' 用于指定预检请求的缓存时间等。

请注意，在生产环境中，确保仅允许信任的域名跨域访问资源，以保护系统的安全性。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [vue用axios进行token请求出现has been blocked by CORS policy: No ‘Access-Control-Allow-Origin‘ ...](https://blog.csdn.net/FHlang/article/details/115770129)[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_1"}}] [.reference_item style="max-width: 50%"]
- *2* [has been blocked by CORS policy: No ‘Access-Control-Allow-Origin‘ header is present on the ...](https://blog.csdn.net/qq_45800640/article/details/118422632)[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_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]