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头部信息
在后端代码中添加如下代码,即可解决跨域问题:
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头部信息,允许所有域名的请求访问。
- 使用代理
前端代码中可以使用代理来解决跨域问题。在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
,并将响应返回给前端。这样就可以绕过浏览器的同源策略限制了。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
2022-05-29 46.VUE脚手架目录结构