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)限制了跨域请求。在默认情况下,浏览器只允许在同一域名下的请求。如果你的前端代码和后端代码不在同一个域名下,就会出现这个错误。
解决这个问题的方法有两种:
- 在后端添加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头部信息,允许所有域名的请求访问。
- 使用代理
前端代码中可以使用代理来解决跨域问题。在Vue CLI中,可以在vue.config.js文件中配置代理:
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://localhost:3000',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
}
}
这段代码会将所有以/api开头的请求转发到http://localhost:3000,并将响应返回给前端。这样就可以绕过浏览器的同源策略限制了。

浙公网安备 33010602011771号