100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > Vue跨域配置proxyTable问题

Vue跨域配置proxyTable问题

时间:2024-07-08 09:37:09

相关推荐

Vue跨域配置proxyTable问题

最近在做一个前后端分离的毕设,在前端向后端发送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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。