react配置代理，解決跨域

方案1

//配置: package.json
"proxy":"https://xxxx.com"

問題： 只能代理一個服務器

 

方案二

利用客戶端代理中間件(http-proxy-middleware)完成,

官網給了新的使用方式，在src下新建文件setupProxy.js加下面代碼，

無需單獨應用，webpack會自動引入文件。

npm install http-proxy-middleware -S

文件內容

//verion < 1.0版本
const proxy = require('http-proxy-middleware'); //需要安裝中間件  
module.exports = function(app) {
  app.use(
    proxy("/api", {
      target: 'https://xxx.com',
      changeOrigin: true
    })
  );
  app.use(
    proxy("/v2", {
      target: "https://xxx2.com",
      changeOrigin: true
    })
  );
};

//組件： /api/xx ... | /v2/...

//verion > 1.0
const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {

  app.use('/api', createProxyMiddleware({
    target: 'http://localhost:3000',
    changeOrigin: true,
  }));

  app.use('/api2', createProxyMiddleware({
    target: 'http://xxx.com',
    changeOrigin: true,
    pathRewrite: { //路徑替換
      '^/api2': '/api', // axios 訪問/api2 == target + /api
    }
  }));

};

方案三

配置create-react-app環境下的webpack

無需安裝中間件

修改eject后的config目錄下的webpackDevServer.js配置文件

// config/webpackDevServer.js

proxy: {
  '/api2': {
    target: 'http://xxx.com', // 后台服務地址以及端口號
    ws: true, // websoket 服務
    changeOrigin: true, //是否跨域
    pathRewrite: { '^/api2': '/api' }
  }
}