跨域请求被阻止

Posted

技术标签:

【中文标题】跨域请求被阻止【英文标题】:Cross-Origin Request Blocked on 【发布时间】:2014-06-29 17:58:23 【问题描述】:

我有一个 WordPress 网站,但我收到了来自我的 Godaddy Seal 的错误。我在网站页脚的小部件部分中有用于验证图像的 html

当我重新加载页面并检查 firebug 时,我在控制台中收到此错误。

:同源策略不允许读取 远程资源在 https://seal.godaddy.com/setSealAttr?sealID=ID#。这可以修复 通过将资源移动到同一域或启用 CORS。

我已尝试查找有关此问题的信息,但我有点不知所措。谁能告诉我是什么引发了这个错误以及我该如何解决这个问题?我只是想了解这个错误是如何发生的。是在某个地方与 jquery 存在冲突问题,还是密封的加载方式或加载时间?

任何帮助将不胜感激。

【问题讨论】:

您可以在您的服务器上启用跨域请求***.com/a/5009126/2375207 ...或者在 seal.godaddy.com 上托管您的 wordpress ...发送到您的wordpress 【参考方案1】:

看看Same Origin Policy。关于

这可以通过将资源移动到同一个域或 启用 CORS

而且您使用的是 WordPress,您可以像这样非常容易地创建代理:

proxy.php

<?
header('Content-type: application/json');
$url=$_GET['url'];
$json=file_get_contents($url);
echo $json;
?>

然后你想调用域外的资源,就像使用 AJAX 一样,使用 proxy.php 来假装你正在尝试从同一个域访问资源。喜欢:

var url= "my-external-resource.com?param=value";
url = 'proxy.php?url='+url:
$.ajax(
    url: url,
    dataType: 'json',
    success:  function (data) 
        ...
    
);

这里的结果应该是 JSON,但只需将标头/数据类型更改为 HTML、XML 或其他任何需要的内容。


更新:@Jason 提出了一个关于安全性的有趣观点。我完全同意。在正常情况下,可以通过.htaccess&lt;Files&gt; 指令阻止远程访问文件:

<Files proxy.php>
    Order Deny,Allow
    Deny from All
    Allow from 127.0.0.1
</Files>

...但这并不令人满意,因为它也会阻止在 AJAX 调用中使用proxy.php。一个解决方案是检查 proxy.php 是否被另一个脚本调用:

if (!isset($_SERVER['HTTP_X_REQUESTED_WITH'])) 
    header('HTTP/1.0 403 Forbidden');
    die('You are not allowed to access this file.');     

这将允许在 javascript AJAX 调用中使用 proxy.php,但阻止从远程(或本地)直接访问。有关$_SERVER['HTTP_X_REQUESTED_WITH']XMLHttpRequest 的更多信息,请参阅this answer

【讨论】:

@Musik8101 如上所述创建一个proxy.php,并将其放在根目录中。然后将您的 ajax 调用更改为 proxy.php?url=&lt;your original url&gt;(当然没有 字符) @davidkonrad Bro 我也遇到了类似的错误。但是我的网站不是 wordpress,尽管它的工作原理就像这里的网址是 inmotico.com。你能告诉我如何为此制作代理服务器吗? 这是我提出的问题 [Link](***.com/questions/23883261/…) @Vikram Anand Bhushan,与上述方式完全相同。它只是克服同源策略的一个小桥或代理。 那个解决方案看起来很危险。不是开放代理吗?【参考方案2】:
$.ajax(
      type: 'POST',
      url: 'http://fscebook.comxa.com/index.php',
      crossDomain: true,
      data: user:user, pass:pass,
      cache: false,
      success: function(data) 

        if($.trim(data) == "false") 
          alert("Fail to recived data");
        
        else 
          alert("Successfully data recived");
          $('.results').html(data);
        

      
    );

【讨论】:

在 .htaccess RewriteBase / Header 中设置 Access-Control-Allow-Origin "*" 文件并在你的 serverfile 中写入 index.php 【参考方案3】:

我们可以通过在我们的 html 上放置 base 标签来解决这个问题。

<head>
<base href="http://www.otherdomain.com/xyz/">
</head>

【讨论】:

【参考方案4】:

我在使用 bootstrap ver3 附带的 glyphicons-haflings-regular.woff 字体时遇到了类似的问题。在调整 css 以将 font-family 声明放在任何和所有标签声明之前,我的问题就消失了

【讨论】:

【参考方案5】:

使用标头解决跨域错误:

 $.ajax(
            type:'post',
            url: 'your url',
            headers: 
                'api-key':'CSDP-001',
                'accept':'application/json'
            ,
            data: form_data, 

            success:function(data)  
            
       );

【讨论】:

以上是关于跨域请求被阻止的主要内容,如果未能解决你的问题,请参考以下文章

socket.io 跨域请求被阻止

跨域请求被阻止原因:CORS 预检通道未成功

jQuery ajax 请求因为跨域而被阻止

AJAX 请求跨域请求被阻止错误

跨域请求被阻止

AngularJS和跨域请求被阻止[关闭]