跨域请求产生错误的缘由及处理方法

时间 2020-11-18 标签前端 nginx 程序员面试 segmentfault 后端 api 跨域浏览器安全

若是你在开发网站时曾经尝试经过框架或是浏览器的 fetch、XHR 请求过外部 API 的话，那么必定遇到过跨域请求，还有那个触目惊心的 CORS 错误信息；今天我们来讨论跨域问题的缘由以及解决方法。前端

跨域请求

若是你没有没有遇过，能够试着在浏览器的 console 页输入下面的代码：nginx

const xhr = new XMLHttpRequest()
xhr.onreadystatechange = () => {
  if (xhr.readyState === 4) {
    console.log(xhr.status === 200 ? xhr.responseText : 'error')
  }
}
xhr.open('GET', 'https://google.com')
xhr.send()

这段代码经过调用浏览器的 XMLHttpRequest 对 Google 发出请求，而获得的结果如图所示：程序员

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

假设当前用户在：https://example.com ：
[✅] https://example.com/test -> 同域
[❌] https://m.example.com -> 不一样域
[❌] https://example.com:3000 -> 端口不一样
[❌] http://example.com -> 通信协议不一样

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

其实这是考虑到用户的信息安全。后端

假设小黑是一个恶意开发者，他编写的网站会尝试经过 XHR 打向百度、微博等目标网站；若是使用者原先就有目标网站的登陆状态，小黑便能窥探他的隐私，获得不应取得的数据。再想一想看，若是目标网站换成 Email、银行、电商，若是没有浏览器限制跨域请求的保护，恶意开发者便能随心所欲。api

注意：跨域请求虽然会被浏览器拦截下来，但拦截的是响应（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，总不能每次遇到 CORS 错误，就要求别人去修改头设置吧。

简单暴力的方法就是经过代理服务器帮咱们获取资源；因为跨域保护的限制是浏览器的规范，只要不经过浏览器发送请求，天然也就不会有限制。

常见的做法是经过 nginx 作简单的反向代理；例如在本身的开发环境，先后端分离的架构，先后端服务分别启动在 3000 和 5000 端口，则能够用这样的配置：

server{
  listen 3000;
  server_name localhost;
  location ^~ /api {
  proxy_pass http://localhost:5000;
  }
}

当前端须要发送 API 请求时，能够直接请求 localhost:3000/api/...，这个请求会被 nginx 拦截，并转发给后端所在的 localhost:5000，这样就能简单的绕过跨域保护了。

总结

跨域是前端常见的需求，CORS 的错误信息也是咱们很容易被卡住的地方；其实只要清楚 CORS 规范中的 HTTP 头设置，并在服务器端作对应的调整，就能够顺利的完成跨域请求。

本文首发微信公众号：前端先锋

欢迎扫描二维码关注公众号，天天都给你推送新鲜的前端技术文章

欢迎继续阅读本专栏其它高赞文章：

更多文章...