跨域

跨域

同源策略是浏览器需要遵循的标准，而如果是服务器向服务器请求就无需遵循同源策略。

Why

出于浏览器的同源策略限制。同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓****同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）****

What

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

非同源限制

【1】无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB(已淘汰)

【2】无法接触非同源网页的 DOM

【3】无法向非同源地址发送 AJAX 请求

跨域解决方法

document.domain

设置document.domain解决无法读取非同源网页的 Cookie问题

因为浏览器是通过document.domain属性来检查两个页面是否同源，因此只要通过设置相同的document.domain，两个页面就可以共享Cookie（此方案仅限主域相同，子域不同的跨域应用场景。）

跨文档通信

API：window.postMessage()

调用postMessage方法实现父窗口http://test1.com向子窗口http://test2.com发消息（子窗口同样可以通过该方法发送消息给父窗口）

它可用于解决以下方面的问题：

页面和其打开的新窗口的数据传递

多窗口之间消息传递

页面与嵌套的iframe消息传递

JSONP

JSONP 是服务器与客户端跨源通信的常用方法。最大特点就是简单适用，兼容性好（兼容低版本IE），缺点是只支持get请求，不支持post请求。

核心思想：网页通过添加一个******元素***，向服务器请求 JSON 数据，服务器收到请求后，将数据放在一个指定名字的回调函数的参数位置传回来。***

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

CORS

CORS 是跨域资源分享（Cross-Origin Resource Sharing）的缩写。它是 W3C 标准，属于跨源 AJAX 请求的根本解决方法。

浏览器将CORS请求分成两类：

• 简单请求（simple request）

  （1) 请求方法是以下三种方法之一：

  HEAD

  GET

  POST

  （2）HTTP的头信息不超出以下几种字段：

  Accept

  Accept-Language

  Content-Language

  Last-Event-ID

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

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

只需服务器端设置Access-Control-Allow-Origin

• 非简单请求（not-so-simple request）。

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

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

浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复，浏览器才会发出正式的XMLHttpRequest请求，否则就报错

Access-Control-Allow-Origin

该字段是必须的。它的值要么是请求时Origin字段的值，要么是一个*，表示接受任意域名的请求。

Access-Control-Request-Method

该字段是必须的，用来列出浏览器的CORS请求会用到哪些HTTP方法

Access-Control-Allow-Credentials

该字段可选。它的值是一个布尔值，表示是否允许发送Cookie。默认情况下，Cookie不包括在CORS请求之中。

设为true，即表示服务器明确许可，Cookie可以包含在请求中，一起发给服务器。这个值也只能设为true，如果服务器不要浏览器发送Cookie，删除该字段即可。

Access-Control-Allow-Headers

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

Access-Control-Max-Age

该字段可选，用来指定本次预检请求的有效期，单位为秒。上面结果中，有效期是20天（1728000秒），即允许缓存该条回应1728000秒（即20天），在此期间，不用发出另一条预检请求。

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字段的值。

代理

代理服务器只是起一个中转作用，配置代理服务器的方法有很多种，比如利用apache、nginx、tomcat等等，今天给大家介绍的是用nodejs配置代理服务器，用nodejs配置代理服务器，我们需要借助两个npm包，一个是web开发框架***express***，一个是express中间件***http-proxy-middleware*** 。

调用这个中间件的时候需要设置几个常用参数：

1、target，指的是目标网站，或者被代理的网站。

2、changeOrigin是否更改host。默认为false，不重写。

3、pathRewrite路径重写，这个特性看需求。

***也就是说如果不设置pathRewrite的话，页面中的请求地址会被原封不动的追加到目标服务器地址的后面。