跨域请求被阻止：同源策略不允许在 http://localhost:9200/test12/test3/_search?pretty 读取远程资源

Posted 2023-03-04

【中文标题】跨域请求被阻止：同源策略不允许在 http://localhost:9200/test12/test3/_search?pretty 读取远程资源

【英文标题】：Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:9200/test12/test3/_search?pretty

【发布时间】：2017-03-08 07:24:35

【问题描述】：

我有一个带有 ElasticSearch 的自动完成 jquery 功能。输入第一个字母时出现以下错误。

跨域请求被阻止：同源策略不允许读取位于http://localhost:9200/test12/test3/_search?pretty 的远程资源。 （原因：缺少 CORS 标头“Access-Control-Allow-Origin”）。

这里是代码

$(function () 
    $("#keyword").autocomplete(
        source: function (request, response) 
            $.ajax(
                 url: "http://localhost:9200/test12/test3/_search?pretty",
                data: "q=firstname:" + request.term +"*" , 
                dataType: "json", 
                type: "POST", 
                headers: 
                'Access-Control-Allow-Origin':  'http://localhost'
            ,
                crossDomain: true,    
                jsonpCallback:"callback", 
                contentType: "application/json; charset=utf-8",
                success: function (data) 
                    console.log(data); 
                    response($.map(data.d, function (item) 
                        return 


                            label: item.split('-')[0],
                            val: item.split('-')[1]
                        
                    ))
                ,
                error: function (response) 
                    alert('error'+ response.responseText);
                ,
                failure: function (response) 
                    alert('failure'+response.responseText);
                
            );
        ,
        select: function (e, i) 
            $("[id$=keyword]").val(i.item.val);
        ,
        minLength: 1
    );
);

我也试过'Access-Control-Allow-Origin': '*'，还是不行。

当我尝试jsonp 而不是json 时，我得到了

语法错误（这是正常的，因为我的代码需要 json 而不是 jsonp 的东西）

在服务器上：我做到了，

Header always set Access-Control-Allow-Origin "*"
Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
Header always set Access-Control-Max-Age "1000"
Header set Access-Control-Allow-Headers "x-requested-with, Content-Type, origin$
/etc/apache2/apache2.conf

还是没有解决问题

【问题讨论】：

Access-Control-* 标头是 response 标头。他们需要来自服务器

"No 'Access-Control-Allow-Origin' header is present on the requested resource"的可能重复

在您的服务器上启用跨源支持。除非服务器允许，否则浏览器不会允许跨源请求。

试过了！！标头始终设置 Access-Control-Allow-Origin "*" 标头始终设置 Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT" 标​​头始终设置 Access -Control-Max-Age "1000" on /etc/apache2/apache2.conf

【参考方案1】：

使用允许用户通过更改 http 响应在任何地方启用 CORS 的浏览器插件。

火狐：https://addons.mozilla.org/en-US/firefox/addon/cors-everywhere/

铬：https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf/

Safari：无需安装任何插件，只需转到“开发”>“禁用跨域限制”即可。如果您在 Safari 中没有“开发”菜单，请按照以下说明操作：

【讨论】：

所以你告诉所有访问者他们必须在浏览器上安装一些东西？这不是答案！

@MC9000 这个问题（以及我的回答）的上下文是在本地机器上进行测试，很可能是出于开发目的。因此，在这种特定情况下，我的回答是基于我为解决本地开发环境所做的建议。这与我部署到生产环境的内容和方式无关，这超出了这个问题的范围。也就是说，非常欢迎您提出自己的答案……这就是 Stack Overflow 的全部理念。

这个解决方案听起来很有希望，但并没有为我解决问题。我仍然在控制台上遇到相同的错误。如果我在其他地方找到解决方案，我会回到这篇文章。

为我工作，至少用于测试。

感谢@Ahmed，建议的解决方案仅用于测试目的。您还可以设置代理服务器。无论如何，生产环境完全需要另一种设置。