跨域
-
域名不同，协议不同，端口不同，同源策略，a.baidu.com 与 b.baidu.com 会跨域
同源： 同源策略是浏览器的一种安全策略，所谓同源是指，域名，协议，端口号完全相同 1.1 目的：保护用户信息安全 1.2 限制：cookie、localStorage 和 IndexDB 无法读取 无法操作跨域的 iframe 里的 dom 元素 ajax 请求不能发送
jsonp 解决跨域
浏览器的同源策略把跨域请求都禁止了，但是页面中的 /
cors 跨域
- 服务器实现了 CORS 接口，就可以跨源通信。
- 浏览器将 CORS 请求分成两类：简单请求（simple request）和非简单请求（not-so-simple request）。
- 请求方法是以下三种方法之一：（也就是说如果你的请求方法是什么 put、delete 等肯定是非简单请求） HEAD GET POST
- HTTP 的头信息不超出以下几种字段：（如果比这些请求头多，那么一定是非简单请求）
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain，
也就是说，如果你发送的 application/json 格式的数据，那么肯定是非简单请求，
vue 的 axios 默认的请求体信息格式是 json 的，ajax 默认是 urlencoded 的。 简单请求：一次请求 非简单请求：两次请求，在发送数据之前会先发一次请求用于做“预检”，只有“预检”通过后才再发送一次请求用于数据传输。
- 关于“预检” 请求方式：OPTIONS
- “预检”其实做检查，检查如果通过则允许传输数据，检查不通过则不再发送真正想要发送的消息
- 如何“预检” ⇒ 如果复杂请求是 PUT 等请求，则服务端需要设置允许某请求，否则“预检”不通过 Access-Control-Request-Method ⇒ 如果复杂请求设置了请求头，则服务端需要设置允许某请求头，否则“预检”不通过 ccess-Control-Request-Headers
支持跨域，简单请求 服务器设置响应头：Access-Control-Allow-Origin = ‘域名’ 或 ‘*’ response.addHeader(“Access-Control-Allow-Origin”, “”);
支持跨域，复杂请求 由于复杂请求时，首先会发送“预检”请求，如果“预检”成功，则发送真实数据。 “预检”请求时，允许请求方式则需服务器设置响应头：Access-Control-Request-Method
response.addHeader("Access-Control-Allow-Methods", "POST,GET,PUT,DELETE");
“预检”请求时，允许请求头则需服务器设置响应头：Access-Control-Request-Headers
response.addHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With,Content-Type,
Accept,jssesionId,appId,sign,nonceStr");
Access-Control-Allow-Credentials 该字段可选。它的值是一个布尔值，表示是否允许发送 Cookie。默认情况下，Cookie 不包括在 CORS 请求之中。 设为 true，即表示服务器明确许可，Cookie 可以包含在请求中，一起发给服务器。这个值也只能设为 true， 如果服务器不要浏览器发送 Cookie，删除该字段即可。
CORS 请求默认不发送 Cookie 和 HTTP 认证信息。如果要把 Cookie 发到服务器，一方面要服务器同意， 指定 Access-Control-Allow-Credentials 字段。
服务端设置
Access-Control-Allow-Credentials: true
必须在 AJAX 请求中打开 withCredentials 属性。 客户端设置 ajax 请求中 否则，即使服务器同意发送 Cookie，浏览器也不会发送。或者，服务器要求设置 Cookie，浏览器也不会处理。但是， 如果省略 withCredentials 设置，有的浏览器还是会一起发送 Cookie。 如果要发送 Cookie，Access-Control-Allow-Origin 就不能设为星号，必须指定明确的、与请求网页一致的域名
Access-Control-Max-Age 该字段可选，用来指定本次预检请求的有效期，单位为秒。
CORS 与 JSONP 的使用目的相同，但是比 JSONP 更强大。 JSONP 只支持 GET 请求，CORS 支持所有类型的 HTTP 请求。JSONP 的优势在于支持老式浏览器， 以及可以向不支持 CORS 的网站请求数据。