Vue跨域解决办法

发布时间:2020-11-23 21:39:49 浏览量:128 标签: Vue跨域

什么是跨域

跨域指浏览器不允许当前页面的所在的源去请求另一个源的数据。源指协议,端口,域名。只要这个3个中有一个不同就是跨域。 这里列举一个经典的列子:

现在很多公司都是采用前后分离的方式开发。那么出现经常和会跨域打交道。我这里整理日常开发中解决跨域的实际解决方法分享给大家。


解决方案

一、后端解决

header('Access-Control-Allow-Origin:*');//允许所有来源访问 
header('Access-Control-Allow-Method:POST,GET');//允许访问的方式   


二、前端解决

在本地项目中找到config目录中的index.js文件,找到proxyTable,对其进行更改。

image.png


图片表示接口地址中含有api字符的则应用以下规则,其中target表示接口域名,changeOrigin表示可以跨域,pathRewrite是设置路径重写的。此处建议设定为同14行内容一致的。


接口文件设置

image.png


这里不用以http头开始,直接写后续的接口地址即可。

这样的配置方式在本地环境下好用,如果部署到服务端,需要进行nginx转发。


三、服务器nginx端配置


image.png