正在设置CORS AJAX调用的标头

Question

我正试图从一台服务器对另一台服务器上的JSON调用进行AJAX调用。我读过关于为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调用示例中的正确方法是什么？

谢谢Steve

Answer 1

您应该一起避免jsonp。它不再安全了。。。想要使用今天用jsonp构建的另一个rest api的人可能会产生怀疑。

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

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

也可以将其添加到.htaccess或Appache 中

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

只需确保你不会将其添加到任何你不想共享的内容中

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

<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>

和我最喜欢的没有任何依赖的Fetch api

<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>

Answer 2

根据我所看到的，当涉及到CORS时，客户端和服务器都需要在"同一页"上。过去，在服务器端，我不得不向*打开Origins、Headers和Methods，至少让它工作起来，然后再回来，将它限制在适当的域和方法中。

在.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 "*"