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

   }
})

Answer 2

如果您在服务器端使用 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"}

享受编码....

Answer 3

这是一个 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){

   }
})