jQuery 跨域请求被阻止

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/23607901/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-27 02:19:25  来源:igfitidea点击:

Cross-Origin Request Blocked on

jquerywordpressssl

提问by Musik8101

I have a WordPress site and I am getting an error from my godaddy seal. I have the html for the verify image in a widget section of the footer of my site.

我有一个 WordPress 网站,但我的 Godaddy 印章出现错误。我在我网站页脚的小部件部分中有验证图像的 html。

When I reload the page and check firebug I am getting this error in the console.

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

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://seal.godaddy.com/setSealAttr?sealID=ID#. This can be fixed by moving the resource to the same domain or enabling CORS.

跨域请求被阻止:同源策略不允许在https://seal.godaddy.com/setSealAttr?sealID=ID#读取远程资源 。这可以通过将资源移动到同一域或启用 CORS 来解决。

I have tried to look up information on this issue and it's a bit over my head. Can anyone fill me in on what is throwing this error and how I might go about fixing the issue? I am just trying to understand how this error happens. Is it a conflict issue with jquery somewhere, or is it the way the seal is being loaded or perhaps the time it is being loaded?

我试图查找有关此问题的信息,但这有点超出我的理解。任何人都可以告诉我是什么引发了这个错误以及我将如何解决这个问题?我只是想了解这个错误是如何发生的。是某处与 jquery 的冲突问题,还是密封加载的方式或加载时间?

Any help would be greatly appreciated.

任何帮助将不胜感激。

回答by davidkonrad

Look at Same Origin Policy. Regarding

查看同源策略。关于

This can be fixed by moving the resource to the same domain or enabling CORS

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

and the fact you are using WordPress, you can create a proxy very easy like this :

事实上,您使用的是 WordPress,您可以像这样轻松创建代理:

proxy.php :

代理.php:

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

Then you want to call a resource outside the domain, as with AJAX, use proxy.php to fake that you are trying access the resource from the same domain. Like :

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

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

Here the result is expected to be JSON, but just change header / datatype to HTML, XML or whatever if needed.

这里的结果预计是 JSON,但只需将标题/数据类型更改为 HTML、XML 或任何需要的内容。



Update: @Jason raises an interesting point about security. I totally agree. Under normal circumstances one could prevent remote access to files by .htaccessand a <Files>directive :

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

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

...but this is not satisfactory, since it will prevent using proxy.phpin AJAX calls as well. A solution is to check if proxy.phpis called by another script :

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

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

This will allow using proxy.php in javascript AJAX calls, but prevent direct access from remote (or locally). See this answerfor more about $_SERVER['HTTP_X_REQUESTED_WITH']and XMLHttpRequest.

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

回答by user3785330

$.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);
        }

      }
    });

回答by Matthew Miller

I had a similar issue using the glyphicons-haflings-regular.woff fonts that came with bootstrap ver3. After adjusting the css to place the font-family declaration before any and all tag declarations my problem went away

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

回答by Heena Patel

Use headers for solve cross domain error:

使用标头解决跨域错误:

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

            success:function(data){  
            }
       });

回答by Devendra Patel

We can fix the problem by placing base tag on our html.

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

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