跨域问题描述和解决方案

什么是跨域

跨域是浏览器对js脚本和ajax请求做出的限制。不同源的js脚本获取对方的cookie，ajax无法发送跨域请求。

解决方案

CORS

在服务器设置字段Access-Control-Allow-Origin。当浏览器收到服务器返回的资源上，没有Access-Control-Allow-Origin字段,就会拒绝加载

jsonp

jsonp的原理就是利用<script>标签没有跨域限制，通过<script>标签src属性，发送带有callback参数的GET请求，服务端将接口返回数据拼凑到callback函数中，返回给浏览器，浏览器解析执行，从而前端拿到callback函数返回的数据。

问题描述：调试阶段，前端项目请求后端接口返回数据，前端项目和后端的端口不一致，产生了跨域问题。部署阶段，前端打包完毕，项目发起请求，同样有跨域问题，两种场景的解决方法不同。

下面解决问题的场景是，打包的前端文件并不在服务器的文件路径中。

调试阶段

后端可以不用设置，只要前端设置代理服务器即可。在vue根目录下的vue.config.js添加下述代码：

module.exports = ({
	devServer: {
		proxy: 'http://localhost:3000' //3000为后端接口的端口号
	},
	publicPath: './' //解决打包后的静态文件路径问题
})

跨域只存在浏览器中，服务器之间不存在跨域，所以可以通过服务器代理

部署阶段

vue根目录下建立两个配置文件：.env.development和.env.production

//.env.development
VUE_APP_BASE_API='http://localhost:3000'
VUE_APP_ENV='dev'

//.env.production
VUE_APP_BASE_API='http://localhost:3000'
VUE_APP_ENV='pro'

在请求代码处，设置判定条件，若当前调试环境，则url=/home, 若为打包环境，则url为全文

let api = null;
if (process.env.VUE_APP_ENV === 'dev') {
	api = '/home'
} else {
	api = process.env.VUE_APP_BASE_API + '/home'
}

最后，express要设置cors允许跨域

router.all('*', function (req, res, next) {
	res.header('Access-Control-Allow-Origin', '*');
	res.header('Access-Control-Allow-Headers', 'Content-Type');
	res.header('Access-Control-Allow-Methods', '*');
	res.header('Content-Type', 'application/json;charset=utf-8');
	next();
});