乐趣区

关于前端:跨域请求产生错误的原因及处理方法

jiezi

如果你在开发网站时已经尝试通过框架或是浏览器的 fetch、XHR 申请过内部 API 的话，那么肯定遇到过 跨域申请，还有那个惊心动魄的 CORS 错误信息；明天咱们来探讨跨域问题的起因以及解决办法。

跨域申请

如果你没有没有遇过，能够试着在浏览器的 console 页输出上面的代码：

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 -> 通信协定不同

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

其实这是思考到用户的信息安全。

假如小黑是一个歹意开发者，他编写的网站会尝试通过 XHR 打向百度、微博等指标网站；如果使用者原先就有指标网站的登录状态，小黑便能窥探他的隐衷，失去不该获得的数据。再想想看，如果指标网站换成 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，总不能每次遇到 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 头设置，并在服务器端做对应的调整，就能够顺利的实现跨域申请。

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

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

欢送持续浏览本专栏其它高赞文章：

  • 深刻了解 Shadow DOM v1
  • 一步步教你用 WebVR 实现虚拟现实游戏
  • 13 个帮你进步开发效率的古代 CSS 框架
  • 疾速上手 BootstrapVue
  • JavaScript 引擎是如何工作的？从调用栈到 Promise 你须要晓得的所有
  • WebSocket 实战：在 Node 和 React 之间进行实时通信
  • 对于 Git 的 20 个面试题
  • 深刻解析 Node.js 的 console.log
  • Node.js 到底是什么？
  • 30 分钟用 Node.js 构建一个 API 服务器
  • Javascript 的对象拷贝
  • 程序员 30 岁前月薪达不到 30K，该何去何从
  • 14 个最好的 JavaScript 数据可视化库
  • 8 个给前端的顶级 VS Code 扩大插件
  • Node.js 多线程齐全指南
  • 把 HTML 转成 PDF 的 4 个计划及实现
  • 更多文章 …
退出移动版