Web前端开发，必须要了解的跨域解决方案

文章目录

Web中的四种跨域的解决方案
- 1、JSONP
- 2、CORS通信
- 3、node代理（以vue为例）
- 4、服务器网关，指定链接规则，重写链接。（其实6、7都是在服务端解决跨域）
- 5、后端做转发。
- 6、postMessage
- 7、document.domain

Web中的四种跨域的解决方案

1、JSONP

原生写法

<script src="http://domain/api?param1=6&callback=jsonp"></script>
<script> function jsonp(data) {console.log(data)}
</script>

封装后写法

<script>//参数obj说明：//eg:{//       url:'',//        params:{},//        success:function(){}// }function jsonpPakeage(obj) {//创建 写入url地址中的函数名称，var callbackName = "fn"+Math.random().toString(16).split("\.")[1];    //创建一个script标签var script = document.createElement("script");let params = obj.params || '';if (typeof params  == 'object') {var arr = new Array();for (var key in params) {arr.push(key + '=' +params[key])}params  = arr.join('&');}//设置标签的请求路径    像这样：http://localhost:3000/api?callback=fn153498520409635392&id=1script.src = obj.url + '?' + 'callback=' + callbackName + '&' + params;//将创建好的带请求的script标签添加到html的body中document.getElementsByTagName('head')[0].appendChild(script);//定义回调函数//这里必须这样写window[callbackName];  如果写window.callbackName会报错没有定义window[callbackName] = function (res) {obj.success(res);delete window.callbackName;     //由于请求一次会创建一个script标签和一个函数，所以每次获取到结果后就删除document.getElementsByTagName('head')[0].removeChild(script);}}//调用jsonpPakeage({url:"http://localhost:8080/js/index.js",parames:"",success:function(res){console.log(res)}})</script>

JSONP跨域的原理
利用 <script> 标签中的src属性，不受浏览器同源策略影响的特性。通过 <script> 标签中的src属性指向一个需要访问的地址，并且我们可以通过传递一个callback函数来接收并处理返回信息

JSONP跨域的缺陷
只限于 get 请求

2、CORS通信

CORS通信的关键是后端。
在服务器端，需要设置指定允许访问的IP（ Access-Control-Allow-Origin），就可以开启 CORS

3、node代理（以vue为例）

vue项目，一般在项目config目录下面有个index.js 文件
配制proxyTable做代理

// config/index.js'use strict'
const path = require('path')
module.exports = {dev: {proxyTable: {'/api': {target: 'http://localhost:7001',//后端接口地址changeOrigin: true, // 是否允许跨越pathRewrite: {'^/api': '/api', // 重写,}}},其它配制略过。。。。。。},}

4、服务器网关，指定链接规则，重写链接。（其实6、7都是在服务端解决跨域）

5、后端做转发。

6、postMessage

这种方式通常用于获取嵌入页面中的第三方页面数据。一个页面发送消息，另一个页面判断来源并接收消息

通过postMessage方法发送数据。

otherWindow.postMessage(message, targetOrigin, [transfer]);

通过监听message事件来接收传递过来的数据。

window.addEventListener("message", function(event) {       console.log(event, event.data);
}, false);

案例如下：

父窗体创建跨域iframe并发送信息

<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>跨域POST消息发送</title></head><body><textarea id="message"></textarea><input type="button" value="发送" onclick="sendPost()"><iframe  src="http://moweide.gitcafe.io/other-domain.html" id="otherPage" style="display:none"></iframe></body><script type="text/JavaScript">   // sendPost 通过postMessage实现跨域通信将表单信息发送到 moweide.gitcafe.io上, 并取得返回的数据function sendPost() {       // 获取id为otherPage的iframe窗口对象var iframeWin = document.getElementById("otherPage").contentWindow;       // 向该窗口发送消息iframeWin.postMessage(document.getElementById("message").value,http://moweide.gitcafe.io');   }   // 监听跨域请求的返回window.addEventListener("message", function(event) {       console.log(event, event.data);   }, false);</script></html>

子窗体接收信息并处理

<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>POST Handler</title><script src="//code.jquery.com/jquery-1.11.0.min.js"></script><script type="text/JavaScript">// 监听父窗口发送过来的数据向服务器发送post请求window.addEventListener("message", function( event ) {var data = event.data;            //接收父窗口传递过来的数据window.parent.postMessage(res, "*");      //通过postMessage给父窗口发送新的信息}, false);</script></head><body></body>
</html>

7、document.domain

利用document.domain 实现跨域的前提条件：
这两个域名必须属于同一个基础域名!而且所用的协议，端口都要一致，否则无法利用document.domain进行跨域

也就是说，这种方法，只适用于同一个域名下的不同的二级域名之间，使用document.domain = ‘主域名’ 来实现跨域）

作者：木子水吉_08
链接：https://www.jianshu.com/p/3d8748f85a06
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

参考链接
https://baijiahao.baidu.com/s?id=1628698007235057817&wfr=spider&for=pc