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

╰+攻爆jí腚メ 2022-12-28 08:18 52阅读 0赞

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

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

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

*  产生跨域的原因

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

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

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

//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  
>         ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpeGlhb3Nlbmxpbg_size_16_color_FFFFFF_t_70 1]  
>         ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpeGlhb3Nlbmxpbg_size_16_color_FFFFFF_t_70 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpeGlhb3Nlbmxpbg_size_16_color_FFFFFF_t_70]: /images/20221120/717d9d1bbdfb4d4494ad7e5d1a44f28c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpeGlhb3Nlbmxpbg_size_16_color_FFFFFF_t_70 1]: /images/20221120/a45b9f2121c94b9987b393e10e3387c3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpeGlhb3Nlbmxpbg_size_16_color_FFFFFF_t_70 2]: /images/20221120/f4ba040e1b384f60a5fd2f392ae6dff8.png