React+TS+Vite对接.NET后端IIS部署时的CORS问题求助

核心问题分析 #

你的IIS CORS配置存在冲突：Access-Control-Allow-Origin: * 和 Access-Control-Allow-Credentials: true 不能同时生效——浏览器安全机制禁止这种组合，这是导致CORS报错的主要原因。另外，带Content-Type: application/json的POST请求属于非简单请求，浏览器会先发OPTIONS预检请求，若IIS未正确响应也会触发CORS错误。

具体解决步骤 #

1. 修正IIS的CORS配置

根据是否需要携带凭证（如Cookie、HTTP认证信息），二选一调整配置：

情况A：不需要携带凭证

删掉Access-Control-Allow-Credentials配置，保留通配符Origin：

<httpProtocol>
  <customHeaders>
    <add name="Access-Control-Allow-Origin" value="*" />
    <add name="Access-Control-Allow-Headers" value="Content-Type" />
    <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
    <!-- 移除或注释凭证允许配置 -->
    <!-- <add name="Access-Control-Allow-Credentials" value="true" /> -->
  </customHeaders>
</httpProtocol>

情况B：需要携带凭证

将Access-Control-Allow-Origin设置为前端实际域名（比如Vite默认的http://localhost:5173），不能用*：

<httpProtocol>
  <customHeaders>
    <add name="Access-Control-Allow-Origin" value="http://localhost:5173" />
    <add name="Access-Control-Allow-Headers" value="Content-Type" />
    <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
    <add name="Access-Control-Allow-Credentials" value="true" />
  </customHeaders>
</httpProtocol>

2. 确保IIS正确响应OPTIONS预检请求

非简单请求会触发OPTIONS预检，需保证IIS返回200状态码。可在web.config中添加OPTIONS请求处理规则：

<system.webServer>
  <handlers>
    <add name="OPTIONSVerbHandler" path="*" verb="OPTIONS" modules="ProtocolSupportModule" resourceType="Unspecified" requireAccess="None" />
  </handlers>
</system.webServer>

更推荐的方式是安装IIS官方的CORS模块（通过Web平台安装程序），可视化配置允许的来源、方法和headers，避免手动配置出错。

3. 调整前端请求代码（按需）

如果后端配置了允许携带凭证，前端Fetch请求需要添加credentials: 'include'：

async function httpPostRequest<T = any>(url: string, data: object): Promise<T> {
  try {
      const response = await fetch(url, {
          method: 'POST',
          credentials: 'include', // 仅当需要带凭证时添加
          headers: {
              'Content-Type': 'application/json',
          },
          body: JSON.stringify(data),
      });
      if (!response.ok) {
          throw new Error(`HTTP error! Status: ${response.status}`);
      }

      return await response.json();
  } catch (error) {
      throw error;
  }
}

4. 验证排查

打开浏览器开发者工具Network面板：

• 查看OPTIONS请求的响应头，确认Access-Control-Allow-Origin与配置一致，无冲突项；
• 检查POST请求的响应头是否包含正确的CORS字段；
• 若仍报错，查看控制台的具体错误信息，定位是Origin不允许、headers不支持还是预检请求失败。

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