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

そのCORSの問題、あなたのAPIは、あなたのAPIにアクセスすることから、他のIPアドレスまたは他の起源を可能にするために、あなたは「アクセス制御-Allow-を追加する必要があり、リモートまたは異なる起源から直接アクセスすることはできませんApiのヘッダーに「Origin」を追加すると、すべてにアクセスできるようにするには値を「*」に設定するか、「http://siteA.com」や「http://192」などの特定のドメインやipsを設定することができます。 IPアドレス ';あなたは、AJAXを使用して、検索し、表示データは、あなたのヘッダは次のようになります場合

は、それが

、どのように表示されているJSONデータによって異なる場合があり、あなたのAPIのヘッダにこれを含める

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

    } 
}) 

Answer 2

dataType： 'jsonp'を追加しました！ここで注意することが重要

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

    } 
}) 

Answer 3

それは、要求がユーザーのブラウザで使用されているようにしようコードです（あなたは、クライアント側からのクロスドメインリクエストを実行しようとしているとき、これらのエラーが出てくるということです）。私は何週間も過ごしてから、CORSエラーをさまざまな方法で解決しようとしていましたが、Web上で多くの回答を理解できませんでした。なぜなら、あなたが実際にこの問題を確実に実行できる必要があることを明確にしていないからです。ブラウザ（クライアント側JS）としてのサーバー側は、通常、これらの要求をブロックします。

サーバ応答ヘッダーを設定する方法がわからない場合は、完全に問題ありません。 PHPやNode.JS（JSを使用してサーバーを作成する）のような非常にシンプルなサーバー側スクリプトを調べるべきであることを知っておく必要があります。

基本的には、このコードがクライアントによって読み込まれている場合（ブラウザ - つまり、要素を調べるか、ソースを表示してこのコードを見ると、サーバー側ではありません）、ブラウザコンソールでこのエラーが表示されている）あなたはこのような問題に遭遇するつもりです。

もう一度この問題の基本的な説明がありますが、この問題が発生したときにサーバー側の要求とクライアント側の要求の違いを認識していることを確認してください。jqueryスクリプトのsrcタグこれはクライアント側で実行されている可能性があります。