介绍一个能避免 CORS 错误的 Chrome 扩展 - Moesif Origin & CORS Changer

在前端开发人员做开发时,当进入到和后台 API 联调阶段时,不可避免会遇到 CORS 错误。

介绍一个能避免 CORS 错误的 Chrome 扩展 - Moesif Origin & CORS Changer_第1张图片

本文介绍一个 Chrome 扩展,可以用来在开发阶段避免 CORS 问题。
注意,这个扩展不能用于生产用途,以免引起 security issue.

Chrome 扩展地址:

https://chrome.google.com/web...

介绍一个能避免 CORS 错误的 Chrome 扩展 - Moesif Origin & CORS Changer_第2张图片

我写了一段简单的 AJAX JavaScript 调用,来产生 CORS 错误:



本地用 Chrome 打开该网页,会遇到预料中的 CORS 错误:

Access to XMLHttpRequest at ' http://localhost:3002/' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
介绍一个能避免 CORS 错误的 Chrome 扩展 - Moesif Origin & CORS Changer_第3张图片

介绍一个能避免 CORS 错误的 Chrome 扩展 - Moesif Origin & CORS Changer_第4张图片
介绍一个能避免 CORS 错误的 Chrome 扩展 - Moesif Origin & CORS Changer_第5张图片

安装完扩展之后,在设置页面里,将 Access-Control-Allow-Origin 设置为 * 即可:

介绍一个能避免 CORS 错误的 Chrome 扩展 - Moesif Origin & CORS Changer_第6张图片

浏览器工具栏上,看到 on 的图标,刷新网页,AJAX 调用就能正常执行了:

介绍一个能避免 CORS 错误的 Chrome 扩展 - Moesif Origin & CORS Changer_第7张图片

更多Jerry的原创文章,尽在:"汪子熙":

你可能感兴趣的:(介绍一个能避免 CORS 错误的 Chrome 扩展 - Moesif Origin & CORS Changer)