Jquery AJAX：请求的资源上不存在“Access-Control-Allow-Origin”标头

Posted 2023-03-03

【中文标题】Jquery AJAX：请求的资源上不存在“Access-Control-Allow-Origin”标头

【英文标题】：Jquery AJAX: No 'Access-Control-Allow-Origin' header is present on the requested resource

【发布时间】：2018-05-11 10:04:19

【问题描述】：

我正在尝试从我的 localhost:4502 端口将数据发布到 API。当我尝试使用 POSTMAN 将数据发布到此 API 时，通过提供基本授权密钥将数据添加到后端。我试图在 Ajax Jquery 调用中实现相同的功能，但出现 CORS 错误。我第一次在 jquery 中尝试发布数据，请在这里提供帮助，我可以添加什么。我已经获得了基本授权的 API 密钥，因为用户名和密码可以留空。

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

  <script>
               $(document).ready(function()
               $("#Save").click(function()

                  var person = new Object();
                  person.Name = $('#Name').val();
                  person.EmailAddress = $('#EmailAddress').val();
                  person.CustomFields = [0];
                  person.CustomFields[0].Key = "[Country]";
                  person.CustomFields[0].Value = $('#Country').val();;

               $.ajax(
                 url: 'https://api.createsend.com/api/v3.1/subscribers/7c7a6087b0e450ad72b38be83098e271.json',
                 type: 'POST',
                 dataType: 'json',
                 data:person,
                 success: function(data,textStatus,xhr)

                     console.log(data);
                 ,
                 error: function(xhr,textStatus,errorThrown)
                     console.log('Error Something');
                 ,
                 beforeSend: function(xhr) 

                    xhr.setRequestHeader("Authorization", "Basic OTdlMjVmNWJiMTdjNzI2MzVjOGU3NjlhOTI3ZTA3M2Q5MWZmMTA3ZDM2YTZkOWE5Og=="); 
                 
             );
         );
     );
  </script>

【问题讨论】：

您尝试做的是通过 AJAX 访问 api。这是不可能的（理论上是这样，但我不打算讨论）。您应该使用服务器语言（php、Node.js 等）向 api 发出 HTTP 请求。从那里，您可以获取数据并根据需要使用它。

您正在寻找 JSONP 的跨域 AJAX 请求。

@UghThatGuyAgain 感谢您的回复。所以你的意思是我需要在 php 或 node.js 中编写相同的调用？

@AshishRai 是的；然而，它不止于此。后端语言需要能够与前端进行通信。这不仅仅是重写同一个调用，因为 HTTP 是一个与 AJAX 完全不同的领域。一旦你学会了如何与后端进行 HTTP 调用，你就需要学习如何与前端进行通信（使用 Node，这并不难，imo）。所以，要完成这件事：Node.js 或 PHP 将允许您进行调用，然后您可以将其传达给前端。 tutorialspoint.com/nodejs

@UghThatGUyAgain 什么？

【参考方案1】：

我添加了 dataType: 'jsonp' 并且它有效！

$.ajax(
   type: 'POST',
   crossDomain: true,
   dataType: 'jsonp',
   url: '',
   success: function(jsondata)

   
)

JSONP 是一种发送 JSON 数据的方法，无需担心跨域问题。 Read More

【讨论】：

如果有人想对此进行解释：***.com/a/17299796/1815010

这个解决方案不起作用，遥控器没有回复 jsonp

给这家伙一枚勋章。

上帝保佑你。祝您接下来的 36 小时愉快。

顺便说一句，type: 'POST' 不起作用，因为 jsonp dataType 创建了一个

【参考方案2】：

这是一个 CORS 问题，您的 api 无法直接从远程或不同来源访问，为了允许其他 ip 地址或其他来源访问您的 api，您应该在api 的标头，如果您希望所有人都可以访问它，您可以将其值设置为 '*'，或者您可以设置特定的域或 ip，例如 'http://siteA.com' 或 'http://192。 ip地址';

在您的 api 标头中包含此内容，它可能会因您显示 json 数据的方式而异，

如果您使用 ajax 来检索和显示数据，您的标题将如下所示，

$.ajax(
   url: '',
   headers:   'Access-Control-Allow-Origin': 'http://The web site allowed to access' ,
   data: data,
   type: 'dataType',
   /* etc */
   success: function(jsondata)

   
)

【讨论】：

谢谢，我会尝试在 API 级别添加 Allow-Origin 的东西，然后看看。我希望它有效:)

告诉我是否有效，如果无效，请添加错误截图，谢谢！

它对我不起作用....我正在尝试从托管在我的笔记本电脑上的 Tomcat JSP 页面调用弹性搜索服务器并收到错误消息。我也尝试过标题： 'Access-Control-Allow-Origin': '*' , 但没有成功

我不明白为什么在这个 ajax 标头中添加了“Access-Control-Allow-Origin”？它必须添加到我们的服务器端吧？

【参考方案3】：

如果您在服务器端使用 NodeJ，只需将这些添加到您的路由中就可以了

     res.header("Access-Control-Allow-Origin", "*");
     res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");

然后您的路线将看起来像这样

    router.post('/odin', function(req, res, next) 
      res.header("Access-Control-Allow-Origin", "*");
      res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");


    return res.json(Name: req.body.name, Phone: req.body.phone);
);

Ajax 调用的客户端

 var sendingData = 
   name: "Odinfono Emmanuel",
   phone: "1234567890"


<script>
  $(document).ready(function()

    $.ajax(
        url: 'http://127.0.0.1:3000/odin',            
        method: 'POST',
        type: 'json',
        data: sendingData,
        success: function (response) 
            console.log(response);
        ,
        error: function (error) 
            console.log(error);
        
        );
    );
</script>

您的浏览器控制台中应该有类似的内容作为响应

 name: "Odinfono Emmanuel", phone: "1234567890"

享受编码......

【参考方案4】：

请注意对所有请求使用常量 HTTPS 或 HTTP。 我有同样的错误信息： “请求的资源上不存在 'Access-Control-Allow-Origin' 标头。”

【参考方案5】：

如果服务器请求的资源正在使用 Flask。 安装Flask-CORS。

【讨论】：

这篇文章并不是回答问题的实际尝试。请注意*** doesn't work like a discussion forum，这是一个问答网站，每个帖子都是问题或问题的答案。帖子也可以有comments - 像这样的小句子 - 可用于批评或要求作者澄清。这应该是评论或new question