web-dev-qa-db-ja.com

Jquery AJAX：要求されたリソースに「Access-Control-Allow-Origin」ヘッダーがありません

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>
jqueryajaxcorsaem
15
Ashish Rai

DataType： 'jsonp'を追加しましたが、動作します！

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

   }
})
13
Hunter

そのCORSの問題は、リモートまたは異なるオリジンから直接APIにアクセスできないことです。他のIPアドレスまたは他のオリジンからのアクセスを許可するには、APIのヘッダーに「Access-Control-Allow-Origin」を追加する必要があります。すべてにアクセスできるようにする場合は、値を「*」に設定するか、「 http://siteA.com 」または「 」などの特定のドメインまたはIPを設定できますhttp：// 192 。 IPアドレス ';

これをapiのヘッダーに含めます。jsonデータの表示方法によって異なる場合があります。

ajaxを使用してデータを取得および表示する場合、ヘッダーは次のようになります。

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

   }
})
3
apelidoko

サーバー側にNodeJを使用している場合、これらをルートに追加するだけでOKになります

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

コーディングをお楽しみください...

0
Odin

すべての要求に一定のHTTPSまたはHTTPを使用することに注意してください。同じエラーメッセージが表示されました：「要求されたリソースに 'Access-Control-Allow-Origin'ヘッダーがありません。」

0
Daniel Stahl