.NET(VueJS)部署IIS页面刷新时出现CORS错误求助

核心问题定位 #

从错误信息可以明确问题根源：

Access to XMLHttpRequest at 'localhost:55000/employees/getEmployees' from origin 'http://localhost:55000' has been blocked by CORS policy: Cross-origin requests are only supported for protocol schemes: chrome, chrome-extension, chrome-untrusted, data, http, https, isolated-app.

请求URL缺少http/https协议头，浏览器把localhost:55000识别成了自定义协议，而非标准的域名+端口组合，直接触发跨域拦截规则。

具体修复步骤 #

1. 修正前端Axios的基础URL配置

你的Axios请求使用了相对路径/employees，刷新页面时如果没有正确的baseURL兜底，会导致请求URL解析异常。

• 全局配置Axios的baseURL（可在Vue项目的main.js或封装的http工具类中设置）：

  import axios from 'axios'
  // 配置带完整协议的基础地址
  axios.defaults.baseURL = 'http://localhost:55000'
  // 若封装了$http实例，初始化时指定baseURL
  Vue.prototype.$http = axios.create({
    baseURL: 'http://localhost:55000'
  })
  

• 若使用Vue Router的history模式，需在IIS中配置URL重写规则，避免刷新时路由路径被当成静态资源请求，导致Axios相对路径解析错误。web.config中的重写规则示例：

  <rewrite>
    <rules>
      <rule name="Vue History Mode" stopProcessing="true">
        <match url=".*" />
        <conditions logicalGrouping="MatchAll">
          <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
          <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
        </conditions>
        <action type="Rewrite" url="/" />
      </rule>
    </rules>
  </rewrite>
  

2. 确认后端CORS配置的生效顺序

你的CORS策略代码逻辑没问题，但要确保在Startup的Configure方法中正确启用，且中间件顺序不能错：

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    // 其他中间件（如静态文件、异常处理）...
    app.UseRouting();
    
    // UseCors必须放在UseRouting之后、UseAuthorization之前
    app.UseCors(VUE_CORS);
    
    app.UseAuthorization();
    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllers();
    });
}

3. IIS部署的额外检查

• 确认IIS站点绑定的协议、域名、端口和前端配置的ClientAddress完全一致，避免协议不匹配（比如前端用http，IIS绑定了https）
• 禁用IIS自带的CORS模块，防止和.NET代码中的CORS配置冲突

为什么初始加载正常，刷新就报错？ #

初始加载时，页面从正确的入口地址加载，Axios的相对路径能基于当前页面的完整URL（带http协议）正确解析；但刷新页面时，浏览器直接请求当前路由路径（尤其是history模式下），如果没有正确的baseURL配置，相对路径会被解析成不带协议的地址，触发浏览器的CORS拦截。

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