フロントエンドとバックエンドの分離プロジェクトにおけるクロスドメインの問題の解決策

フロントエンドとバックエンドの分離プロジェクトにおけるクロスドメインの問題の解決策

	開発環境	本番環境
舞台裏のリーダー	CORS	CORS
フロントエンドの優位性	プロキシプロキシ	nginxプロキシ

vue.config.js

module.exports = {
    
    
  devServer: {
    
    
    proxy: "后台接口地址"
  }
}

プロキシを構成した後、リクエストインターフェイスのアドレスは現在のフロントエンドサービスのアドレスである必要があります

http：// localhost：3000-> http：// localhost：8080

自分のアドレスを要求したいので、/を書き込むためにlocalhost：8080を直接書き込む必要はありません。

http：// localhost：8080 / api / Banners-> / api / Banners

プロキシを使用する場合、対応するインターフェイスアドレスを構成するために.envを使用する必要はありません。環境に関係なく、現在のフロントエンドサーバーアドレスが要求されるため

CORSを使用する場合は、ビルド中に.envに従って、さまざまな環境でサーバーアドレスを要求する必要があります。プロキシを使用する場合は、さまざまなアドレスを構成する必要はありません。すべてが次/api/xxxの形式になっています。

バックグラウンドでCORSを構成する

フロントエンドは、axios構成でbaseURLを構成する必要があります。前提条件は、最初に.env環境変数ファイルを構成する必要があります

.env.development

開発環境用のenvファイルを作成します

VUE_APP_BASEURL=http://开发环境接口地址

.env.production

実稼働環境用のenvファイルを作成します

VUE_APP_BASEURL=http://生产环境接口地址

axiosを構成する

const _axios = axios.create({
    
    
  baseURL: process.env.VUE_APP_BASEURL
})

サーバープロキシ

プロキシを使用する場合、すべてのリクエストが送信されるフロントエンドサービス（プロキシ）のため、フロントエンドでBASEURLを構成する必要はありません。

インターフェイスアドレスは、「/ xxx」関連のコンテンツを直接書き込むことができます

開発環境の構成

vue.config.js

舞台裏が1つしかない場合

module.exports = {
    
    
  devServer: {
    
    
    
    proxy: "http://开发环境后台地址",
  }
}

複数のバックグラウンドインターフェイスがある場合

module.exports = {
    
    
  devServer: {
    
    
    proxy: {
    
    
      "/自定义前端请求时前缀": {
    
    
        target: "http://开发环境后台地址",
        pathRewrite: {
    
    
          "^/自定义前端请求时前缀": "/后台真实前缀"
        }
      },

      "/自定义前端请求时前缀": {
    
    
        target: "http://开发环境后台地址",
        pathRewrite: {
    
    
          "^/自定义前端请求时前缀": "/后台真实前缀"
        }
      }
    }
  }
}

リクエストする場合、axiosのbaseURLを設定したり、ドメイン名を追加したりする必要はありません。

生産中

ビルド後、nodejsサーバーはなくなり、静的ページのみになります（プロキシ設定は開発環境でのみ使用できます）

実稼働環境ではnginxを構成する必要があります

server {
  listen       80;
  server_name  localhost;

  #charset koi8-r;

  #access_log  logs/host.access.log  main;

  location / {
    root   html;
    # 只能有一个
    # 没有使用history 
    index  index.html index.htm;
    # 使用了history
    try_files $uri $uri/ /index.html;

  }

  # 配置代理
  location /服务器前缀 {
    proxy_pass http://要代理的服务器地址（生产服务器地址）;
  }

  # 配置代理 需要进行rewrite
  location /前端请求的前缀 {
    rewrite  ^/前端请求前缀/(.*)$ /后台接口真实前缀/$1 break;
    proxy_pass http://要代理的服务器地址（生产服务器地址）;
  }
  

  error_page   500 502 503 504  /50x.html;
  location = /50x.html {
      root   html;
  }
}