JQuery AJAX: заголовок "Access-Control-Allow-Origin" отсутствует на запрошенном ресурсе

Я пытаюсь отправить данные в API с моего порта localhost: 4502. Когда я попытался отправить данные в этот API с помощью POSTMAN, данные добавлены в бэкэнд, предоставив ключ базовой авторизации. То же самое я пытаюсь реализовать здесь в вызове 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>

Ответ 1

Я добавил dataType: 'jsonp', и это работает!

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

   }
})

Ответ 2

Это проблема CORS, ваш API не может быть доступен напрямую из удаленного или другого источника. Чтобы разрешить другим IP-адресам или другим источникам доступ к вашему API, вы должны добавить "Access-Control-Allow-Origin" в заголовок API, вы можете установить его значение равным '*', если хотите, чтобы он был доступен для всех, или вы можете установить конкретный домен или ips, например, ' http://siteA.com ' или ' http://192. айпи адрес ';

Включите это в свой заголовок API, это может варьироваться в зависимости от того, как вы отображаете данные JSON,

если вы используете ajax, для извлечения и отображения данных ваш заголовок будет выглядеть так,

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

   }
})

Ответ 3

Важно отметить, что эти ошибки возникают, когда вы пытаетесь выполнить междоменный запрос с клиентской стороны (это код, который пытается заставить запрос использоваться браузером пользователя). Я провел недели, когда впервые начал изучать этот материал, пытаясь обойти ошибки CORS с использованием различных методов и не понимал много ответов в Интернете, потому что они не уточнили, что на самом деле вам определенно нужно иметь возможность запускать это на серверная сторона как браузер (клиентская JS) обычно блокируют эти запросы.

Если вы не знаете, как настроить заголовки ответов сервер - это абсолютно нормально! - и тогда вы должны знать, что вы должны изучить некоторые супер простые серверные сценарии, такие как PHP или Node.JS(который создает сервер с использованием JS).

В принципе, если этот код загружается клиентом (браузер - то есть: если вы "проверяете элемент" или "источник просмотра" и видите этот код не на стороне сервера, если вы видите эту ошибку в консоли браузера) вы столкнетесь с такими проблемами.

Снова это более простое объяснение проблемы, но просто необходимо, чтобы при возникновении этой проблемы вы убедились, что вы знаете разницу между запросом на стороне сервера и запросом на стороне клиента - jquery script src тег заставляет меня думать, может быть, это работает на стороне клиента.

Ответ 4

Если вы используете 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"}

Наслаждайтесь кодированием....

Ответ 5

Будьте внимательны, чтобы использовать постоянные HTTPS или HTTP для всех запросов. У меня была та же ошибка: "В запрошенном ресурсе отсутствует заголовок" Access-Control-Allow-Origin "."