Vue前端开发解决跨域问题

在开发vue项目的时候,常常采用前后端完全分离的开发方式。这样的方式会在不同的域名下进行开发,在前后端调用的时候往往会产生跨域的问题。使用webpack server配置反向代理是很好的解决方案。

在项目根目录下的config文件夹中,找到index.js文件

在该文件中的proxyTable属性中添加如下记录

<pre class="brush:js;toolbar:false">'*': 'http://localhost:3000'

后面的url为服务器的url,配置完之后的样子

image.png

配置完成之后,比如vue项目的url为localhost:8000,服务器请求路径为localhost:3000/test

则在vue中直接请求:localhost:8000/test ,因为是相同域名,相同端口访问,所有不存在跨域问题。

而在ajax或者axios发送请求的时候,也只需要写 /test 就可以了

点赞

发表评论

电子邮件地址不会被公开。必填项已用 * 标注