クロスドメインインターフェイスのフロントエンド・ソリューション

クロスドメインの理由により制作：限られたブラウザの同一生成元ポリシーは、異なるドメイン名、異なるポート、異なるプロトコルの下でリソースの共有を許可していません。

クロスドメインソリューション：

（1）JSONP

通常、Webサーバーの負荷を軽減するために、我々は別の独立したドメインネームサーバへのJS、CSS、IMGやその他の静的リソースを分離して、それぞれのラベルでhtmlページに異なるドメインからの静的リソースをロードするために、ブラウザあるき許可し、この原理に基づいて、我々はによって動的なスクリプトを作成することができ、その後、クロスドメイン通信を実現するためのパラメータでURLを要求します。

欠点は、要求メソッドを取得する唯一の方法を適用し、唯一のクロスドメインのHTTPリクエストをサポートし、リクエストに応じていくつかの制限があるが、それはクロスドメインの問題を解決する最初のものです。クロスドメインの問題を解決するために、このメソッドを使用するにはjqueryの：

$("#demo").click(function(){
    $.ajax({
        url : 'http://www.demo.cn/Test/crossDomain',
        data : {},
        type : 'get',
        dataType : 'jsonp',  
        success : function (res) {
            conosle.log(res);
        }
    });
});

（2）CORS要求だけサポートおよびサーバをブラウズし、ほぼすべてのブラウザでは、この機能をサポートしています。

開発者は差がないAJAX相同CORSと通信するためCORS全体の通信は、ブラウザは、自動的に行われます。ブラウザはAJAX後クロスドメインリクエストが自動的にいくつかの追加のリクエストヘッダ、時々事前要求を追加し、プリフライトデータ送信シートによる要求を送信します。この方法では、応答を変更するためにヘッドの後端部が必要です。

 header(Access-control-Allow-Origin:  * ');   
//*代表允许访问的来源（所有），但是你在请求头携带cookie等东西时，必须要指明，也就是设置跨域白名单。

header('Access-control-Allow-Method: POST,GET');  //允许访问的方式

通常のクロスドメインリクエスト：フロントとリアの両端を設定する必要があります唯一のサーバーの設定アクセス制御 - 許可 - 起源は、クッキーに依頼して、フロントエンドを設定する必要になることはできません。

原生ajax:

// 前端设置是否带cookie
xhr.withCredentials = true;

jqueryのAJAX：

$.ajax({
    ...
   xhrFields: {
       withCredentials: true    // 前端设置是否带cookie
   },
    ...
});

（3）は、プロキシを設定します。これは、クライアントがサーバに直接ではなく、要求を送信したが、中間層エージェントに最初とき単に理解することができる。同様に、サーバに戻り、中間層の最初のエージェントにデータ。

一例として、クロスドメインを解決するための薬剤を開発するためにWebPACKの設定API：

WebPACKの-devのサーバー：①必要性は、ローカルに開発されたプラグインを使用します。

②HTTPの構成プロキシWebPACKの構成ファイルで構成され、（webpack.config.js）で

module.exports = {
 ...
 // webpack-dev-server的配置
 devServer: {
     proxy: {
        // 当请求是以/api开头的接口，则帮代理访问到http://localhost
        '/api/*': {
             target: 'http://localhost', //要代理的域名，必须要加上http
            //开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，
            这样客户端端和服务端进行数据的交互就不会有跨域问题
             changeOrigin: true,
             pathRewrite:{
               '^/api':'/'  // 替换target地址，也就是说以后请求http://localhost/demo1地址时，
                            axios请求地址直接写成/api/demo1
         }
     }
 },
 ...
};

DEV環境では、proxyTableの構成は、クロスドメインを達成することができますので。しかし、本番環境では、APIのプレフィックスは、エラーが発生し、ダイに直接書き込まれます。生産環境がbaseUrlにされている場合それは、開発環境baseUrlに=、「/ API」 '=、開発環境や生産環境を決定することによって、動的に設定することができます。

axios.defaults.baseURL = (process.env.NODE_ENV===‘development’)?'/api':''