vue でクロスドメイン問題 (CORS) を解決する方法

Vue でクロスドメインの問題を解決するには、複数の方法があります。一般的な方法をいくつか示します。

1. プロキシサーバー: 開発環境では、API リクエストを転送し、ブラウザーの同一オリジンポリシーをバイパスするようにプロキシサーバーを構成できます。http-proxy-middlewareミドルウェアなどを使用してプロキシ構成を実装できます。vue.config.jsファイル内で設定します。例は次のとおりです。

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://api.example.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

上記の設定では、/apiで始まるすべてのリクエストが転送されますhttp://api.example.com。

上記の例では、次のように pathRewrite を記述する必要はありません。

    devServer: {
      open: true,
      port: 8080,
      // headers: {},
      host: 'test.meditrusthealth.com',
      disableHostCheck: true,
      https: true,
      proxy: {
        "/gwkf": {  // "/gwky" 是后端的服务名，地址后端以它为开头的
          target: "https://baidu.com/", //你需要访问的网址 
          changeOrigin: true,
        },
         // 像这种可以配置多个，后端会有多个服务名的情况
         // 首先我们需要获取到后端的服务名，就是需要代理的服务名，这个我们可以通过swagger，来找到
         // 第二点，我们需要找到请求路径，如果是测试环境(开发环境)，就用测试环境、生产环境就用生产环境的路径。
         // 然后就在target里面，添加上域名就可以了
         // changeOrigin 要为true，意思就是：当进行代理时，Host 的源默认会保留
        // （即Host是浏览器发过来的host），
        // 如果将changeOrigin设置为true，则host会变成target的值；在vue-cli3中，
        // 默认changeOrigin的值是true，意味着host设置成target，这与cue-cli2不一致，
        // vue-cli2这个默认值是false。

        "fast-admin": {
          target: "https://test-analysis.com/",
          changeOrigin: true,
        },

        "fast-service": {
          target: "https://test-analysis.com/",
          changeOrigin: true,
        },

        "mth-core-service": {
          target: "https://test-masterdata.com/",
          changeOrigin: true,
        },

        "mth-core-admin": {
          target: "https://test-masterdata.com/",
          changeOrigin: true,
        },

        "mth-capital-service": {
          target: "https://test-analysis.com/",
          changeOrigin: true,
        },


        '/fast-provide': {
          target: 'https://test-mobile.com', 
          secure: false,
          changOrigin: true,
          logLevel: 'debug'
        },
      }
    },

2. JSONP: バックエンドが JSONP クロスドメインリクエストをサポートしている場合、Vue の JSONP ライブラリ ( などvue-jsonp) を使用してクロスドメインリクエストを送信できます。

3. CORS: バックエンドサービスは、特定のソース (ポートやプロトコルを含む) がインターフェイスにアクセスできるように、応答に適切な CORS ヘッダー情報を設定します。Vue でクロスドメインリクエストを直接開始すると、バックエンドがクロスドメインの問題を処理します。

4. WebSocket: Vue で WebSocket をサポートするサーバーとクロスドメイン通信する必要がある場合は、WebSocket API を使用して接続および通信できます。WebSocket は同一生成元ポリシーの対象ではありません。

上記の方法は、開発環境におけるクロスドメインの問題を解決するのに適していることに注意してください。運用環境では、セキュリティを確保するためにバックエンドによって適切なクロスドメインポリシーを構成する必要があります。

特定の状況に基づいて適切なソリューションを選択してください。より詳細な手順やコード例が必要な場合は、より具体的な質問やシナリオを提供してください。

追加の質問です。フロントエンドは運用環境におけるクロスドメインの問題をどのように解決しますか?

実稼働環境では、ブラウザーの同一オリジンポリシーによってクロスドメインアクセスが制限されているため、フロントエンドでクロスドメインの問題を解決する方法は限られています。以下に考えられる方法をいくつか示します。

バックエンドプロキシ経由: 運用環境では、バックエンドサーバー経由でクロスドメインリクエストを行うことができます。フロントエンドは同じドメイン内のバックエンドインターフェイスにリクエストを送信し、バックエンドサーバーはターゲットインターフェイスにプロキシします。このように、フロントエンドリクエストは同一生成元ポリシーに従い、クロスドメインの問題を引き起こすことはありません。
CORS (Cross-Origin Resource Sharing): バックエンドインターフェイスを制御する権限がある場合は、バックエンドに CORS ヘッダー情報を設定して、特定のソース (ポートやプロトコルを含む) がインターフェイスにアクセスできるようにすることができます。応答に適切な CORS ヘッダーを設定すると、ブラウザーはフロントエンドへのクロスドメインアクセスを許可します。
JSONP (GET リクエストのみ): バックエンドが JSONP をサポートしている場合、JSONP を使用してクロスドメインリクエストを行うことができます。<script>JSONP は、タグが同一生成元ポリシーによって制限されないという事実を利用し、<script>フロントエンドで動的にタグを作成してクロスドメインインターフェイスを要求します。

運用環境では、セキュリティとクロスドメインの制限により、不必要なセキュリティリスクを回避するために、クロスドメインリクエストの送信元と宛先を制限する必要があることに注意してください。バックエンド開発者と協力して、特定のニーズとセキュリティポリシーに基づいて適切なソリューションを選択してください。

vue でクロスドメイン問題 (CORS) を解決する方法

おすすめ