跨域请求

跨域请求就是从另一个域名，而不是资源所在的域名发起的 HTTP 请求。举例来说，在域名 A (http://domaina.example/) 的 HTML 页面上使用 img 元素 (\) 来请求域名 B (http://domainb.foo/) 上的图片资源。这在当今的 Web 页面上是很常见的 —— 加载跨站点资源，包括 CSS 样式表，图片，脚本和其他资源。CORS 允许 Web 开发人员控制其站点对跨站点请求的反应。

跨域资源共享

跨域资源共享(CORS, Cross-Origin Resource Sharing)是一种机制，该机制使用附加的 HTTP 头（HTTP 消息头用于描述资源或服务器或客户端的行为）来告诉浏览器，准许运行在一个源上的Web应用访问位于另一不同源选定的资源。 当一个Web应用发起一个与自身所在源（域，协议和端口）不同的HTTP请求时，它发起的即跨源HTTP请求。

为什么有跨域请求

它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。

浏览器的同源策略

同源策略是一个重要的安全策略，它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档，减少可能被攻击的媒介。
同源的定义：如果两个 URL 的 protocol、port (如果有指定的话)和 host 都相同的话，则这两个 URL 是同源。

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

简单请求

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

• 1.使用下列方法之一：
  head
  get
  post
• 2.请求的Heder是
  Accept
  Accept-Language
  Content-Language
  Content-Type: 只限于三个值：application/x-www-form-urlencoded、multipart/form-data、text/plain

不同时满足以上两个条件，都属于非简单请求览器对这两种的处理是不一样的。
对于简单请求，浏览器直接发出CORS请求，对于非简单请求，在正式通信之前，会增加一次HTTP查询请求，成为“预检”请求。

如何处理跨域问题

后端

可以在后台配置中允许跨域。如果使用nginx，可以在location p(nginx header configure)那里增加header（http header），允许跨域。
例如：

 location /static {
            add_header 'Access-Control-Allow-Origin' '*';
            root  /usr/www/financial_report/; # 静态资源目录
            autoindex on; # 是否支持打开目录
 }

前端

目前我只对vue有部分了解，所以，这里列举一个vue的例子。可以使用deveServer.proxy，简单配置如下：

module.exports = {
    devServer: {
      proxy: 'http://127.0.0.1:81'
    }
  }

与jsonp 比较

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

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

参考：

• MDN 跨资源共享
• MDN 浏览器的同源策略
• 阮一峰 跨域资源共享 CORS 详解