什么是跨域

跨域是浏览器对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();
});