Web APIドメイン間問題

web apiを作成する小さいdemoを書いた後に、別のプロジェクトの中のhtmlで直接データを求めて、しかし誤りを得ました:Failed to loadhttp://localhost:58764/api/Products: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:62699'is therefore not allowed access."ネット上で解決策を探して、Webサイトのドメイン間問題が原因であることがわかりました.
ドメイン間とは?ドメイン間問題は、JavascriptがAJAX呼び出しを開始した場合、またはSilverlightがサービス呼び出しを開始した場合にのみ発生します.根本的な原因は、ブラウザがこの2つの要求に対して与える権限が低いためです.通常、ターゲットサーバがドメイン間呼び出しを許可していることを明確に通知しない限り、ドメイン内のリソースのみを呼び出すことができます.ページまたはアプリケーションがhttp://www.test1.com 行きましたが、私たちはhttp://www.test2.com データの抽出を要求する.一般的に、AJAXを直接使用して要求すると失敗し、ブラウザから「ソースが一致しない」というエラーが返され、「ドメイン間」に由来します.まず、ドメイン間問題は、JavascriptがAJAX呼び出しまたはSilverlightサービス呼び出しを開始した場合にのみ発生します.JavaScriptは、セキュリティ上の理由でドメイン間で他のページのオブジェクトを呼び出すことはできません.AJAXクロスドメイン(cross domain)がASP.NET MVCまたはASP.NET Web API作成サービスを呼び出すとアクセスできない場合があります.
ドメイン間テスト

Aは、Web APIとしてアクセスされ、実装プロセスは、上記の文書に示されている.

BではajaxでAにアクティブにアクセスし、ajaxコードは以下の

である.

 //       
    let uri = "http://localhost:58764/api/Products";
    document.getElementById('btn').onclick = function () {
        $.ajax({
            url: uri,
            type:"GET",
            success: function (data) {
                $.each(data, function (key, item) {
                    console.log(item);
                });
            }
        })
    }

結果は次のとおりです.
問題を解決するのは簡単に言えば、ドメインをまたぐターゲットサーバが一連のHeadersに戻ることであり、これらのHeadersによってドメインをまたぐことに同意するかどうかを制御するが、重要なheader:access-control-allow-originが欠けているため、現在のターゲットはどのように「access-control-allow-origin」を追加するかになり、いくつかの文章を見て、言う方法も少なくない.最後に簡単で速い方法を選びました.

//           ,  ASP.NET MVC，    web.config          
//system.webServer       ：
 <httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
        <add name="Access-Control-Allow-Headers" value="Content-Type" />
        <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
      customHeaders>
    httpProtocol>

修正後の結果:
もちろん他にも多くの方法が実現できますが、ここでは最も簡単なテストしか行われていません.詳細については、次の方法を参照してください.https://cnblogs.com/inconceivable/p/5504732.html http://ruanyifeng.com/blog/2016/04/cors.html https://blog.csdn.net/crx05/article/details/56287407