一次失败的 CORS 请求所引发的

最近，在负责公司一个老版本 API 的迁移工作，其中就涉及到 CORS 请求。

然而，就在我利用新的 API 发起一个 CORS 请求时，却报出了下面这个错误：

原来是由于响应头中不包含 ‘Access-control-allow-origin’ 这个字段，所以也就拒绝了我的跨域资源共享请求。。这 API 设计得。。

不过，身为一名前端小白，该踩的坑自然还是要踩的，错误信息下面不是都说了吗，如果我想要一个 opaque 服务，那么可以把请求模式设置为 ‘no-cors’，bingo!!!

我们公司前端发网络请求都是用的技术大大 @dexteryy 写的一个库 — hifetch ，我自然也就看了一下它的文档，里面果然有关于 ‘no-cors’ 的东西，只需要设置一行属性：’disableCORS: true’ 即可。

然而，设置了之后，得到的结果仍然是和之前一模一样的错误。。。

这个。。。难道是 hifetch 这个库的问题？？？

带着疑惑，我看了看 hifetch 的源码，果然，发现了这么一段代码：

if (disableCORS) {
    fetchOpt.mode = 'cors';
}

原来大佬也会有手抖的时候啊。。

跟大佬反应并提交了 PR 之后，再一试，这次请求算是成功了，不过回来的这是什么鬼！

返回信息中除了一个大大的 type: "opaque" 几乎什么信息都没有。

原来如果设置成 {mode: ' no-cors '} (一般用于请求图片等静态资源)，虽然不会报错，但是结果会返回被标记了为 opaque 的数据，表明你没有权限访问。也就是说你在回调里访问不到任何response的属性。

恕我直言，这绝对是世界上最鸡肋的东西。

既然 no-cors 不好使，还是认怂 Google 吧：

‘Response to preflight request doesn’t pass access control check…’

然后，找到了下面几种解决办法：
* Turn off CORS. For example: how to turn off cors in chrome
* Use a plugin for your browser — plugin
* Use a proxy such as nginx. example of how to set up

当然是从最简单最容易的做起！直接上谷歌拓展工具！

它的界面长这样：

设置好了，一试，果然，包含完整信息的响应回来了！

然而，当技术大大知道我用了这个方法后，狠狠鄙视了我。。

原来，Chrome 的这个插件的作用是：

Allows to you request any site with ajax from any source. Adds to response Allow-Control-Allow-Origin: * header

那么也就是说，如果用户的浏览器中没有安装（我猜99.99%都没有安装）这个插件，那么用户就不能得到想要的数据。

所以这个插件，等于没用。。

最终，我还是选择了屈服，把发送跨域请求的这个操作放到了服务端，客户端通过 CORS 请求服务端的 API ，服务端再去请求相应的资源并返回。

哦对了，一定要搞清楚：

CORS 是相对于浏览器而言的，服务端没有跨域的概念！

这就是一只前端小菜鸡关于 CORS 的一次踩坑故事。

---

注:

• 本站所有内容均属个人学习记录所用，一些内容来源网络疏于标注，若您发现有任何侵犯您权益的行为，请立即联系我删除，为您带来不便深表歉意
• 本人属前端小白一枚，若您在阅读中有任何技术问题或者发现任何错误，请及时联系我予以斧正，还望您不吝赐教
• 邮箱: [email protected]

---