js 跨域一同源策略同源策略，是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR

主要内容抄录自小铭子。

一同源策略

同源策略，是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。对于 url 来说，只要端口及端口前的 url 不相同，相互访问即会跨域。

同源策略限制以下几种行为：

Cookie、LocalStorage 和 IndexDB 无法读取
DOM 和 JS 对象无法获得
AJAX 请求不能发送

二跨域解决方案

1. JSONP跨域

jsonp的原理就是利用<script>标签没有跨域限制，通过<script>标签 src 属性，发送带有 callback 参数的 GET 请求，服务端将接口返回数据拼凑到 callback 函数中，返回给浏览器，浏览器解析执行，从而前端拿到 callback 函数返回的数据。

实际上是将返回数据变成了一串 js 代码，此时如果调试，控制台返回的状态码不再是 ajax 的状态码，而是普通<script>加载文件的状态码。

jsonp只支持get请求，支持老的IE浏览器，适合加载不同域名的js、css，img等静态资源。

代码实现：

/**
* 创建一个script标签，并引入内容，内容url指向后台接口
* 传参一个回调函数名给后端，方便后端返回时执行这个在前端定义的回调函数
*/
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'http://www.domain2.com:8080/login?user=admin&callback=handleCallback';
document.head.appendChild(script);

function handleCallback(res) {
    alert(JSON.stringify(res));
}


/**
* nodejs 实现的后端代码
* 返回的数据：handleCallback({"success": true, "user": "admin"})，这将直接调用前端定义的 handleCallback 方法，具体值成为一个参数。
* 
*/
var querystring = require('querystring');
var http = require('http');
var server = http.createServer();

server.on('request', function(req, res) {
    var params = querystring.parse(req.url.split('?')[1]);
    var fn = params.callback;

    // jsonp返回设置
    res.writeHead(200, { 'Content-Type': 'text/javascript' });
    res.write(fn + '(' + JSON.stringify(params) + ')');

    res.end();
});
server.listen('8080');

$.ajax 与 axios 实现跨域示例：

$.ajax({
    url: 'http://www.domain2.com:8080/login',
    type: 'get',
    dataType: 'jsonp',  // 请求方式为jsonp
    jsonpCallback: "handleCallback",  // 自定义回调函数名
    data: {}
});

this.$http = axios;
this.$http.jsonp('http://www.domain2.com:8080/login', {
    params: {},
    jsonp: 'handleCallback'
}).then((res) => {
    console.log(res); 
})

2. 跨域资源共享（CORS）

CORS 全称是"跨域资源共享"（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出 XMLHttpRequest 请求，从而克服了 AJAX 只能同源使用的限制。 CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。

浏览器将 CORS 跨域请求分为简单请求和非简单请求。

1) 简单请求

只要同时满足一下两个条件，就属于简单请求

(1) 使用下列方法之一：head，get，post。 (2) 请求的Heder是：

Accept
Accept-Language
Content-Language
Content-Type: 只限于三个值：application/x-www-form-urlencoded、multipart/form-data、text/plain。

不同时满足上面的两个条件，就属于非简单请求。浏览器对这两种的处理，是不一样的。

对于简单请求，浏览器直接发出 CORS 请求。具体来说，就是在头信息之中，增加一个 Origin 字段。

GET /cors HTTP/1.1
Origin: http://api.bob.com
Host: api.alice.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...

上面的头信息中，Origin字段用来说明，本次请求来自哪个源（协议 + 域名 + 端口）。服务器根据这个值，决定是否同意这次请求。

CORS 请求设置的响应头字段，都以 Access-Control-开头:

 Access-Control-Allow-Origin：必选，它的值要么是请求时Origin字段的值，要么是一个*，表示接受任意域名的请求。

 Access-Control-Allow-Credentials：可选，它的值是一个布尔值，表示是否允许发送 Cookie。默认情况下，Cookie 不包括在 CORS 请求之中。设为 true，即表示服务器明确许可，Cookie 可以包含在请求中，一起发给服务器。这个值也只能设为 true，如果服务器不要浏览器发送 Cookie，删除该字段即可。

 Access-Control-Expose-Headers：可选，CORS 请求时，XMLHttpRequest 对象的 getResponseHeader() 方法只能拿到6个基本字段：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段，就必须在 Access-Control-Expose-Headers 里面指定。上面的例子指定，getResponseHeader(‘FooBar’)可以返回FooBar字段的值。

