关于chrome:介绍一个能避免-CORS-错误的-Chrome-扩展-Moesif-Origin-CORS-Changer

54次阅读

共计 948 个字符，预计需要花费 3 分钟才能阅读完成。

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

本文介绍一个 Chrome 扩大，能够用来在开发阶段防止 CORS 问题。
留神，这个扩大不能用于生产用处，免得引起 security issue.

Chrome 扩大地址：

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

我写了一段简略的 AJAX JavaScript 调用，来产生 CORS 谬误：

<html>
<script>
function createXHR () {
    var XHR = [function () {return new XMLHttpRequest () },
        function () { return new ActiveXObject ("Msxml2.XMLHTTP") },
        function () { return new ActiveXObject ("Msxml3.XMLHTTP") },
        function () { return new ActiveXObject ("Microsoft.XMLHTTP") }
    ];
    var xhr = null;
    for (var i = 0; i < XHR.length; i ++) {
        try {xhr = XHR[i]();} catch(e) {continue}
        break;  
    }
    return xhr;  
}

var xhr = createXHR(); 
xhr.open("GET", "http://localhost:3002/", false); 
xhr.send(null);  
console.log(xhr.responseText); 

</script>
</html>

本地用 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.

装置完扩大之后，在设置页面里，将 Access-Control-Allow-Origin 设置为 * 即可：

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

更多 Jerry 的原创文章，尽在：” 汪子熙 ”:

正文完