刚做完一个小的React项目，因为手上暂时只有现成的Windows Server 2019服务器，所以就准备将这个项目直接部署到IIS上去。
项目主要涉及以下相关技术：
React，TypeScript, Ant Design
ASP.NET Core Web API，SQL Server
因为涉及调用API时的跨域问题，所以开发过程中，用到了http-proxy-middleware这个组件。使用起来非常简单，在React项目的src目录下，新建一个setupProxy.js文件，内容如下：
// const { createProxyMiddleware } = require('http-proxy-middleware');
// module.exports = function (app) {
// app.use('/api',createProxyMiddleware(
// {
// target: 'http://x.x.x.x:8080',
// pathRewrite: {
// '^/api': '',
// },
// changeOrigin: true,
// secure: false,
// ws: false,
// }
// ));
// };
const proxy = require('http-proxy-middleware');
module.exports = function (app) {
app.use('/api',proxy.createProxyMiddleware(
{
target: 'http://x.x.x.x:8080',
pathRewrite: {
'^/api': '',
},
changeOrigin: true,
secure: false,
ws: false,
}
));
};
//以上两种写法，可能和http-proxy-middleware的版本有关；如果一种方式不行，就换另外一种axios中请求时，不用写域名，直接/api开头即可最终请求到上述target中定义的api地址。
axiosInstance.post("/api/user", data).then(res => {
resolve(res);
}, res => {
reject(res);
});假如React项目当前运行在 http://localhost:3000 地址上，上述代理的流程是这样的：
axios请求api地址为/api/user(即http://localhost:3000/api/user)，因为请求的地址和页面同属localhost:3000,所以不涉及跨域；然后代理中间件将该请求最终发送至 http://x.x.x.x:8080/user。
（跨域仅涉及浏览器请求模式，代理中间件的工作模式和浏览器是有差别的，所以中间件请求时不会涉及跨域）
以上配置在开发模式下工作正常，但是将项目部署到IIS后，代理中间件无法正常工作。此时，需要在服务器IIS端做必要的配置。
1）利用webpack打包后，将打包后的项目按常规网站部署到IIS中去。
2）IIS中配置路由重写规则。假定：
React项目地址是：http://10.10.10.10:8090
Web API项目地址是：http://10.10.10.10:8080
React中请求的地址是：http://10.10.10.10:8090/api/user, 最终我们需要的是请求到http://10.10.10.10:8080/user
a）下载安装IIS URL重写模块(如果已经安装请忽略)：https://www.iis.net/downloads/microsoft/url-rewrite
b)安装好以后，选中React站点，添加URL重写规则：
?
?
?
?c）启用ARR(应用程序请求路由)的代理
?
?
如果找不到ARR组件，可以下载安装。如下图：
?
?
?
?至此，IIS中的跨域配置就完成了。当React页面中请求的地址中包含/api/时，路由重写会匹配到，然后IIS将请求代理发送到最终的api接口，并返回结果。此过程对React客户端透明。
?
