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