在将Vue应用部署到IIS时，你是否遇到过开发环境正常但生产环境API请求404的问题？本文将分享两种实用的解决方案，帮你彻底解决这个困扰。
问题背景
最近在部署一个Vue + .NET Core前后端分离项目时，遇到了一个典型问题：
- 开发环境：Vue运行在8080端口，.NET Core API运行在5050端口，通过webpack dev-server代理，一切正常
- 生产环境：前后端都通过IIS部署后，前端API请求全部返回404
这个问题的核心在于：开发环境中的webpack代理配置在生产环境中无效，需要为IIS配置正确的请求转发机制。
解决方案一：配置IIS反向代理（推荐）
这是最优雅的解决方案，通过IIS的URL重写和ARR模块实现请求转发。
1. 安装必要模块
首先需要安装两个IIS模块：
- URL Rewrite Module：用于URL重写 URL Rewrite Module
- Application Request Routing (ARR) 3.0：用于反向代理 Application Request Routing (ARR)
可以从IIS官网下载这两个模块。
2. 启用ARR代理功能
安装完成后，在IIS管理器中：
- 选择服务器节点（非具体网站）
- 打开"Application Request Routing Cache"
- 点击"Server Proxy Settings"
- 勾选"Enable proxy"
- 应用设置
3. 配置URL重写规则
在前端站点的web.config文件中添加以下配置：
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<!-- 规则1: 将API请求代理到后端服务器 -->
<rule name="Proxy API requests" stopProcessing="true">
<match url="^api/(.*)" />
<action type="Rewrite" url="http://localhost:5050/{R:1}" />
</rule>
<!-- 规则2: Vue Router History模式支持 -->
<rule name="Vue Router 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="/index.html" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>配置说明
- 规则顺序很重要：API代理规则必须在Vue路由规则之前
^api/(.*)会匹配所有以/api/开头的请求{R:1}是正则表达式捕获组，代表api/后面的路径部分stopProcessing="true"确保匹配后不再执行后续规则
解决方案二：后端配置CORS
如果选择让前端直接请求后端地址，需要在后端配置CORS支持。
.NET Core 3.1 CORS配置
在Startup.cs文件中进行以下配置：
public class Startup
{
public void ConfigureServices(IServiceCollection services)
{
services.AddControllers();
// 添加CORS服务
services.AddCors(options =>
{
options.AddPolicy("AllowVueApp",
builder => builder
.WithOrigins("http://localhost:8080") // 前端地址
.AllowAnyHeader()
.AllowAnyMethod());
});
}
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
app.UseRouting();
// 使用CORS中间件
app.UseCors("AllowVueApp");
app.UseAuthorization();
app.UseEndpoints(endpoints =>
{
endpoints.MapControllers();
});
}
}关键点说明
WithOrigins()指定允许访问的前端域名AllowAnyHeader()允许所有请求头AllowAnyMethod()允许所有HTTP方法- 中间件顺序：
UseCors()必须在UseRouting()之后、UseEndpoints()之前
方案对比
| 方案 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|
| IIS反向代理 | 前端无需修改代码，统一域名，更安全 | 需要IIS额外配置 | 生产环境部署，企业级应用 |
| 后端CORS | 配置简单，开发灵活 | 需处理跨域问题，安全性考虑 | 开发阶段，简单项目 |
故障排除技巧
1. 检查请求流转
在浏览器开发者工具的Network面板中：
- 确认请求URL是否正确
- 检查HTTP状态码和响应头
- 验证请求是否被正确转发
2. 验证IIS配置
- 确认URL重写模块和ARR已正确安装
- 检查
web.config文件语法是否正确 - 确保应用程序池运行在集成模式
3. 测试连通性
- 确认后端服务在5050端口正常运行
- 检查防火墙是否允许端口通信
- 使用工具直接测试后端API可用性
最佳实践建议
- 环境区分：使用环境变量管理不同环境的API地址
- 错误处理：在前端添加统一的HTTP错误处理
- 日志记录：在IIS和后端启用详细日志以便排查问题
- 安全考虑：生产环境中不要使用
AllowAnyOrigin()，应明确指定允许的域名
总结
通过本文介绍的两种方案，你应该能够解决Vue应用在IIS部署中的API连接问题。IIS反向代理方案更适合生产环境，提供更好的安全性和一致性；后端CORS方案则更适合开发阶段或简单项目。
选择哪种方案取决于你的具体需求和技术栈特点。在实际项目中，我推荐使用IIS反向代理，因为它提供了更清晰的架构和更好的可控性。
Comments NOTHING