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

83次阅读

共计 2317 个字符,预计需要花费 6 分钟才能阅读完成。

如果你在开发网站时已经尝试通过框架或是浏览器的 fetchXHR 申请过内部 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 中没有跨域限度的标签如 imgscript 等,再通过指定回调函数,将响应的内容介接回 JavaScript 中;或是通过 iframe,绕过跨域爱护获取指标资源等。上面仅阐明两种常见也绝对正规的解决形式。

CORS

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

CORS 标准中,分明定义了跨域存取控制的运作形式。

首先服务器端须要在响应头中加上如 Access-Control-Allow-OriginAccess-Control-Request-MethodAccess-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 个计划及实现

  • 更多文章 …

正文完
 0