无名阁,只为技术而生。流水不争先,争的是滔滔不绝。

cors错误汇总及常见错误解决方法1

前端 dancy 6个月前 (11-24) 146次浏览 已收录 0个评论 扫描二维码

cors错误汇总及常见错误解决方法1

如果你在开发网站时曾经尝试通过框架或是浏览器的 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)只要有任一项不同,就算是不同来源。例如下面这几个例子:

点击展开
喜欢 (0)
[]
分享 (0)
关于作者:
发表我的评论
取消评论

评论审核已启用。您的评论可能需要一段时间后才能被显示。

表情 贴图 加粗 删除线 居中 斜体 签到