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

大功告成！