526互联

52.同源策略（Same-Origin Policy）限制了跨域请求No 'Access-Control-Allow-Origin' header is present on the requested resource.

发布时间 2023-05-29 14:07:11作者: 种太阳

又遇到如下报错了，该如何处理，

Access to XMLHttpRequest at 'http://localhost:3000/users' from origin 'http://localhost:5173' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

这个错误是因为浏览器的同源策略（Same-Origin Policy）限制了跨域请求。在默认情况下，浏览器只允许在同一域名下的请求。如果你的前端代码和后端代码不在同一个域名下，就会出现这个错误。

解决这个问题的方法有两种：

  1. 在后端添加CORS头部信息

在后端代码中添加如下代码，即可解决跨域问题：

app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
  res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
  res.setHeader('Access-Control-Allow-Credentials', true);
  next();
});

这段代码会在每个请求的响应头中添加CORS头部信息，允许所有域名的请求访问。

  1. 使用代理

前端代码中可以使用代理来解决跨域问题。在Vue CLI中，可以在vue.config.js文件中配置代理：

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

这段代码会将所有以/api开头的请求转发到http://localhost:3000，并将响应返回给前端。这样就可以绕过浏览器的同源策略限制了。