跨域最优解

2018-07-25 本文已影响109人 lihuanji

项目中和面试经常遇到跨域问题，老生常谈的问题，今天就来讲讲跨域:

浏览器不支持跨域？

用户登录A网站，在cookie里面存入了登录信息，用户再登录B网站，如果没有同源策略，B网站能够轻易拿到用户A网站信息，去伪造用户向A网站发送信息。
DOM元素，iframe嵌入页面，如果没有同源策略，嵌入一个淘宝页面，伪造成淘宝钓鱼网站，用户输入账户密码可以通过dom操作拿到账户信息。
ajax，LocalStorage也不支持跨域，不能随意拿取信息。

总的来说浏览器不支持跨域是为了安全，但在项目中有些情况下需要去跨域。

先讲讲什么是同源策略

协议
域名
端口

3个都一样为同域，其中某一个不一样那么就跨域了。

列如你的网站域名是http://www.xxx.com

https://www.xxx.com （跨域，协议不一致）
http://aaa.xxx.com（跨域，域名不一致）
http://www.xxx.com:8080 （跨域，端口不一致）
http://www.xxx.com/aaa （同域）

但是在浏览器中link标签(加载css) img(加载图片) script（加载js) 标签不受同源策略，可以随便跨域，去加载其他域下面的资源。

jsonp

由于script标签不受同源策略，可以用script去跨域，原理就是创建一个script标签，src地址去引入其他域下的js文件并且带入参数和回调函数，js文件返回一个执行函数，去执行window下的回调函数。

例如现在要向www.xxx.com去请求数据，首先我们在window下声明一个函数a，然后创建一个script标签<script src="www.xxx.com?params=xxx&cb=a"></script>，params代表请求参数，cb指定成功后需要调用的回调函数，这个请求返回一个js文件内容a({data: 'xxx'})，执行了最开始在window下声明的函数a并且传入我们需要的数据。

下面来看看，如果封装一个简单的jsonp函数

    function jsonp({ url, params }) {
        return new Promise((resolve, reject) => {
            // 创建script标签
            const script = document.createElement('script');
            
            // window下声明回调函数
            window.cb = function (data) {
                resolve(data);
                document.body.removeChild(script);
            }
            
            const arr = []
            
            // 拼接参数
            for (let key in params) {
                arr.push(`${key}=${params[key]}`);
            }
            
            script.src = `${url}?${arr.join('&')&cb=cb}`
            
            // 加载文件
            document.body.appendChild(script);
        })
    }
    
    
    jsonp({
        url: 'www.xxx.com/xxx',
        params: {xx: xx},
    }).then((data) => {
        // data数据
    })

后端实现

const express = require('express');
const app = express();

app.get('/xxx', function(req, res) {
    const { xx, cb } = req.query;
    
    // 返回cb(xxx)
    res.end(`${cb}(获取到数据${xx})`);
})

app.listen(80)

jsonp缺点: 只支持get请求并且不安全，如果加载第三方返回script标签，会出现恶意攻击(xss)。

cors

解决jsonp缺点支持get post put delet请求，由服务端控制，安全性高，前端正常发送ajax请求，项目中最常用的方式。

上面说了同源策略是浏览器的行为，其实我们的请求能够到达服务器，只是浏览器给屏蔽掉了数据，cors就是利用http header头告诉浏览器一些信息，浏览器放开同源策略。

简单请求

必须是以下三种方法

get
post
head(什么是head请求? -> 只返回响应头，不会返回响应内容,http1.0定义的方法，前端用的很少)

请求头只能包含以下字段

Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type：application/x-www-form-urlencoded multipart/form-data text/plain

如果不满足上面的简单请求，那么就是非简单请求，非简单请求的时候浏览器会首先发出一个预检请求OPTIONS到服务器，把将要发送的请求方法，请求头给服务器，如果服务器返回成功，那么浏览器才会发出正式的请求，否则报错。

服务器可以设置的header头

Access-Control-Allow-Origin: www.baidu.com: 允许百度这个域下的请求，可以配置多个域，以逗号隔开，还能设置为*（*代表所有域都能请求但是origin写*不能允许携带cookie凭证）
Access-Control-Allow-Methods: POST,GET,PUT,DELETE: 允许哪些方法，以逗号隔开
Access-Control-Allow-Headers: name,token: 表示服务器支持name和token字段
Access-Control-Allow-Credentials: true: 允许cookie跨域
Access-Control-Max-Age: 6: 预检请求的有效期，单位为秒，相当于把预检请求缓存下来，下次直接发送正式请求，不用再去预检是否服务器支持该请求方法
Access-Control-Expose-Headers: token: 允许用js获取响应头里的token值
Access-Control-Request-Headers: token: 指定浏览发送请求时，需要带上的额外请求头

