利用跨域资源共享CORS解决跨域问题利用跨域资源共享CORS解决跨域

【利用跨域资源共享CORS解决跨域问题】最近在琢磨前后端分离，难免会碰到跨域问题。
首先弄清楚，跨域指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器施加的安全限制。
何为同源？ URL由协议、域名、端口和路径组成，如果两个URL的协议、域名和端口相同，则表示他们同源。
同源策略（是浏览器实施的）浏览器的同源策略，限制了来自不同源的"document"或脚本对当前"document"读取或设置某些属性 —— 从一个域上加载的脚本不允许访问另外一个域的文档属性。
在浏览器中，、
文章图片
origin.png 预检请求浏览器将CORS请求分为两类：简单请求和非简单请求。
非简单请求是那种对服务器有特殊要求的请求，比如请求方法是PUT或DELETE，或者Content-Type字段的类型是application/json。
例如，下面的前端代码向后台发送了一个非简单请求，因为它制定了'Content-type': 'application/json'

文章图片
code.png 非简单请求的CORS请求，会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求。
预检请求的请求方法是OPTIONS,请求的头信息包括两个特殊字段:

Access-Control-Request-Method
该字段是必须的，用来列出浏览器的CORS请求会用到哪些HTTP方法。
Access-Control-Request-Headers
该字段是一个逗号分隔的字符串，指定浏览器CORS请求会额外发送的头信息字段。

服务器回应的其他CORS相关字段：

Access-Control-Allow-Methods
该字段必需，它的值是逗号分隔的一个字符串，表明服务器支持的所有跨域请求的方法。注意，返回的是所有支持的方法，而不单是浏览器请求的那个方法。这是为了避免多次"预检"请求。
Access-Control-Allow-Headers
如果浏览器请求包括Access-Control-Request-Headers字段，则Access-Control-Allow-Headers字段是必需的。它也是一个逗号分隔的字符串，表明服务器支持的所有头信息字段，不限于浏览器在"预检"中请求的字段。
Access-Control-Max-Age
该字段可选，用来指定本次预检请求的有效期，单位为秒。在此期间，不用发出另一条预检请求。

文章图片
AccessControl.png