Jquery AJAX：请求的资源中未包含“Access-Control-Allow-Origin”头部

Question

Jquery AJAX：请求的资源中未包含“Access-Control-Allow-Origin”头部

40

我正在尝试从本地主机的端口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>

- Ashish Rai

1

你要做的是通过 AJAX 访问一个 API，这是不可能的（从理论上来说是可能的，但我不打算深入讲解）。你应该使用服务器语言（如 PHP、Node.js 等）向 API 发出 HTTP 请求。然后，你可以获取数据并按照你的需要使用它。 - UghThatGUyAgain

2

你正在寻找用于跨域AJAX请求的JSONP。 - Obsidian Age

@UghThatGuyAgain 谢谢您的回复。所以您的意思是我需要在 PHP 或 Node.js 中编写相同的调用？ - Ashish Rai

@AshishRai 是的；但是，它不仅仅是这样。后端语言需要能够与前端通信。这不仅仅是重写相同的调用，因为HTTP是一个完全不同的领域，而不是AJAX。一旦你学会了如何使用后端进行HTTP调用，你就需要学习如何将其传递给前端（使用Node，我认为这并不难）。因此，为了完成这个任务：Node.js或PHP将允许您进行调用，然后您可以将其传递给前端。https://www.tutorialspoint.com/nodejs/ <- 这是了解Node的一个简单开始。祝编码愉快，好运！ - UghThatGUyAgain

@UghThatGUyAgain 什么？ - Čamo

6个回答

7

这是一个CORS问题，你的API无法直接从远程或不同的来源访问。为了允许其他IP地址或来源访问你的API，你应该在API的头部添加'Access-Control-Allow-Origin'，如果你想让所有人都可以访问，你可以将其值设置为'*'，或者你可以设置特定的域名或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){

   }
})

- apelidoko

谢谢，我会尝试在API层面添加Allow-Origin的东西并查看它是否有效。希望能成功 :) - Ashish Rai

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

它对我不起作用... 我正在尝试从托管在我的笔记本电脑上的Tomcat JSP页面调用elasticsearch服务器，但出现错误。我还尝试了头文件：{'Access-Control-Allow-Origin': '*'}，但没有成功。 - Reddy SK

23

为什么在这个Ajax请求头中要添加'Access-Control-Allow-Origin'，我不明白？这必须在我们的服务器端添加，对吗？ - Ameerudheen.K

7

如果你在服务器端使用NodeJs，只需将以下内容添加到你的路由中，就可以了。

     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"}

享受编码...

- Odin

2

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

最初的回答：

- Daniel Stahl

0

我曾经遇到过这个问题，后来通过添加内容类型头解决了。我不知道为什么这样做有效，但我注意到其他成功的POST请求都设置了内容类型。而失败的那个没有设置是因为它没有内容。希望这能帮助到别人 :)

- UglyBlueCat

-3

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

- Johnson

1

本帖并非实际尝试回答问题。请注意，StackOverflow不像讨论论坛，它是一个问答网站，每篇帖子都是问题的答案或回答的问题。帖子也可以有评论-像这个小句子一样-可以用来批评或请求作者澄清。这应该是一个评论或新问题。 - ρяσѕρєя K

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Hunter · Accepted Answer

我已添加dataType: 'jsonp'，它可以正常工作！

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

   }
})

JSONP是一种可以发送JSON数据而不用担心跨域问题的方法。阅读更多