浅谈Cors 跨域

CORS需要浏览器和服务器同时支持，通俗来说CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉.Cors跨域分为简单请求与非简单请求两种。（示例代码使用fetch发送请求，koa2建立服务）

1.简单请求

满足以下条件的为简单请求

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

• 头
• 得到
• POST

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

• 接受
• 接受语言
• 内容语言
• 最后，事件ID
• 内容类型：只限于三个值application/x-www-form-urlencoded，multipart/form-data，text/plain

解决方案：服务器端设置返回头访问控制允许来源

前端请求函数：

服务器

正常情况下由于浏览器同源策略是不允许我们进行跨域通信的出现如下错误

解决方案，设置放回头Access-Control-Allow-Origin，当为*表示允许全部来源，当然你可以指定一个来源例如

本例中localhost：63342姑且可以这样理解加了一成验证来源，增强了安全性，跨域从而被浏览器允许。

效果图如下，我们成功从服务器请求到数据

2.非简单请求

在发送正式请求之前发送'预检'请求使用OPTIONS方法，服务器收到“预检”请求以后，检查了Origin，Access-Control-Request-Method状语从句：Access-Control-Request-Headers字段以后，确认允许跨源请求，就可以做出回应。

我们试着使用put方法发送一个请求

此时浏览器

解决方案

根据预检检查的信息（可以理解为浏览器与服务器需要交流的信息），代码作如下更改

之后我们成功完成跨域请求

希望这能帮助你初步认识CORS跨域嘿嘿

参考文献：http：//www.ruanyifeng.com/blog/2016/04/cors.html