设置 CORS AJAX 调用的标头答案

【问题标题】：Setting Header for CORS AJAX Call设置 CORS AJAX 调用的标头
【发布时间】：2015-12-04 07:30:19
【问题描述】：

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

XMLHttpRequest 无法加载 http://serverB 请求的资源上不存在“Access-Control-Allow-Origin”标头。 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 调用的正确方法是什么？

谢谢史蒂夫

【问题讨论】：

您使用的是什么服务器？ .Net (c#)、Linux PHP？
如果你的服务器配置正确，jQuery 应该会自动处理这个问题。
这是一个 Ubuntu Linux 服务器。该项目设置为 PHP，但基本上使用带有上述 AJAX 调用的直接 HTML 和 JQuery
使用 jsonp 数据类型，您应该不会遇到 CORS 问题。

标签： jquery ajax cors

【解决方案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>

【讨论】：

【解决方案2】：

据我所见，就 CORS 而言，客户端和服务器都需要位于“同一页面”上。过去，在服务器端，我必须将 Origins、Headers 和 Method 打开到 * 至少让它工作，然后再回来并将其从那里限制到正确的域和方法。

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

【讨论】：

这是一个 Linux + PHP 堆栈，所以不确定这是否相关。
@timothyclifford 他实际上提到了 Apache
谢天谢地，我在服务器类型问题的回答后添加了它