CORS:跨域资源请求的标准方案

CORS:跨域资源请求的标准方案

之前有篇文章谈到我们经常会遇到跨域资源请求失败的情况，今天就专门说一下对应的解决办法。

首先，带大家看一下解决跨域问题一共都有哪些方案。

1、使用代理。原理：跨域知识浏览器跟服务器之间，搞个跟自己前端不跨域的服务自做数据中转，就可以避免直接跟目标服务器指教资源请求时的跨域问题了。

2、使用jsonp。原理利用script标签下载执行并调用对应函数的机制来实现，只能解决部分场景。

3、利用iframe，使用window.name进行传参。不是很了解。

4、CORS

定义和用法：是现代浏览器支持跨域资源请求的一种最常用的方式。

使用方法：一般需要后端人员在处理请求数据的时候，添加允许跨域的相关操作

针对简单请求和复杂请求，它又分两种情况。

对于简单请求，浏览器会在请求头中添加一个origin字段，自动把发送请求的源信息带过去。

对于复杂请求，浏览器会在发送正式请求之前，发送一个options请求，做预校验。

而服务端会在响应报文中添加如下字段：

• Access-Control-Allow-Origin（必须）：该字段用来告知浏览器服务端接受的能够发送跨域AJAX请求的域，它的值要么是该次AJAX请求报头中由浏览器自动添加的Origin值，要么还可以是一个*号，表示可以接受任意的域名请求；
• Access-Control-Allow-Credentials（可选）：该字段用来告知浏览器是否允许客户端向服务端发送Cookie。默认情况下，CORS规范会阻止跨域AJAX向服务端发送Cookie，因此该字段默认值为false，当你显式的将该字段值设置为true时，则表示允许此次跨域AJAX向服务端发送Cookie。
• Access-Control-Expose-Headers（可选）：该字段用来向客户端暴露可获取的响应头；

CORS规范规定，客户端XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本的字段：
* Cache-Control：表示响应遵循的缓存机制；
* Content-Language：表示响应体的语言；
* Content-Type：表示响应体的MIME类型；
* Expires：表示文档的过期时间，到期不再缓存；
* Last-Modified：表示文档的最后改动时间；
* Pragma：用来包含特定的指令；
但是当客户端想要获取额外的响应头字段时，就需要服务端通过在该字段后定义相应的客户端可获取的响应头字段名称。

当然，这里面又分很多细致的场景，尤其是针对cookie的一些处理。

不过总而言之，要是你作为一个前端，遇到这种跨域资源请求失败的问题，假如后端说他改不了，那他一定是一个微服务的入门级菜鸡。