Vue はクロスドメインを解決するためにプロキシを設定します

        フロントエンドとバックエンドが分離されているプロジェクトでは、クロスドメインの問題がよく発生します。クロスドメインの問題を解決するには、プロキシを設定します。

方法 1

        vue プロジェクトの vue.config.js (package.json と同じレベル) ファイルで構成します。

module.exports = defineConfig({
  devServer: {
    proxy: 'http://47.100.232.228:3000'
  }
})

        設定できるバックエンド アドレスは 1 つだけです。

方法 2

        プロジェクトが複数のアドレスを要求する場合は、vue.config.js ファイルで構成します。

module.exports = defineConfig({
  devServer: {
    proxy: {
      '/api': {
        target: 'http://47.100.232.228:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      },
      '/api1': {
        target: 'http://47.100.232.228:5000',
        changeOrigin: true,
        pathRewrite: {
          '^/api1': ''
        }
      }
    }
  }
})

        target はターゲット アドレス、pathRewrite は書き換えアドレスです。

        バックエンドインターフェースをリクエストする場合、バックエンドインターフェースのパスも変更する必要があります。

        たとえば、元のリクエスト インターフェイス パスは http://47.100.232.228:3000/login です。

        プロキシを設定した後、http://localhost:8080/api/login というプレフィックスを追加する必要があります。

このマシンではできるだけ localhost を使用してください。127.0.0.1 ではアクセスできない場合があります。