跨域问题与CORS跨域资源共享

---

什么是跨域？为什么有问题？

什么是跨域
跨域是指浏览器从一个域名的网页去请求另一个域名的资源时， 域名、端口、协议 三者中有一个不同。

为什么会出问题
出于安全考虑（防止坏人轻易利用浏览器DOM获取隐私内容），浏览器有一策略，名曰: 同源策略
同源策略详解: https://developer.mozilla.org/zh-CN/docs/Web/Security/Same-origin_policy

解决方案

CORS跨域资源共享

CORS跨域资源共享是什么
CORS是一个 W3C标准，全称是”跨域资源共享”（Cross-origin resource sharing）。它是由一系列HTTP响应头组成的，这些响应头决定浏览器是否阻止前端JS代码跨域获取资源。

简单实现
在服务器端加上回应字段: Access-Control-Allow-Origin

缺陷
在浏览器中具有兼容性，只有支持XMLHttpRequest Level2的浏览器，才能正常访问开启了CORS的服务端接口（如IE10+、Chrome4+、FireFox3.5+）。

CORS的三个响应头
Access-Control-Allow-Origin: | *
Access-Control-Allow-Methods:GET, POST, HEAD（默认这三个方法）
Access-Control-Allow-Headers:Accept, Accept-Language, Content-Language, DPR, Downlink, Save-Data, Viewport-Width, Width, Content-Type(text/plain、multipart/form-data、application/x-www-form-urlencoded三者之一)（仅支持这9个请求头）

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）

预检请求

• 非简单请求
• 特点：会发生两次请求。在浏览器和服务器正式通信前,浏览器会先发送OPTION请求进行预检,用来确定服务器是否允许此次请求

JSONP

利用HTML标签中script、img这样的获取资源的标签没有跨域限制这一特点。
JSONP利用script标签的src属性来实现跨域。

空iframe加form

代理（Nginx）