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

Question

我正在尝试从我的 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>

Answer 1

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

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

   }
})

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

Answer 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){

   }
})

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

享受编码......

Answer 4

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

Answer 5

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