面试官：你了解跨域吗

什么是跨域

跨域（Cross-Origin）指的是在浏览器环境下，通过 AJAX、WebSocket 或者其他 Web API 发起网络请求时，受到了浏览器的安全策略限制，请求的目标资源与当前页面的域名、协议或端口不一致。

浏览器的同源策略（Same-Origin Policy）是一种安全机制，它限制了来自不同源的 JavaScript 代码对当前页面的访问。同源是指两个页面具有相同的协议（如http、https）、域名和端口号。

首先一个url是由：协议、域名、端口三部分组成。（一般端口默认80）

如：blog.xxx.cn:80

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

为了克服跨域限制，常见的解决方案包括：

JSONP ：通过动态创建<script>标签，将数据包装在回调函数中返回，利用<script>标签的跨域特性实现跨域请求。
CORS（跨域资源共享） ：在服务器端设置响应头，允许特定的域名访问资源。通过设置Access-Control-Allow-Origin等相关头部信息控制跨域访问的权限。
代理服务器：在服务器端设置一个代理，将跨域请求转发到目标服务器，再将响应返回给客户端，绕过浏览器的同源策略限制。
WebSocket：WebSocket 不受同源策略的限制，可以通过 WebSocket 进行跨域通信。

如何实现跨域

CORS请求

浏览器将cors请求分为两类：简单请求 和非简单请求

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

请求方法是以下三种方法之一：
- HEAD
- GET
- POST
HTTP的头信息不超出以下几种字段：
- Accept
- Accept-Language
- Content-Language
- Last-Event-ID
- Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

基本流程

简单请求，浏览器都是直接发出cors请求，其实就是在头信息中，加一个Origin字段

js 复制代码

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字段就是用来说明本次请求来自哪个源，服务器根据这个值，决定是否同意本次请求

如果Origin指定的源，不在许可范围内，服务器会返回一个正常的http回应，这个回应就不包含Access-Control-Allow-Origin，那么就说明本次请求出错了，这个错误无法通过状态码识别，因为http回应的状态码可能是200。

如果Origin指定域名在许可范围内，服务器返回的响应，就会多出几个头信息字段

js 复制代码

Access-Control-Allow-Origin: http://api.bob.com
Access-Control-Allow-Credentials: true
Access-Control-Expose-Headers: FooBar
Content-Type: text/html; charset=utf-8

上面的请求头信息中，有三个是和cors请求有关系的，都以Access-Control-开头

Access-Control-Allow-Origin

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

这个字段的值类型是bool类型的，表示是否允许发送cookie，默认情况下，cookie不包含在cors请求中，设为true
Access-Control-Expose-Header

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

withCredentials 属性

上面说到CORS请求默认不发送cookie和http认证信息。如果要把cookie发到服务器，一方面，要服务器同意，指定Access-Control-Allow-Credentials字段

js 复制代码

Access-Control-Allow-Credentials: true

还要浏览器同意，开发者必须在ajax请求中打开withCredentials属性:

js 复制代码

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;

需要注意的是，如果要发送Cookie，Access-Control-Allow-Origin就不能设为星号，必须指定明确的、与请求网页一致的域名。同时，Cookie依然遵循同源政策，只有用服务器域名设置的Cookie才会上传，其他域名的Cookie并不会上传，且（跨源）原网页代码中的document.cookie也无法读取服务器域名下的Cookie。

预检请求

非简单请求是对服务器有特殊请求的请求，比如请求方法为PUT或DELETE，或者Content-Type字段类型是application/json

非简单请求的cors请求，会在正式通信前，增加一次HTTP查询请求，称为"预检请求"

这个预检请求就是浏览器向服务器询问，当前域名是否在服务器的白名单中，以及可以使用哪些请求方法和请求头字段，只有得到肯定回复，浏览器才会发出正式的XMLHttpRequest请求，否则就报错。

浏览器发送请求的代码

js 复制代码

var url = 'http://api.alice.com/cors';
var xhr = new XMLHttpRequest();
xhr.open('PUT', url, true);
xhr.setRequestHeader('X-Custom-Header', 'value');
xhr.send();

上面请求的方法是PUT，并且还发送了一个自定义头部字段X-Custom-Header

浏览器发现这是一个非简单请求，就发出一个"预检请求"，这个请求的头部信息如下

js 复制代码

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...

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

还有两个特殊字段：

Access-Control-Request-Method

这个字段是必须的，用来列出浏览器CORS请求会用的http方法
Access-Control-Request-Headers

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

预检请求的回应

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

js 复制代码

HTTP/1.1 200 OK
Date: Mon, 01 Dec 2008 01:15:39 GMT
Server: Apache/2.0.61 (Unix)
Access-Control-Allow-Origin: http://api.bob.com
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: X-Custom-Header
Content-Type: text/html; charset=utf-8
Content-Encoding: gzip
Content-Length: 0
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Content-Type: text/plain

浏览器的正常请求和回应

一旦服务器通过了"预检"请求，以后每次浏览器正常的CORS请求，就都跟简单请求一样，会有一个Origin头信息字段。服务器的回应，也都会有一个Access-Control-Allow-Origin头信息字段。

下面是"预检"请求之后，浏览器的正常CORS请求。

js 复制代码

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

上面头信息的Origin字段是浏览器自动添加的。

下面是服务器正常的回应

js 复制代码

Access-Control-Allow-Origin: http://api.bob.com
Content-Type: text/html; charset=utf-8

上面头信息中，Access-Control-Allow-Origin字段是每次回应都必定包含的。

与JSONP的比较

CORS与JSONP的使用目的相同，但是比JSONP更强大。

JSONP只支持GET请求，CORS支持所有类型的HTTP请求。JSONP的优势在于支持老式浏览器，以及可以向不支持CORS的网站请求数据。

nginx反向代理解决跨域（前端常用）

前端通过nginx代理将前端的请求转发到真正的后端域名上，就避免跨域了 nginx配置

js 复制代码

server{
    # 监听9099端口
    listen 9099;
    # 域名是localhost
    server_name localhost;
    #凡是localhost:9099/api这个样子的，都转发到真正的服务端地址http://localhost:9871 
    location ^~ /api {
        proxy_pass http://localhost:9871;
    }    
}

JSONP

在HTML标签里，一些标签比如script、img这样的获取资源的标签是没有跨域限制的，所以可以利用他们发去跨域请求，这就叫jsonp

前端

js 复制代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <script type='text/javascript'>
      // 后端返回直接执行的方法，相当于执行这个方法，由于后端把返回的数据放在方法的参数里，所以这里能拿到res。
      window.jsonpCb = function (res) {
        console.log(res)
      }
    </script>
    <script src='http://localhost:9871/api/jsonp?msg=helloJsonp&cb=jsonpCb' type='text/javascript'></script>
  </body>
</html>

其实就是在发送请求的链接带上一个cb的参数，这个cb就是script里的一个函数名称，然后后端将这个函数名称取出来，将要返回的数据放入这个函数的参数里，后端返回这个函数给前端，前端直接执行。

需要注意的是，跨域限制是由浏览器实施的安全策略，而不是服务器的限制。服务器之间的跨域请求不受同源策略的影响。