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

Jerry Wang

发布于 2021-12-14 14:29:19

8010

发布于 2021-12-14 14:29:19

文章被收录于专栏：Jerry的SAP技术分享Jerry的SAP技术分享

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

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

Chrome 扩展地址：

https://chrome.google.com/webstore/detail/moesif-origin-cors-change/digfbfaphojjndkpccljibejjbppifbc?hl=en-US

我写了一段简单的 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.