web前端高级JavaScript - 前端开发中常用的几种跨域的解决方案

彻底掌握前后端通信中“同源/跨域”的解决方案

• 什么是同源，什么是跨域

同源就是：前端页面和后台API接口通信时，它们的协议相同，域名相同，端口号也相同就是同源
跨域则是：前端页面和后台API接口通信时，只要协议，域名、端口号中有一个不同都会产生跨域请求

• 产生跨域的原因

• 服务器分开部署
• 本地开发：本地开发时调用测试服务器上的接口
• 使用第三方接口API

• 跨域常用的几种解决方案

• JSONP
  • 原理：利用script标签不存在域的限制实现跨域请求。
  • 在请求跨域API时，需要将接口的地址赋值给script标签的src属性
  • 同时通过问号传参的形式传递一个函数给后台
  • 所传递的函数必须是一个全局函数
  • 当服务器端接收的请求后，开始准备数据，并将准备好的数据作为传进来的函数的参数拼成字符串返回给前台
  • 返回给前台的是一段字符串，浏览器会自动识别字符串中的js代码并执行
  • 弊端：只支持get请求，且不安全

//jsonp前台封装
//callback必须是一个全局函数
function jsonp(url, callback){
	let script;
	//为了防止callback不是全局函数，这里把传递的回调函数挂载到全局上
	let name = `jsonp${new Date().getTime()}`;
	window[name] = function(data){
		//这里在数据请求回来以后，我们需要手动将前面添加的script标签移除掉
		document.body.removeChild(script);
		//删除全局函数
		delete window[name];
		callback && callback(data);
	}
	//处理url，拼接callback参数
	url += `${url.includes('?')?'&':'?'}callback=${name}`
	//动态创建script标签发送请求
	script = document.createElement("script");
	script.src = url;
	document.body.appendChild(script);
}

jsonp('http://127.0.0.1/list', result =>{
	console.log(result);
});

• CORS 跨域解决方案
  • 原理：绕过浏览器的安全策略
  • 服务器端设置允许源
  • Access-Control-Allow-Origin： * 表示允许所有源（也可以设置其他具体的源，如：http://192.168.1.123）
  • Access-Control-Allow-Credentials：true/false是否运行携带资源凭证(cookies)，如果上面的属性设置成了*，则这里是不允许携带资源凭证的，即不能设置为true
  • Access-Control-Allow-Headers： Content-Type:…运行的请求头
  • Access-Control-Allow-Methods：GET,POST…运行的请求方式
  • 弊端：要么设置所有源，要么设置单一源，不能同时设置多个。
    • 若要想实现同时设置多个源，可以动态判断设置允许源（设置一个白名单，如果当前请求的源在白名单中，则动态的把这个源赋值给Access-Control-Allow-Origin）

• proxy利用代理实现跨域请求
  • 服务器部署：Nginx反向代理
  • 本地开发：webpack-dev-server