Question

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

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

$.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调用的正确方法是什么？

由于史蒂夫

Answer 1

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

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

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

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

中

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

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

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

＆＃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;

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

＆＃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;

Answer 2

从我所看到的，客户端和服务器都需要位于同一页面上。谈到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 "*"

设置CORS AJAX调用的标头

2 个答案: