在 .ajax POST 中启用 CORS

Posted 2023-03-04

【中文标题】在 .ajax POST 中启用 CORS

【英文标题】：Enabling CORS in .ajax POST

【发布时间】：2015-07-15 05:06:49

【问题描述】：

我创建了一个 .ajax 请求，但我不断收到此错误：

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://api.com/api/GetData. This can be fixed by moving the resource to the same domain or enabling CORS.

我在网上查看了一些东西并将我的 ajax 请求编辑为如下所示：

var url = "https://api.com/api/GetData";
var data = jsonHandler();
$.support.cors = true;
this.xhr = $.ajax(
    crossDomain: true,
    url: url,
    type: "POST",
    data: data,
    accept: "application/json",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function(response) 
        alert(response);
    ,
    error: function(response) 
        console.log(response)
    ,
    fail: function(response) 
        console.log(response)
    
);

我的请求中有什么遗漏吗？

我见过this SO q/a，但我不确定我做的是否正确，或者这是否与我的问题有关。

如果有任何建议，我将不胜感激。提前致谢。

更新：刚刚尝试根据this在web.config文件中启用CORS，但没有任何改变。将再次更新。

更新 2： 将此添加到 web.config 部分似乎解决了我的问题：

<httpProtocol>
  <customHeaders>
    <add name="Access-Control-Allow-Origin" value="*" />
    <add name="Access-Control-Allow-Methods" value="POST, GET, OPTIONS"/>
    <add name="Access-Control-Allow-Headers" value="Authorization, Origin, X-Requested-With, Content-Type, Accept"/>
  </customHeaders>
</httpProtocol>

【问题讨论】：

您确定接收 API 接受 CORS 请求吗？

@RoryMcCrossan 啊哈.. 嗯，最好去检查一下。可能不得不删除这个帖子。谢谢。

该服务器应该设置'access-control-allow-origin'标头

@terbubbs 服务器必须指定它允许来自哪里的 CORS 请求

【参考方案1】：

我有同样的问题，我在服务器端代码中解决了这个问题，而不是在 ajax 请求中。就我而言；我在服务器端使用cakephp。

我将此代码添加到我的 php 控制器中。

header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: POST, GET, OPTIONS");
header("Access-Control-Allow-Headers: Authorization, Origin, X-Requested-With, Content-Type, Accept");

【讨论】：

感谢您提供此解决方案。我将此添加到我的 web.config 文件（格式正确）中，CORS Blocked 消息消失了。

【参考方案2】：

不久前修复了同样的问题。而且我不需要启用/激活 CORS，因为我已经读到某些防火墙会删除标头以确保安全。 http://promincproductions.com/blog/server-proxy-for-cross-site-scripting-cors/

在你的 js 代码的全局部分，添加一个函数 ...

window.googleDocCallback = function ()  return true; ;

然后，在您的 AJAX（假设为 GET？）请求中的 URL 中，如果您没有 URI 参数，请附加 ?callback=googleDocCallback

如果您有其他参数，请附加 &callback=googleDocCallback

更多信息请见：https://jvaneyck.wordpress.com/2014/01/07/cross-domain-requests-in-javascript/

【讨论】：

我会在尝试一些事情后回复您

我试了一下，收到了相同的 Content-Origin Request Blocked 和更新的 URL（附加了 &callback=googleDocCallback）。也许我没有将 window.googleDocCallback 放在正确的位置。我的 js 代码的全局部分到底是什么？我正在编写的 .js 文件是 UserControl (ascx) 资源的一部分，我只是在 ascx 标记中创建脚本源。 googleDocCallback 是否需要放置在我的项目中的其他位置？

全局是指代码中其他函数可以访问它而不会出现任何item or object is undefined 错误的地方。要测试您是否已将函数置于足够全局的位置，请设置一个基本变量并为其赋值。如果您可以访问该变量（意味着定义了该变量），那么您就处于一个足够全局的位置。检查控制台日志或其他地方以查找任何未定义的内容。

非常感谢您的解释。看来 Erasmo 的回答解决了我的问题。无论如何，我都会支持你，因为这对其他人可能会有所帮助和可能的解决方案。

@terbubbs 感谢您的支持。 Erasmo，我也赞成你的回答，