IIS部署React项目crossorigin跨域的处理_iis发布reacrt项目 cross origin isolation is not enable-优快云博客

本文链接：https://blog.youkuaiyun.com/zythy/article/details/124227039

本文详细介绍了如何将一个包含React、TypeScript和AntDesign的项目部署到WindowsServer2019的IIS上，并解决跨域问题。通过http-proxy-middleware在开发环境中设置代理，然后在IIS中利用URL重写和ARR代理实现生产环境的跨域配置。部署步骤包括Webpack打包、IIS网站部署、URL重写规则设置和启用ARR代理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

刚做完一个小的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客户端透明。