CORS 请求在本地打开的 html 文件中被阻止

问题描述 投票：0回答：6

我已经开始编写一个使用 JavaScript 显示数据的 HTML 文件。因为它应该尽可能简单地完成，所以我不想运行nodejs或任何其他本地http服务器。我刚刚在浏览器中打开了 HTML 文件（网址为 file:///home/visu/index.htm）。

一切都很好，直到在index.htm中完成对在线API的jquery ajax请求。浏览器阻止请求并显示消息：

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://x.x.x.x. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing)."

如何在不启动本地 http 服务器的情况下解决该问题？

一个可能的解决方案是使用一些“无安全标志”启动浏览器或使用插件禁用 CORS，但我必须一直手动执行此操作，所以我不喜欢它。

javascript jquery ajax cors
6个回答
6
投票

当您的浏览器向与托管当前页面的服务器不同的服务器执行 AJAX 请求时，它首先发送一条 OPTIONS

 HTTP 消息。在该消息中，它发送以下标头：

origin: http://my-web-server.com
后端服务器将响应：

access-control-allow-origin: http://my-web-server.com
但是，当您没有网络服务器时，您的浏览器就没有地址可以放入该

origin

 标头中。这就是为什么您的浏览器不允许您从本地文件执行任何 AJAX 请求（也许您可以像评论中提到的那样禁用浏览器的 CORS 安全性，但这可能会让您面临恶意网站的风险）。

另一种选择

如果您将后端更改为返回以下标头，则可以告诉浏览器允许从本地主机连接到后端：

access-control-allow-origin: https://localhost:8888
并且，您还需要告诉本地主机服务器以 HTTPS 而不是 HTTP 方式为您的页面提供服务。一旦满足这两个条件，CORS 验证就不会失败。

请注意，要启用 HTTPS，您需要拥有 SSL 证书和密钥，可以使用以下命令生成它们：

openssl req -x509 -out localhost.crt -keyout localhost.key \ -newkey rsa:2048 -nodes -sha256 \ -subj '/CN=localhost' -extensions EXT -config <( \ printf "[dn]\nCN=localhost\n[req]\ndistinguished_name = dn\n[EXT]\nsubjectAltName=DNS:localhost\nkeyUsage=digitalSignature\nextendedKeyUsage=serverAuth")
该命令的来源和更多信息可在

Let's Encrypt 的此页面中找到。

5
投票
设计上不可能

当尝试从磁盘上的文件（使用

file://

协议的网页）尝试时，CORS 始终

被阻止。您无法执行任何操作来使其从文件中运行。
这根本不可能。

这样做的原因是磁盘上的文件没有真正的“来源”来让后端服务器确定请求的有效性。您可以将问题跟踪 html 文件与博客 html 文件放在同一磁盘上。服务器无法知道哪个 html 请求了数据（您甚至可以通过带有嵌入式 javascript 的 Dropbox 共享其他人的文件，当您打开它时，这些文件可能会尝试访问您的服务器数据 - 没有人会想到当他们只是打开一个纯 html 文件时会遭到黑客攻击！ ！）。

这就是为什么没有浏览器供应商允许您从文件发出 CORS 请求。

您需要一台服务器

要使其正常工作，您将需要一个 HTTP 服务器。有很多选择，从在计算机上安装 Apache/Nginx 到运行开发服务器，例如

webpack-dev-server

 或 local-web-server
。只要协议是 http://
 或 
https://
，您就可以发出 CORS 请求。


一旦您拥有了为 html 文件提供服务的服务器，您就可以像往常一样在后端配置 CORS。

    



    

    
    
    

    

        

            

                

                    
2
投票

                    
                

            

        

        
在 Firefox 上，您可以安装此插件：
https://addons.mozilla.org/en-US/firefox/addon/cors-everywhere/ 以禁用相应选项卡的 CORS。然后，任何请求也适用于 file:///
 URI。不过要小心！

    



    

    
    
    

    

        

            

                

                    
0
投票

                    
                

            

        

        
要么 
模拟 Ajax 调用，要么启动配置了反向代理和 HTTP 重写的 Web 服务器，因为我确定您不希望或无权配置 API 服务器 CORS 标头。


如果您不想模拟 ajax 调用，请使用：





  1. 节点-http-代理

    2. nginx - 如果你没有nodejs并且不想安装它。
  2. 

    3. 
    



    

    
    
    

    

        

            

                

                    
0
投票

                    
                

            

        

        
如果您使用类型模块导入 javascript 文件：


<script type="module" src="code.js"></script>

删除类型模块，如下所示：


<script src="code.js"></script>

如果您没有使用 type 模块，并且仍然出现 CORS 错误，解决方案是将所有 .js 文件复制并粘贴到 html 文件中。因此，不要使用加载 js 文件，而是打开标签并将其中的代码添加到 .html 文件中。示例：


<html>
<head>
    <script>
        // Place your js code here. Just the code, not the file.
        // Many files can be contacted here.
    </script>
</head>
</html>

观察：最好的解决方案仍然是创建本地服务器，但这是一个解决方案。

    



    

    
    
    

    

        

            

                

                    
-4
投票

                    
                

            

        

        
如果无法设置access-control-allow-origin，可以尝试这个。


如果您的数据不在同一域中，请使用“回调”功能。
并将您的数据包装为“jsonCallback(“... data ...”) 作为我的示例：
http://www.ceducation.cz/akce-plnytext.json?short=1&callback=?


function jsonCallback(json) {
  $.each(json, function(key, val) {
    // your data is here
    console.log('date: ' + val.date);
    console.log('address: ' + val.address);
    console.log('---');
  });
}

$(document).ready(function() {

  $.getJSON("http://www.ceducation.cz/akce-plnytext.json?short=1&callback=?", function(data) {

  });

});



工作示例
    



    

    


  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2024. All rights reserved.