devServerを使用してクロスドメインの問題を解決する

現在、クロスドメインの主なソリューションは次のとおりです。

JSONPは（外の）
CORS
HTTPプロキシ
devServerがクロスドメインを解決するために導入され、ここで使用され、実際には、原則としては、httpプロキシです

すべてのajaxリクエストをdevServerサーバーに送信すると、devServerサーバーはそれを1回転送し、データインターフェースサーバーに送信します。

ajaxリクエストはdevServerサーバーに送信されるため、クロスドメインはありません。また、devServerはノードプラットフォームから送信されるhttpリクエストであるため、クロスドメインの問題は発生せず、完全に解決できます。

サーバーコード（文字列を返すだけ）：

const express = require（ 'express' ）
const app = express（）
 // const cors = require（ ' cors '）
// app.use（cors（）） 
app.get（ '/ api / getUserInfo'、（req、 res）=> { 
  res.send（{ 
    name： '黑马儿' 、
    age： 13 
  }）
}）; 

app.listen（ 9999、（）=> { 
  console.log（ 'http：// localhost：9999！' ）; 
}）;

フロントエンドは、devServerのプロキシ機能を構成し、webpack.dev.jsで構成する必要があります。

devServer：{ 
    open：true 、
    hot：true 、
    compress：true 、
    port： 3000 、
     // contentBase： './src' 
    proxy：{
       '/ api'： 'http：// localhost：9999' 
    } 
  }、

フロントエンドリクエスト/ api urlを意味する場合、webpack-dev-serverはリクエストをhttp：// localhost：9999 / apiに転送します。このとき、リクエストアドレスがhttp：// localhost：9999 / api / getUserInfoの場合のみ、 / api / getUserInfoを直接記述する必要があります。コードは次のとおりです。

axios.get（ '/ api / getUserInfo'）。then（result => console.log（result））