Part9：跨域的几种解决方案和原理

1.什么是同源策略？

同源策略是客户端脚本（尤其是 Javascript）的重要的安全度量标准。其目的是防止某个文档或脚本从多个不同源装载。
这里的同源策略指的是：协议，域名，端口相同，同源策略是一种安全协议，指一段脚本只能读取来自同一来源的窗口和文档的属性。

2.为什么要有同源限制？

我们举例说明：比如一个黑客程序，他利用 Iframe 把真正的银行登录页面嵌到他的页面上，当你使用真实的用户名，密码登录时，他的页面就可以通过 Javascript 读取到你的表单中 input中的内容，这样用户名，密码就轻松到手了

3.什么是跨域？

当一个请求url的协议、域名、端口号三者之间任意一个与当前页面url不同即为跨域

4.跨域的解决方案以及原理

情况1：开发时候是跨域的，但是服务器部署的时候是同源的

• 解决方案：修改本地HOST「DNS解析」
• 核心：骗过浏览器，让浏览器认为是同源，但是本质还是跨域

情况2：开发和上线都是跨域的

• JSONP「不安全，并且只支持GET请求」
• CORS跨域资源共享
• proxy跨域代理 「目前最常用的是他」
• 杂七杂八的方案：
  • document.domain + iframe
  • window.name + iframe
  • H5 postMessage

下面重点讲解三种跨域解决方案：

(1) JSONP原理

• 利用<script>「或者<link>/<img>/...」标签没有跨域限制的漏洞，网页可以得到从其他来源动态产生的 JSON数据。
• JSONP请求一定需要对方的服务器做支持才可以。
• JSONP只支持GET请求，JSONP的优势在于支持老式浏览器，以及可以向不支持CORS的网站请求数据。
• JSONP原理图：

// 服务器端代码
let express = require('express'),
    app = express();
app.listen(8001, _ => {
    console.log('OK!');
});
app.get('/list', (req, res) => {
    let {
        callback = Function.prototype
    } = req.query;
    let data = {
        code: 0,
        message: '珠峰培训'
    };
    res.send(`${callback}(${JSON.stringify(data)})`);
});

(2)cors

• CORS 需要浏览器和后端同时支持。浏览器会自动进行 CORS 通信，实现 CORS 通信的关键是后端。只要后端实现了 CORS，就实现了跨域。服务端设置 Access-Control-Allow-Origin 就可以开启 CORS。
• CORS支持所有类型的HTTP请求，是跨域HTTP请求的根本解决方案。

module.exports = {
    //=>WEB服务端口号
    PORT: 3001,
    //=>CROS跨域相关信息
    CROS: {
        ALLOW_ORIGIN: 'http://127.0.0.1:5500',
        ALLOW_METHODS: 'PUT,POST,GET,DELETE,OPTIONS,HEAD',
        HEADERS: 'Content-Type,Content-Length,Authorization, Accept,X-Requested-With',
        CREDENTIALS: true
    }
};

app.use((req, res, next) => {
    const {
        ALLOW_ORIGIN,
        CREDENTIALS,
        HEADERS,
        ALLOW_METHODS
    } = CONFIG.CROS;
    res.header("Access-Control-Allow-Origin", ALLOW_ORIGIN);
    res.header("Access-Control-Allow-Credentials", CREDENTIALS);
    res.header("Access-Control-Allow-Headers", HEADERS);
    res.header("Access-Control-Allow-Methods", ALLOW_METHODS);
    req.method === 'OPTIONS' ? res.send('CURRENT SERVICES SUPPORT CROSS DOMAIN REQUESTS!') : next();
});

(3)proxy代理 （适用于本地开发）

• 不管是Node中间件代理还是nginx反向代理，主要是通过同源策略对服务器不加限制。
• 日常工作中，用得比较多的跨域方案是cors和nginx反向代理。

module.exports = {
    //=>WEB服务端口号
    PORT: 3001,
    //=>CROS跨域相关信息
    CROS: {
        ALLOW_ORIGIN: 'http://127.0.0.1:5500',
        ALLOW_METHODS: 'PUT,POST,GET,DELETE,OPTIONS,HEAD',
        HEADERS: 'Content-Type,Content-Length,Authorization, Accept,X-Requested-With',
        CREDENTIALS: true
    }
};

app.use((req, res, next) => {
    const {
        ALLOW_ORIGIN,
        CREDENTIALS,
        HEADERS,
        ALLOW_METHODS
    } = CONFIG.CROS;
    res.header("Access-Control-Allow-Origin", ALLOW_ORIGIN);
    res.header("Access-Control-Allow-Credentials", CREDENTIALS);
    res.header("Access-Control-Allow-Headers", HEADERS);
    res.header("Access-Control-Allow-Methods", ALLOW_METHODS);
    req.method === 'OPTIONS' ? res.send('CURRENT SERVICES SUPPORT CROSS DOMAIN REQUESTS!') : next();
});

【nginx反向代理】