跨域错误的原因及处理方法

在开发网站时通过框架或是浏览器的 fetch、XHR 请求过外部 API，那么一定遇到过跨域请求，还有错误信息；今天来讨论跨域问题的原因及解决方法。

跨域请求

跨域是开发过程中必定遇到过的问题，当通过 js对不同的来源发送请求时，这个请求的响应就会被浏览器拦截，不交给 js处理。这里的“不同来源”指的是目标资源与当前网页的域（domain）、通讯协议（protocol）或网络端口（port）只要有任一项不同，就算是不同来源。例如下面这几个例子：

假设当前用户在：https://a.com ：
[✔] https://a.com/test -> 同域
[✖] https://m.a.com -> 不同域
[✖] https://a.com:8800-> 端口不同
[✖] http://a.com -> 通讯协议不同

理解什么是跨域了，那为什么浏览器要把跨域请求资源拦截掉呢？

这主要是考虑到用户的信息安全。

假如A是一个恶意开发者，他编写的网站会尝试通过 XHR 打向百度、csdn等目标网站；如果使用者原先就有目标网站的登录状态，A便能窥探他的隐私，得到不该取得的数据。再想想看，如果目标网站换成 Email、银行、电商，如果没有浏览器限制跨域请求的保护，恶意开发者便能为所欲为。

注意：跨域请求虽然会被浏览器拦截下来，但拦截的是响应（Response）而不是请求（Request）。

解决方案

关于跨域请求的解决方案有很多，例如 JSONP，也就是通过 HTML 中没有跨域限制的标签如 img、script 等，再通过指定回调函数，将响应的内容介接回 JavaScript 中；或是通过iframe，绕过跨域保护获取目标资源等。下面说明两种常见也相对正规的解决方式。

CORS

最标准、正确的解决方法是通过 W3C 规范的“ 跨域资源共享（Cross-Origin Resource Sharing ，CORS）”，通过服务器在 HTTP 头中的设置，可以使浏览器能够获取不同来源的资源。

CORS 规范中，清楚定义了跨域存取控制的运作方式。

首先服务器端需要在响应头中加上如Access-Control-Allow-Origin、Access-Control-Request-Method、Access-Control-Request-Headers 等设定，来限制服务器所能接受的来源、请求的方法、可携带的头等等。

当浏览器发送资源请求时，如果是简单请求便会直接送出请求；若不符合前述条件，则会通过预检（Preflighted）请求，确认是否可以通过服务器的限制，然后才会发送正式的请求。

CORS 除了上述內容外，也有关于 Cookies 的传送方式，如何允许跨域写入 Cookies 等内容。

代理服务器

由于 CORS 的头设置是在服务器端，如果服务器是自己的，那么可以轻易的调整服务器设置，让前端能取得必要的资源；但如果你请求的是外部 API，就不能要求别人去修改头设置吧。

简单的方法就是通过代理服务器帮我们获取资源；由于跨域保护的限制是浏览器的规范，只要不通过浏览器发送请求，自然也就不会有限制。

关注前端公众号(前端中心),获取更多前端技术,共同成长