Nginx を使用してクロスドメイン Vue 開発環境を処理する方法

1. 需要

正しい Cookie 配信と SSO テストを確実に実行できるように、ローカル テスト ドメイン名はオンライン ドメイン名と同じです。

注: SSO ログイン後、関連する Cookie が第 4 レベルのドメイン名に追加されるため、ローカル テスト ドメイン名とオンライン インターフェイス ドメイン名は同じである必要があります。

2. 解決策

オンライン ドメイン名を Localhost にポイントするようにホスト ファイルを構成します。

127.0.0.1 product.xxx.xxx.com

対応する転送用に Nginx を設定します。

サーバー{
  聞く 80;
  聞く [::]:80;
  サーバー名 ${product.xxx.xxx.com};

  場所 /api {
    プロキシパス https://${ip.ip.ip.ip};
    proxy_set_header ホスト $host;
  }

  位置 / {
    proxy_pass http://localhost:8080;
    proxy_set_header ホスト $host;
  }  
}

無効なホスト ヘッダー エラーを回避するには、vue.config.js を設定します。

{
  開発サーバー: {
    ホストチェックを無効にする: true
  }
}

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。