如何结合ajax和CORS向另一个域发送json请求答案

【问题标题】：How to combine ajax and CORS to send json requests to another domain如何结合ajax和CORS向另一个域发送json请求
【发布时间】：2016-10-31 21:52:07
【问题描述】：

我一直在尝试从托管在另一个域上的网络服务获取信息。最初我只使用 ajax，但后来我意识到由于安全原因这不起作用。后来我了解到我可以使用 CORS 来解决这个问题，问题是我没有让它工作。有什么建议吗？

javascript：

$.ajax({
type: "POST",
    url: "http://localhost:34887//Login",
    data: '{"username":"Administrator","password":""}',
    dataType: "json",

    success: function(data) {
        alert(data[1]);
    },
    error: function(data){
        alert("fail");
    }
});

带有CORS的php代码：

header('Access-Control-Allow-Origin: http://localhost:34887/');
header('Access-Control-Allow-Credentials: true');
header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS');

我得到的错误：

XMLHttpRequest 无法加载 http://localhost:34887/Login。请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，Origin 'http://localhost:5050' 不允许访问。响应的 HTTP 状态代码为 500。

这与我在不使用 CORS 时遇到的错误相同。（欢迎在线提供 CORS 示例）

【问题讨论】：

站点 A 想要调用站点 B 上的 Web 服务。站点 B 需要设置这些访问控制标头以允许站点 A 调用该服务。这就是你在测试中所做的吗？
您的Access-Control-Allow-Origin 标头列出了您调用的端点的来源。它应该列出进行调用的页面的来源。
我还不太了解 CORS，我有一个从 web 服务请求的站点，这个 web 服务能够在我的 sql server 中发布所有数据，现在我正在尝试访问和编辑这个来自我的 localhost:5050 的数据，所以我将 CORS 放在 localhost:5050 上的站点的 php 中

标签： javascript php jquery json ajax

【解决方案1】：

如果您有两台服务器 - Server A（假设为 http://localhost:5050）和服务器 B（假设为 http://localhost:34887/），并且您尝试从运行从 Server A 到 @987654325 的网站运行 ajax @

Website on Server A ===AjaxRequest==> Server B

然后Server B 应该使用Access-Control-Allow-Origin 标头响应在Server A 上运行的网站的请求，其中包含Server A 的值：

header('Access-Control-Allow-Origin: Server A');

这是：

header('Access-Control-Allow-Origin: http://localhost:5050');

此代码应在Server B 内运行以接受来自Server A 的请求。

【讨论】：

@T.J.Crowder，正确，我会用更好的术语更新答案:)
@T.J.Crowder，让我知道当前的解释是否更好。谢谢！
@sansactions: 你应该在localhost:34887 上运行的代码中从标头读取请求的origin，决定是否要接受该来源，如果是，则回显原点返回为 Access-Control-Allow-Origin 标头。如果您不想授予访问权限，请不要发回任何 CORS 标头。这样一来，您就不会宣传您允许访问的人。
在 34887 上运行的服务器应该返回 Access-Control-Allow-Origin。它是否运行 php/python/perl 或任何其他语言都没有关系 - 为了让浏览器（在 5050 上查看网站）接受来自服务器（在 34887 上）的响应，您必须返回该标题。
如果只是为了测试我想没问题，但是我真的建议你解决这个问题（而不是寻找解决方法）。

【解决方案2】：

您可以将 * 添加到 Access-Control-Allow-Origin 中：

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Credentials: true');
header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS');

【讨论】：

只有当他们希望它向全世界开放时。即使他们确实想要（并且在问题中没有任何迹象表明他们这样做），如果您建议这样做，标记它真的很重要。