用express简单实现一个cors跨域服务端

    const express = require('express');
    const app = express();
    
    app.use((req, res, next) => {
        
        res.setHeader('Access-Control-Allow-Origin', 'http://localhost:8080');
        res.setHeader('Access-Control-Allow-Methods', 'POST,GET,PUT,DELETE');
        res.setHeader('Access-Control-Allow-Headers', 'name,token');
        res.setHeader('Access-Control-Allow-Credentials', true);
        res.setHeader('Access-Control-Max-Age', 6);
        res.setHeader('Access-Control-Expose-Headers', 'token');
        res.setHeader('Access-Control-Request-Headers', 'token');
        
        // 如果为预检请求，直接返回同意，避免浪费之后处理资源
        if (req.method === 'OPTIONS') {
            res.end();
        }
        
        next();
    });
    
    app.put('/uset', (req, res) => {
        res.end('yes');
    });

postMessage

除了与服务器通信需要跨域，有时候会存在iframe加载跨域，window.open()一个标签页跨域通信，html5为了解决这个问题新增了postMessage方法。

postMessage(需要传递的参数, 目标源)

iframe:

localhost:3000 下 a.html

<iframe 
    src="http://localhost:4000/b.html"
    id="frame"
    onload="load()"
></iframe>
<script>
    function load () {
        const i = document.getElementById('frame')
        i.contentWindow.postMessage('send', 'http://localhost:4000/')
    }
    
    window.addEventListener('message', function(e) {
        console.log(e.data) // 接收到ok
    })
</script>

localhost:5000 下 b.html
<script>
 window.addEventListener('message', function(e) {
     console.log(e.data) 接收到send
     
     e.source.postMessage('ok', e.origin)
 }, false)
</script>

注意: 一定要在onload结束之后再发送postMessage，否则子页面接收不到消息

window.open()

localhost:3000 下 a.html
<input type="button" value="打开窗口" onclick="open_new()">
<script>
    function open_new() {
        const newWindow = window.open('http://localhost:4000/b.html');
        
        // 跨域无法监听onload 如果同域下跨域使用
        newWindow.onload = function () {
            newWindow.postMessage('open', 'http://localhost:4000/')
        }

        setTimeout(() => {
            newWindow.postMessage('open', 'http://localhost:4000/')
        }, 1000);
    }

    window.addEventListener('message', function(e) {
        console.log(e.data)
    })
</script>

localhost:5000 下 b.html
<script>
window.addEventListener('message', function(e){
    console.log(e)
}, false);
        
window.opener.postMessage('Nice to see you', 'http://localhost:3000/');
</script>

window.open()如果是跨域，则无法监听onload事件

document.domain

该方法存在一定的限制条件，必须是2个网页的一级域名相同，用法也很简单，可以使2个页面共享cookie。

例如: a.xxx.com和b.xxx.com:

同时设置docment.domain = 'xxx.com'

服务器设置cookie时也设置到xxx.com

这样的话，在这个一级域名下的所有二三级域名，都可以互通cookie

window.name

利用window.name改变网页地址，该值不变的特点，可以做到跨域。

a网站iframe加载b网站，b网站把需要传输的数据放入window.name中，然后重定向到a网站下同域的网址，这时a网站可以顺利的拿到window.name属性。

localhost: 3000 下的a.html

<iframe id="fra" src="http://localhost:4000/b.html" onload="load()"></iframe>
<script>
    function load(){
        const f = document.getElementById('fra');

        console.log(f.contentWindow.name);
    }
</script>

localhost: 4000 下的b.html
<script>
    window.name = 'hello'

    window.location = 'http://localhost:3000/c.html'
</script>

localhost: 3000 下的c.html
无需任何代码,建一个空的html文件

location.hash

hash值得变化不会导致页面刷新，通过a页面改变b页面hash值，b页面不能直接通过parent去修改a页面的hash值，需要通过加载一个a域下的代理iframe修改，从而实现跨域通信。

localhost: 3000 下的a.html

<iframe id="fra" src="http://localhost:4000/b.html" onload="load()"></iframe>
<script>
    function load(){
        const f = document.getElementById('fra');
        f.src = 'http://localhost:4000/b.html#hello'
    }
    window.addEventListener('hashchange', function() {
        console.log(window.location.hash)
    })
</script>

localhost: 4000 下的b.html

<script>
    addEventListener('hashchange', function() {
        console.log(window.location.hash)
        
        const ifr = document.createElement('iframe');
        ifr.style.display = 'none';
        ifr.src = 'http://localhost:3000/c.html#yes';
        document.body.appendChild(ifr);
    })
</script>

localhost: 3000 下的c.html
<script>
    parent.parent.location.hash = window.location.hash.substring(1);
</script>

other

以上就是项目中最常用到的跨域方式，还有一种与服务器通信方式websocket不受浏览器同源策略。平常在开发中经常用到的webpack-dev-server,nginx,http-server...利用的是代理去请求。

先是本地起了一个代理服务器，前端发送http到代理服务器，由代理服务器请求后端的接口，跨域是浏览器的行为，2个服务器之间是没有同源策略的，所有代理服务器拿到数据后，再返回给前端。代理服务器和前端同源。

image