从本地 html 文件到服务器的 JSON 请求引发 CORS 错误：从源“null”访问 <URL> 处的 XMLHttpRequest 已被 CORS 策略阻止

Question

我有一个本地 HTML 文件，其中包含对服务器的 JSON HTTP 请求。 尽管该请求在 IE 中有效，但在 chrome 上失败并引发错误：

从源“null”访问“http://SERVERNAME/QuestionnaireExample/METHODNAME”处的 XMLHttpRequest 已被 CORS 策略阻止：请求的资源上不存在“Access-Control-Allow-Origin”标头。

引发错误的 XMLHTTP 代码是：

            $.support.cors = true;

            //upload the questionnaire
            $.ajax({
                url: 'http://SERVERNAME/QuestionnaireExample/METHODNAME',
                type: 'GET',
                success: function (result) {
                    // CODE for success
                },

                error: function (result) {
                    // CODE for error
                }
            });
        });

网络诊断显示：

一般

Request URL: http://SERVERNAME/QuestionnaireExample/METHODNAME
Request Method: GET
Status Code: 401 Unauthorized
Remote Address: [::1]:80
Referrer Policy: no-referrer-when-downgrade

请求标头：

Provisional headers are shown
Accept: */*
Origin: null
User-Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.103 Safari/537.36

正如我所提到的，在 IE 中，相同的代码可以在本地文件中运行

            $.support.cors = true;

            //upload the questionnaire
            $.ajax({
                url: 'http://SERVERNAME/QuestionnaireExample/METHODNAME',
                type: 'GET',
                success: function (result) {
                    // CODE for success
                },

                error: function (result) {
                    // CODE for error
                }
            });
        });

Answer 1

浏览器根本不允许从本地文件执行 cors 请求。它必须从网络服务器运行。如果您打开“C:emp.html”之类的文件并在那里运行脚本，则会发生此错误。但是，如果您从“http://localhost/temp.html”打开它，则可以允许 cors 请求，因为接收服务器允许 cors 请求，并且您在发送 ajax 请求之前发送 cors 请求。我不确定你的行 $.support.cors = true;足以为该特定请求启用 cors。可能是这一行在全局范围内启用了它，但您仍然需要将 cors 标头附加到 ajax 请求。