CORS - 没有 JSONP 的跨域 AJAX 通过允许服务器上的 Origin

Posted 2023-02-19

【中文标题】CORS - 没有 JSONP 的跨域 AJAX 通过允许服务器上的 Origin

【英文标题】：CORS - Cross-Domain AJAX Without JSONP By Allowing Origin On Server

【发布时间】：2013-06-23 11:53:00

【问题描述】：

我在同一台服务器上有两个独立的应用程序，其中一个 EmberJS 尝试对我的后端 API 进行跨域调用。

我设置了我的后端 API 以允许来自该特定来源的跨域请求。然而，有没有办法避免在这样的设置中使用 JSONP？ $.ajax 在跨域请求被发送之前阻止它们。如果不是，CORS 的意义何在，我实现了哪个服务器端来接受来自我的 JS 前端源的请求？

编辑

AJAX 请求：

$.ajax(
    url: "api.lvh.me:3000/accounts/login",
    data: cred,
    type: "POST",
    xhrFields: 
        withCredentials: true
    ,
    success: function(response)
        alert('succeeded!');
        console.log(response);
        alert(response);
    ,
    failure: function(message)
        alert("failed");
        console.log(message);
        alert(message);
    
);

【问题讨论】：

你为什么不简单地反向代理后端，这样CORS问题就不会发生？编辑：我不认为 $.ajax 会阻止这些请求，因为它必须询问服务器是否允许它们......

反向代理不允许所有跨域请求吗？

您是否尝试在 $.ajax 调用中将“http://”添加到 url 属性？

【参考方案1】：

如果启用 CORS，则无需使用 JSONP。

Access-Control-Allow-Origin: http://www.example.com

如果在响应中设置了此标头，则普通 XmlHttpRequest 将能够访问响应，就好像它像同一个域一样。检查此标头是否设置正确。

如果您使用 jquery A CORS POST request works from plain javascript, but why not with jQuery?，希望此链接对您有所帮助

更新： 示例

var xmlhttp= new XMLHttpRequest();
var url="https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS?redirectlocale=en-US&redirectslug=HTTP_access_control";
xmlhttp.open("GET",url,false);
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
xmlhttp.send();

在任何领域试试这个，你会得到响应。

更新解决方案：

不带“http://”的请求 url 导致问题，前置“http://”解决了问题

【讨论】：

我确实在标题响应中添加了Access-Control-Allow-Origin: *，但我仍然收到同样的错误。我正在使用 jQuery 1.9，因此 jQuery 与 JS 的问题不应该成为问题。请查看我对我发送的 jQuery AJAX 请求的编辑。

我们如何启用 CORS？？

【参考方案2】：

您可以在 Rails 5 中使用rack-cors，将其设置为允许所有 URL。

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins '*'
    resource '*', headers: :any, methods: [
      :get, :post, :put, :patch, :delete, :options, :head
    ]
  end
end

【参考方案3】：

在跨域环境中，我建议使用 JSONP 而不是 CORS，因为许多免费主机不支持跨域 CORS。 working examples 中有详细说明 - JSONP 和 CORS。