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

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

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头部信息

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

1
2
3
4
5
6
7
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文件中配置代理:

1
2
3
4
5
6
7
8
9
10
11
12
13
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

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

  

posted @   种太阳  阅读(706)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
历史上的今天:
2022-05-29 46.VUE脚手架目录结构
点击右上角即可分享
微信分享提示