浅析CORS跨域请求

Love The Way You Lie 2022-07-13 03:16 211阅读 0赞

Cross-Origin Resource Sharing（简称CORS），是W3C制定的网络跨域资源请求的一个“正式”技术。网上相关介绍有很多，但是基本上都停留于理论层面。当你很想知道具体怎么实现一个CORS的时候很难一下子找到靠谱的参考资料。那么这里简单介绍一下前后端CORS的实现机制。

对于前端（JavaScript）而言，做一个CORS和普通ajax请求并没有什么区别（前提是浏览器平台支持CORS）：

以上就是一段普通的get请求的JavaScript代码，只要运行这段代码的浏览器支持跨域请求，这个get请求就可以进行跨域通信。

对于后端，配置方法各有差异，具体可以参考以下文章及其引用文章的介绍：

[http://blog.csdn.net/andong154564667/article/details/51508042][http_blog.csdn.net_andong154564667_article_details_51508042]

当完成所有正确的配置之后，对应的前后端就可以进行跨域请求。当一个跨域请求发出时，浏览器会通过引入额外的Origin头信息来指定请求的源，请求将会是一个option类型的请求：

此处我们以恒生电子提供的股票行情公共查询接口OpenApi为例，用本地局域网去请求股市行情数据，Origin:http://localhost:63342

![Center][]

服务端的工作是检查头信息以确定是否接受该请求。如果一个请求被接受，它必须发回一个包含Access-Control-Allow-Origin，其值与发送的源相同的响应头：

Access-Control-Allow-Origin：http://localhost:63342

或者如果你的后端要提供公开服务，则可以配置服务器返回通配符“\*”：

Access-Control-Allow-Origin：\*

![Center 1][]

如果请求头中不包含Origin（也许请求来自不支持CORS的浏览器），服务器不会发回任何CORS头信息。

当浏览器接收到服务器的HTTP响应时，它会检查Access-Control-Allow-Origin的值。其值必须同请求头信息中的Origin值完全匹配（或者“\*”）。如果头信息缺失或者值不匹配（即服务器限定对特定源的跨域支持），浏览器会禁止该请求。只有当值存在且同Origin匹配，浏览器才会继续处理该请求。

通过跨域验证后，浏览器会再发送一个请求，此时的请求就是真正的请求，而服务器也会相应的返回数据应答。这个时候前后端就表现的像是同源请求一样。

![Center 2][]

因此，一次成功的跨域资源请求将包含两次请求和两次返回，如图：

![Center 3][]

相关文章：http://write.blog.csdn.net/postedit/53809709

[熬夜不易，请作者喝杯酒！][Link 1]

[http_blog.csdn.net_andong154564667_article_details_51508042]: http://blog.csdn.net/andong154564667/article/details/51508042
[Center]: /images/20220713/f020b5af84fa466eb94b1949270b8a08.png
[Center 1]: /images/20220713/f11948494203497590d60b78d004da65.png
[Center 2]: /images/20220713/bf2832b2151144e99e37b6ddb99a7bd8.png
[Center 3]: /images/20220713/773b57de1023448fb1ec5138459080e2.png
[Link 1]: https://raw.githubusercontent.com/bigbird231/iTest/master/imgs/drink.png