跨域的几种方式总结

这两天在看前端常见的一个问题—跨域
跨域的问题的出现是因为浏览器的同源策略，限制了同一个源的脚本如何与另一个源进行交互。同源：协议，域名，端口号都相同。
同源策略限制的行为：
1、cookie和localstorge无法获取
2、DOM和JS对象无法获取
3、Ajax请求发不出去
跨域请求的方式

jsonp

原理：<script标签的src属性不受跨域的限制，可以动态生成script标签，src属性携带请求网址与回调函数发送到服务器，服务器返回数据。
客户端所在端口
设置静态文件的目录，并且静态文件端口为90

var app = express();
app.use(express.static(__dirname))
app.listen(90);

在index.html所在90端口请求91端口的数据，在html中定义一个本地的函数放在src请求参数的callback中

 <h1>我是客户端</h1>
    <script>
        function f(data){
            console.log(data)
        }
    </script>
    <script src = "http://localhost:91?callback=f"></script>

服务器端口91

var app3 = express();
app3.get('/',(req,res)=>{
    var funcname = req.query.callback;
    let data = {
        code:0,
        message:"hello jsonp"
    };
    res.send(`${funcname}(${JSON.stringify(data)})`)
})
app3.listen(91,()=>{
    console.log("ok");
})

2、CORS跨域资源共享
使用自定义的HTTP头部让浏览器与服务器进行沟通，决定响应是成功还是失败。使用cors的关键是服务器，服务器实现cors接口，就可以跨源。
所有cors发送请求会预先发送options试探性请求，服务器接受直接返回客户端成功，再进行请求。
普通跨域请求：服务器端设置Access-Control-Allow-Origin，接受域名的请求，为*或者某个网址。
带cookie的请求：xhr.withCredentials = true;前后端都需要进行配置
3、postMessage
postMesage是H5提供的API,可以解决跨域操作的window属性
启动两个server服务支持a,b页面

var express = require('express')
var app1 =express();
app1.use(express.static(__dirname));
app1.listen(1001,()=>{
    console.log("a准备")
});

var express = require('express')
var app2 = express();
app2.use(express.static(__dirname))
app2.listen(1002,()=>{
    console.log("b准备")
})

a页面在端口1001，b端口在1002，a向b端口通过postMessage发送信息，通过onmessage接收返回的数据。

 <h1>我是A页面</h1>
    <iframe id = "iframe" src = "http://localhost:1002/b.html" style="display: none;"></iframe>
    <script>
        var iframe = document.getElementById("iframe");
        //当前加载完毕
        iframe.onload = function(){
            var data = {
                name:"soda"
            };
            iframe.contentWindow.postMessage(JSON.stringify(data),"http://localhost:1002/b.html")
        };
        window.onmessage = function(ev){
            console.log(ev.data);
        }
        // window.addEventListener('message',function(e){
        //     alert("data from b" + e.data)
        // },false)
    </script>

b页面

<h1>我是B页面</h1>
    <script>
        window.onmessage = function(ev){
            console.log(ev.data);
            ev.source.postMessage(ev.data+"@",ev.origin)
        }
   </script>

4、Nginx反向代理
跨域原理：同源策略是浏览器的安全策略，不是http协议的一部分。服务器端调用HTTP接口只是http协议，不会执行js脚本，不需要同源策略，不存在跨域。
实现：nginx配置一个代理服务器做一个跳板，域名与domain1相同，反向代理domain2，并且可以顺便修改cookie的domain信息，方便当前域的Cooke写入。

5、Nodejs中间件做代理跨域
启动一个代理服务器，实现数据的转发。

本文地址：https://blog.csdn.net/mx_is_bang/article/details/107444610