IIS服务器部署React前端与Express后端出现CORS错误如何解决？

核心问题原因 #

• OPTIONS预检请求被IIS拦截：你当前的fetch请求属于非简单请求，浏览器会自动先发OPTIONS预检请求校验跨域权限，IIS默认不会将OPTIONS请求转发到后端Express服务，也不会自动返回CORS相关响应头，直接导致前端触发CORS错误，和你配置的Access-Control-Allow-Origin值无关。
• CORS头配置冲突：如果你同时在IIS反向代理层和后端Express服务侧都配置了CORS响应头，两个重复的Access-Control-Allow-Origin头会被浏览器判定为无效，直接触发跨域错误。
• 响应头作用范围错误：如果你将CORS头配置在了前端80端口的站点配置中，而非8080端口对应的API反向代理站点配置中，请求8080端口的接口时不会携带你配置的CORS头。

具体解决步骤 #

步骤1：配置IIS放行OPTIONS预检请求 #

在8080端口对应站点的根目录下创建/修改web.config文件，添加以下配置：

<system.webServer>
  <handlers>
    <remove name="OPTIONSVerbHandler" />
  </handlers>
  <httpProtocol>
    <customHeaders>
      <add name="Access-Control-Allow-Origin" value="http://exampleIP" />
      <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
      <add name="Access-Control-Allow-Headers" value="Content-Type, Authorization" />
      <add name="Access-Control-Allow-Credentials" value="true" />
    </customHeaders>
  </httpProtocol>
  <rewrite>
    <!-- 你原来的反向代理规则保留在这里 -->
  </rewrite>
</system.webServer>

如果不需要传递Cookie等身份凭证，可以将Access-Control-Allow-Origin值设为*，同时删除Access-Control-Allow-Credentials配置项。

步骤2：避免CORS头重复配置 #

二选一保留一侧的CORS配置即可：

• 方案A：仅保留IIS侧的CORS头配置，注释/删除Express服务中的CORS中间件配置
• 方案B：仅保留Express侧的CORS配置，删除IIS侧所有Access-Control-开头的自定义响应头，同时确保Express的cors中间件origin配置为http://exampleIP（或匹配的通配规则）

步骤3：验证配置生效 #

打开浏览器F12控制台的网络面板，查看API请求的响应头，确认仅存在一个Access-Control-Allow-Origin头且值和前端站点地址匹配，OPTIONS预检请求的状态码为200/204。

内容的提问来源于stack exchange，提问作者Manuel