设置CORS AJAX调用的标头

时间:2015-12-03 22:14:05

标签: jquery ajax cors

我试图从一台服务器进行AJAX调用,再到另一台服务器上的JSON调用。我已经阅读过有关为CORS设置标题的内容,但不确定具体我需要做什么。我在服务器A上调用服务器B并收到错误:

XMLHttpRequest无法加载http://serverB否' Access-Control-Allow-Origin'标头出现在请求的资源上。起源' http://serverA'因此不允许访问。

$.ajax({

    url: 'http://serverB/userList',
    type: 'GET',
    crossDomain: true,
    dataType: 'jsonp',
    success: function(data){

        alert(text.html(JSON.stringify(data)));

    },
    error: function(e){

        alert(e);
    }

});

我已经看到了很多不同的方法来添加标题,但不确定结果是否混合的正确方法(例如,搜索StackOverflow)。

添加到上面的示例AJAX调用的正确方法是什么?

由于 史蒂夫

2 个答案:

答案 0 :(得分:0)

你应该一起避免jsonp。它已经不再安全了......而今天想用jsonp建立另一个休息api的人可能会产生怀疑。

在php中,您应该在发送任何数据之前添加必要的标题

<?php
    header("Access-Control-Allow-Origin: *");

也可以将它添加到.htaccess或Appache

Header set Access-Control-Allow-Origin "*"

请确保您不要将其添加到您不想分享的任何内容

然后还有jQuery json ajax的简写方法

&#13;
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<pre></pre>

<script>
$.getJSON("https://api.github.com", function(res){
  $('pre').html(JSON.stringify(res, null, "  "))
})
</script>
&#13;
&#13;
&#13;

和我的偏好Fetch api没有任何依赖

&#13;
&#13;
<pre></pre>

<script>
  fetch("https://api.github.com")
    .then(res => res.json())
    .then(json => { 
    
      var pre = document.querySelector("pre");
      pre.innerText = JSON.stringify(json, null, "  ")
      
    })
</script>
&#13;
&#13;
&#13;

答案 1 :(得分:-1)

从我所看到的,客户端和服务器都需要位于同一页面上。谈到CORS。在过去的服务器端,我不得不打开起源,标题和方法来*至少使它工作,然后回来并将其从那里限制到适当的域和方法。

在.Net,WepApi我使用EnableCorsAttribute("*", "*", "*") { SupportsCredentials = true }来帮助我达到这一点。

在Apache中,你的apache.conf可能是这样的。

Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Methods "*"
Header set Access-Control-Allow-Headers "*"