2) 非简单请求

非简单请求是那种对服务器有特殊要求的请求，比如请求方法是 PUT 或D ELETE，或者 Content-Type 字段的类型是 application/json。非简单请求的 CORS 请求，会在正式通信之前，增加一次 HTTP 查询请求，称为"预检"请求（preflight）。

预检请求，用的请求方法是 OPTIONS，表示这个请求是用来询问的。请求头信息里面，关键字段是 Origin，表示请求来自哪个源。除了 Origin 字段，"预检"请求的头信息包括两个特殊字段。

OPTIONS /cors HTTP/1.1
Origin: http://api.bob.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: X-Custom-Header
Host: api.alice.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0..

Access-Control-Request-Method：必选，用来列出浏览器的CORS请求会用到哪些HTTP方法，上例是 PUT。

Access-Control-Request-Headers：可选，该字段是一个逗号分隔的字符串，指定浏览器 CORS 请求会额外发送的头信息字段，上例是 X-Custom-Header。

预检请求的回应，服务器收到"预检"请求以后，检查了 Origin、Access-Control-Request-Method 和 Access-Control-Request-Headers 字段以后，确认允许跨源请求，就可以做出回应。

HTTP回应中，除了关键的是 Access-Control-Allow-Origin 字段，其他 CORS 相关字段如下：

Access-Control-Allow-Methods

必选，它的值是逗号分隔的一个字符串，表明服务器支持的所有跨域请求的方法。注意，返回的是所有支持的方法，而不单是浏览器请求的那个方法。这是为了避免多次"预检"请求。

Access-Control-Allow-Headers

可选，如果浏览器请求包括 Access-Control-Request-Headers 字段，则 Access-Control-Allow-Headers 字段是必需的。它也是一个逗号分隔的字符串，表明服务器支持的所有头信息字段，不限于浏览器在"预检"中请求的字段。

Access-Control-Allow-Credentials

可选，该字段与简单请求时的含义相同。

Access-Control-Max-Age

可选，用来指定本次预检请求的有效期，单位为秒。

CORS 跨域示例

/** 前端示例 */
var xhr = new XMLHttpRequest();

// 前端设置是否带cookie
xhr.withCredentials = true;

xhr.open('post', 'http://www.domain2.com:8080/login', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('user=admin');

xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        alert(xhr.responseText);
    }
};

// jquery ajax
$.ajax({
    ...
   xhrFields: {
       withCredentials: true    // 前端设置是否带cookie
   },
   crossDomain: true,   // 会让请求头中包含跨域的额外信息，但不会含cookie
    ...
});

/** 服务端示例 */
// nodejs代码
var http = require('http');
var server = http.createServer();
var qs = require('querystring');

server.on('request', function(req, res) {
    var postData = '';

    // 数据块接收中
    req.addListener('data', function(chunk) {
        postData += chunk;
    });

    // 数据接收完毕
    req.addListener('end', function() {
        postData = qs.parse(postData);

        // 跨域后台设置
        res.writeHead(200, {
            'Access-Control-Allow-Credentials': 'true',     // 后端允许发送 Cookie
            'Access-Control-Allow-Origin': 'http://www.domain1.com',    // 允许访问的域（协议+域名+端口）
            /* 
             * 此处设置的cookie还是domain2的而非domain1，因为后端也不能跨域写cookie(nginx反向代理可以实现)，
             * 但只要domain2中写入一次cookie认证，后面的跨域接口都能从domain2中获取cookie，从而实现所有的接口都能跨域访问
             */
            'Set-Cookie': 'l=a123456;Path=/;Domain=www.domain2.com;HttpOnly'  // HttpOnly的作用是让js无法读取cookie
        });

        res.write(JSON.stringify(postData));
        res.end();
    });
});

server.listen('8080');

3. 反向代理

浏览器发送请求给后台，后台再去请求不同域的其他地址，将结果返回给浏览器。因为后台没有“同源”的策略，所以没有“跨域”的限制。

js 跨域

一 同源策略

二 跨域解决方案