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

Posted

技术标签:

【中文标题】从本地 html 文件到服务器的 JSON 请求引发 CORS 错误:CORS 策略已阻止从源“null”访问 <URL> 处的 XMLHttpRequest【英文标题】:JSON request from LOCAL html file to server raises CORS error : Access to XMLHttpRequest at <URL> from origin 'null' has been blocked by CORS policy 【发布时间】:2019-11-01 02:12:59 【问题描述】:

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

CORS 策略已阻止从源“null”访问“http://SERVERNAME/QuestionnaireExample/METHODNAME”处的 XMLHttpRequest:请求的资源上不存在“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
                
            );
        );

【问题讨论】:

【参考方案1】:

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

【讨论】:

有没有办法从本地文件运行 CORS?甚至通过降低 Chrome 的安全性?在 IE 中,它可以从本地 HTML 文件中正常工作。 我不是浏览器专家,但很可能不是。我也不建议这样做。建议在将文件放在 Internet/Intranet 上的服务器上之前对其进行测试,然后设置运行文件的个人网络服务器。设置这样的服务器最多需要几分钟。

以上是关于从本地 html 文件到服务器的 JSON 请求引发 CORS 错误:CORS 策略已阻止从源“null”访问 <URL> 处的 XMLHttpRequest的主要内容,如果未能解决你的问题,请参考以下文章

将带有第一个请求的 html 页面返回到在端口 5000 本地运行的 Json Rpc Dispatcher 服务器

请求本地文件夹中json文件的数据

我将如何将 JSON 文件从 web 服务保存到本地 JSON 文件?

如何在 D3 中正确加载本地 JSON?

解决axios请求本地的json文件在打包后路径出错问题

vue使用axios请求本地json文件出现404