2016-10-20 3 views
2

xmlhttprequestクラスとjquery ajaxを使用してサーバーからデータを正常にロードしましたしかし、No 'Access-Control-Allow-Origin'という角度のアヤックスではできませんでした。角度のあるajaxは使用できません。「アクセス制御可能なOrigin」はありません.xmlhttprequestとjquery 3xを使用してください。

注:jqueryのバージョンが3よりも低くなると、角型ajaxのようにNo 'Access-Control-Allow-Origin'も表示されます。

<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script> 
<script> 
$(document).ready(function(){ $.ajax({ 
     url:'http://...', 
     data:"{\"city\":\"Kolkata\"}", 
     method:'post', 
     headers:{'Content-Type': 'application/json','accept': 'application/json'}, 
     success:function(data){ 
      console.log(data); 
     }, 
     error:function(data){ 
      console.log(data); 
     } 
    }); 
}); 

と次のバージョンも動作している通常のXMLHttpRequestバージョンである:ここ

が作動しているが、3から3よりも低いとバージョンを劣化させる場合も同様に動作していないjqueryのAJAXコードであります

$(window).load(function() { 
     var http = new XMLHttpRequest(); 
var url = "..."; 
var params = "{\"city\":\"Kolkata\"}"; 
http.open("POST", url, true); 
http.setRequestHeader("Content-type", "application/json"); 
http.setRequestHeader("accept", "application/json"); 
//Send the proper header information along with the request 

http.onreadystatechange = function() {//Call a function when the state changes. 
    if(http.readyState == 4 && http.status == 200) { 
     alert(http.responseText); 
    } 
} 
http.send(params); 
}); 

しかし、angular1のajaxコードは動作していません。角度バージョンは最新のものです。

$http({ 
     method: 'POST', 
     url: '...', 
     headers: {'Content-Type': 'application/x-www-form-urlencoded,application/json', 
    'Accept':'application/json'}, 
     data: {'city':'Kolkata'} 
    }).then(function successCallback(response){ 
     console.log(response); 
     //return response; 
    },function errorCallback(response){ 
     //return response; 
     console.log(response); 
    }); 

お時間をいただきありがとうございます。

+0

が私を修正します要求がクロスオリジンである場合、jQueryはcrossDomainオプションをtrueに設定するためです。彼らはCORSサポートを$ .ajaxの機能に組み込んでいます。 – Tom

+0

@Tom - クライアントは特定のリクエスト(ヘッダなどを省略)でCORSのトリガを制限することができますが、CORSがトリガされると、レスポンスヘッダのサーバ側の設定が必要です(jQueryクライアントのみでは処理できません)。 jQueryがjsonpを使用してCORSを回避できる可能性があります。 – cchamberlain

+0

@cchamberlainしかし、私はヘッダがサーバー側に設定されていると思います。jQuery 3と同様にxmlhttprequestは正常にデータにアクセスできます。私は角度jの場合に何をすべきですか?私は角度jを使う必要があります。 –

答えて

1

答えはchrome devtoolsの[ネットワーク]タブにある可能性があります。各リクエストのリクエストヘッダーとレスポンスヘッダー、具体的にはCORSヘッダーとOriginヘッダーを見て、jQueryとAngularバージョンの違いを探してください。

また、OPTIONSメソッドタイプのHTTPリクエストがあるかどうかを確認してください。そうであれば、角度呼び出しがCORSに対してフラグを立てるためのヘッダーを送信したり、送信する可能性があります。

CORSをトリガーしないように角度リクエストを減らすことができない場合は、*の値を持つAccess-Control-Allow-Originの応答ヘッダーまたは要求ヘッダーで送信されているオリジンに一致する文字列を設定するようにサーバーコードを変更できる必要がありますほとんどの場合、実際にはCORSの使用を要請している要因に依存しますが、 Access-Control-Allow-Headersレスポンスヘッダーに値*を指定するか、要求で送信される個々のヘッダーの名前をコンマで区切って指定する必要があります。

あなたがサポートされていないContent-Typeシンプルなリクエストヘッダに設定されているので、あなたの角度の呼び出しはCORSをトリガされたように見えます:

CORS Simple Requests

推奨読書 - 私は間違っているが、私はこれを考える場合https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

関連する問題