react項目本地跨域（webpack+axios）

react項目本地跨域（webpack+axios）

react項目本地跨域（webpack+axios）

遇到一個需求：要去訪問內網裏另一個域名的後端接口，比如https://www.aaa.com的域名去訪問http://www.bbb.com。

一開始是這樣寫的

  axios({
    method: 'GET',
    url: 'http://www.bbb.com/user/xiaoming',
    data: {
      StaffSn: '4927493',
    },
  }).then((result) => {
    // 返回的結果
  }).catch((err) => {
    // 出錯了
  });

然後瀏覽器報錯 ：Mixed Content: The page at https://www.aaa.com’ was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint ‘http://www.bbb.com/user/xiaoming’. This request has been blocked; the content must be served over HTTPS.
報錯的原因是：https網站去訪問http網站，是不允許，被認爲不安全的。
搜了一下解決方法，網上推薦最多的解決方法是
在頁面中加入 meta 頭：

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />

或者

在我們服務器的響應頭中加入：

header("Content-Security-Policy: upgrade-insecure-requests");

就是讓瀏覽器自動升級請求，比如我們的頁面是 https 的，當頁面加載 http 開頭的資源時，自動替換成 https 請求。

但是！！上面的兩種方法是有侷限性的呀阿喂！
如果 http://www.bbb.com 本身 都不支持https。還有什麼用？

所以，，一番搜索以後，用了一個比較 靠譜😁 的方法（雖然過程中也遇到了坑），

使用webpack.devServer的proxy 配置
上代碼：
/webpack.config.js

devServer: {
	    proxy: {
		      '/apiTrans': {
			        target: 'http://www.bbb.com',
			        pathRewrite: { '^/apiTrans': '' },
			        changeOrigin: true,
			        secure: false,
	      		},
	      	},
	     },

前端請求數據的頁面這麼寫：

   axios({
    method: 'GET',
    url: '/apiTrans/user/xiaoming',
    data: {
      StaffSn: '4927493',
    },
  }).then((result) => {
    window.console.log('請求到了結果---', result);
  }).catch((err) => {
    window.console.log('err---', err);
  });

像上面這樣寫好以後，重新npm run start，跑一下webpack.config.js這個文件。

本以爲這樣就能跨域訪問到數據了，結果
中途遇到一個坑。

因爲瀏覽器Network控制檯報錯：
Request URL: https://127.0.0.1:8080/apiTrans/user/xiaoming

Cannot GET /apiTrans/user/xiaoming

原因是/webpack.config.js這個文件裏，已經在devServer.proxy裏面配置了 “/api”（我不知道里面有同事寫的這個/api匹配攔截）
碰巧的是我寫的"/apiTrans"和同事寫的"/api"都是api開頭，又碰巧的是他寫的這個在我上面（我是在proxy配置的最下面寫的），所以webpack去讀取devServer.proxy的時候，會按照順序從上往下依次匹配，所以遇到我以apiTrans開頭的請求接口，就會去走同事寫的那個"/api"配置。而不是走我"/apiTrans"的配置。所以就報錯嘍～
錯誤❌的代碼如下：

devServer: {
		proxy: {
	      "/api": {
	       	 	target: "http://localhost:8085",
	       		onProxyReq: function (proxyReq, req, res) {
	        	proxyReq.setHeader('x-forwarded-for', req.connection.remoteAddress);
	       }，
	       '/apiTrans': {
			    target: 'http://www.bbb.com',
			    pathRewrite: { '^/apiTrans': '' },
			    changeOrigin: true,
			    secure: false,
	      	},
	    }
}

正確🙋‍♂️的代碼如下：（改一下apiTrans這個匹配頭就好了）

devServer: {
		proxy: {
	      "/api": {
	       	 	target: "http://localhost:8085",
	       		onProxyReq: function (proxyReq, req, res) {
	        	proxyReq.setHeader('x-forwarded-for', req.connection.remoteAddress);
	       }，
	       '/userTrans': {
			    target: 'http://www.bbb.com',
			    pathRewrite: { '^/userTrans': '' },
			    changeOrigin: true,
			    secure: false,
	      	},
	    }
}

再npm run start ,再跑一次代碼。
發現這個跨域請求成功嘍！
出現
Request URL: https://127.0.0.1:8080/appp/json/reply/GetPsStaffProfile
Request Method: GET
Status Code: 200 OK

大功告成！