一、遇到的问题
Access to XMLHttpRequest at 'http://localhost:8000/api/xxx/xxx' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. 看到这个问题的第一直觉就是跨域问题,脑海里立马出现了解决方案:
- 在 client 端通过代理服务器的方式解决
- 联系后端(在我心中一切跨域问题后端都可以轻松化解)
在第二点「尝试的解决方案」中查看解决方案的细节过程。
二、尝试的解决方案
前端用的构建工具是 vite
2.1 在 Client 端设置 Proxy
先说说作为前端使用代理服务器解决的过程吧,作为一名老码农,很快找到了 proxy 的设置地址,开心的完成了配置: :::tips // vite.config.js proxy: { '/api/xxx/xxx': { target: 'http://localhost: 8000', changeOrigin: true } } ::: 当我以为这样就解决了问题时,结果还是一样的报错,打开 Network 面板,发现 Origin 根本没变!!!(这个问题暂时不做讨论,后续单独出一篇文章来研究这个问题)
2.2 联系后端
这里后端用的 Node.js
如标题所说「联系后端」但是后端表示“没时间看”,所以只有自己来研究了,下面一起来看看我做的尝试:
- 根据接口路径 /api/xxx/xxx 搜索到对应文件,然后尝试在当前 API 中设置 'Access-Control-Allow-Origin' 为 '*' | 'http://localhost: 3000',结局都是失败 😔
- 上述方法失败后就尝试开始全局搜索有关 CORS 设置的字段,结果一无所获 😩
- 最后开始查询相关资料,发现 Node 中有 middleWare 的概念,于是便开始尝试,这次最终还是失败了 😭
- 原因:没有仔细看浏览器控制台的报错信息,因为我只是在 middleWare 中设置了 'Access-Control-Allow-Origin' 为 '' ,当时报错信息已经变了(Credential is not supported if the CORS header 'Access-Control-Allow-Origin' is ''),Credential 不允许将 Access-Control-Allow-Origin 设置为 '*'
这里做个小结:在解决问题的时候一定搞清楚出现问题的根本原因,然后再去下手,并且在着手解决问题的时候一定要把当前问题的解决方案搞清楚不要盲目去尝试,我去解决这个问题的时候后续就有点乱了,所以写下这篇文章来复盘。 究其原因,根本还是浏览器同源策略,这个东西有兴趣可以去自行查询~
在这里,了解更多关于 CORS 的描述。