三つの基本的なクロスドメインソリューションのフロントエンド

まず、使用WebPACKのリバースプロキシ（この方法は、プロジェクトのフレーム構造を使用するのに適している、以下の実施例は、建築プロジェクトのVUEに基づいています）

プロジェクトの完了を見つけ1.設定ファイルに組み込まれているが、図index.jsに発見されました

次のようにファイルindex.js開始コードを入力した後2が配置されています

プロキシ・テーブル：{
      '/ API'：{
        ターゲット：IPアドレス「http://127.0.0.1」、//設定はクロスドメインが必要です         
        確保：それはここでは、HTTPS trueにある場合はfalse、// HTTPSプロトコルは、設定する必要があります
        changeOrigin：真、//クロスドメインかどうかを、真のクロスドメインを許可します
        Pthriawrite：{
          '^ / API'： '/'
        }
      }
}

設定が完了したら3、図に参照されるファイルは、のように記述します

ここで、「/ API /」「/ API /」それ以外の場合はエラー、名前が固定されていない、変更することができますが、名前の名前への参照が同じ時間を設定する必要がある場合に、クロスドメイン構成であります

第二に、使用nginxのリバースプロキシ

1.まず、ダウンロードnginxの。ダウンロードします。https：//github.com/LHDGH/nginx.git

以下に示すように2.ダウンロードは、configフォルダを入力し、[nginx.configファイルを見つけ、完了です

に示すように、3開きnginx.config構成

3.次のように続いて、公文書（ページファイルので、導入される）の間でIPを再定義

constのbaseUrlに= "のhttp：// localhostを：8888 / XXX"。

　　どこで：

　　　　構成されたローカルホストサーバー名第2のステップと

　　　　8888为第二步中所配置的listen；

　　　　xxx为第二步中所设置匹配的url，如下图

4. 配置完成之后，利用终端进入包含有nginx.exe文件的文件夹启动nginx（启动命令如下）

nginx.exe 回车

如果之前已启动，则需要重启即可，如下

nginx.exe -s reload

完成以上步骤就可以用nginx反向代理，解决跨域问题了

三、利用http-server反向代理

1. 安装（全局安装加 -g）

全局安装：npm install http-server -g

　　在安装完成之后，进入文件执行第2步的时候可能会报错，提示http-server没有安装，我自己的解决方案就是重新安装了一下就好了

　　具体想要研究可以访问：https://blog.csdn.net/sinat_41747081/article/details/90301155。

2. 进入需要代理的文件（也就是需要启动服务的文件夹）执行以下命令

http-server 回车（此步骤默认端口8080）

如果直接执行此步骤，本地文件可以通过默认的服务器地址为：localhost:8080或127.0.0.1:8080访问但并不能解决跨域问题

3. 如果想要解决跨域问题，则需要执行以下命令

http-server -P 需要代理的IP地址 -p 端口号 （可以修改默认的端口）

例如

http-server -P https://baidu.com -p 9999

　　https://baidu.com 代理的IP地址

　　9999 访问的端口号

　　执行以上命令可以通过 localhost:9999.文件名访问页面

　　在公共js中定义IP 如

const baseUrl = "http://localhost:9999";

完成以上步骤就可以通过http-server实现本地代理进行跨域

三つの基本的なクロスドメインソリューションのフロントエンド

おすすめ