vue中has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested

resource. How do I solve this issue?

这个问题是由于浏览器的同源策略所导致的，而这种限制可以有效地防止跨站点脚本攻击。要解决这个问题，我们可以在需要进行跨域请求的服务器端添加响应头：Access-Control-Allow-Origin。具体地说，我们需要在服务端的响应头中添加以下内容：

Access-Control-Allow-Origin: *

这个星号表示允许任何域名的请求访问该资源，当然也可以指定具体的域名。如果使用的是Apache或Nginx等服务器，我们可以通过配置文件添加上述响应头。如果是基于Node.js的开发，可以使用cors中间件这个npm包来方便地进行跨域访问的处理。

相关问题

vue blocked by CORS policy: No Access-Control-Allow-Origin header is present on the requested resource.

跨域资源共享（CORS）是一种机制，它使用额外的HTTP头来告诉浏览器让运行在一个origin（域）上的Web应用被准许访问来自不同源服务器上的指定的资源。如果一个资源的访问没有得到允许，那么就会出现“blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.”的错误提示。解决这个问题的方法有以下几种：

1.在服务端设置Access-Control-Allow-Origin头部信息，允许跨域访问。例如，在Node.js中，可以使用cors模块来设置：

const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors());

2.使用代理服务器，将请求转发到目标服务器。例如，在vue.config.js中配置代理：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

3.在前端使用JSONP或者WebSocket等技术进行跨域请求。

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

当浏览器出现 "has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource" 错误时，这是由于浏览器的同源策略所致，即浏览器限制了跨域请求。为了解决这个问题，您可以在服务端添加一个响应头来允许跨域请求。

如果您使用的是Node.js，可以在服务端代码中添加以下代码来设置响应头:

res.set("Access-Control-Allow-Origin", "*");

这将允许所有的域名都可以进行跨域请求。如果您只想允许特定的域名进行跨域请求，可以将"*"替换为您想要允许的域名。

另外，需要注意的是，添加响应头后需要重新启动服务端，以使更改生效。

这样，当前端发送请求时，就不会再出现 "has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource" 的错误了。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [解决浏览器跨域问题 “has been blocked by CORS policy: No ‘Access-Control-Allow-Origin‘ header is ...](https://blog.csdn.net/m0_50671318/article/details/119821838)[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: 100%"]
[ .reference_list ]