最近在做一个前后端分离的毕设,在前端向后端发送get请求时遇到了Vue跨域的问题。
been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header
is present on the requested resource
解决方案如下(以vue脚手架为例):
1、打开config文件夹里面的index.js文件,找到proxyTable参数。这个参数是vue为我们解决跨域问题专门设置的。
2、修改参数(以我的项目为例)。我原本要请求的url是后端的地址,http://localhost:8083/predict/api 但是我前端的地址是http://localhost:8080 于是产生了跨域问题。此时,只需要把proxyTable设置成如下
target表示服务器端的地址,changeOrigin表示是否跨域。
‘/predict’: {}, 就是告诉node, 我接口只要是’/predict’开头的就用代理.所以你的接口就要这么写
‘^predict’ :'predict'
表示将路径中的predict换为predict,因为我请求路径中原本就有predict所以我就不用修改,不用修改就是这么写。如果你的predict只是为了标识使用代理,实际上不存在,那就把predict替换成空,如下。
‘^predict’ :''
注意predict只是我自己的路径,不是本身就带有的参数,你需要根据自己的路径来重写。
3、修改完之后,还有一个坑,可能因为浏览器、端口存在缓存,不会立即生效,这时候可以尝试把前端的端口改一下再改回去,清除掉缓存。还是index.js文件,修改里面的port参数的数值即可。
4、npm run dev
此时,在浏览器看到的url依旧是前端的url请求,但是实际上请求会被代理至服务器端
参考文章/weixin_34400525/article/details/88798160
/ZXT149074136/article/details/100016891