当服务器环境为 IIS(而非 Nginx),且前端、后端部署在不同服务器导致跨域时,核心思路与 Nginx 场景一致,但实现工具从「Nginx」替换为「IIS 配置」。此时依然存在 “后端服务器配置跨域头” 和 “前端服务器配置反向代理” 两种方案,无需额外引入 Nginx(除非你主动选择在 IIS 前端叠加 Nginx)。
一、核心方案对比(IIS 环境)
方案 | 实现方式 | 适用场景 | 推荐优先级 |
---|---|---|---|
后端 IIS 配置跨域头 | 在后端服务器的 IIS 中,通过「HTTP 响应头」或「URL 重写模块」添加 Access-Control-* 头,允许前端域名请求 |
1. 有权限修改后端 IIS 配置 2. 多个前端项目共用同一后端 3. 希望减少转发损耗(前端直接请求后端) |
★★★★★ |
前端 IIS 配置反向代理 | 在前端服务器的 IIS 中,通过「URL 重写模块」配置代理,将前端请求转发到后端(前端请求同源地址,规避跨域) | 1. 无权修改后端配置(如第三方接口) 2. 需隐藏后端真实地址(安全需求) 3. 后端不支持直接配置跨域头 |
★★★☆☆ |
二、详细实现步骤(IIS 环境)
方案1:后端 IIS 直接配置跨域头(推荐)
原理:通过后端 IIS 向前端返回「允许跨域」的响应头(如 Access-Control-Allow-Origin
),浏览器识别后允许跨域请求,无需转发。
前提:后端 IIS 需安装「URL 重写模块」(处理预检请求 OPTIONS
,可选但建议安装,IIS 管理器可直接搜索安装)。
步骤1:添加跨域响应头(基础配置)
- 打开「后端服务器 IIS 管理器」→ 选中后端站点(如
BackendSite
)→ 双击「HTTP 响应头」; - 点击右侧「添加」,依次添加以下头(根据需求调整):
响应头名称 值(示例) 说明 Access-Control-Allow-Origin
http://frontend-server.com
(前端服务器域名)允许的前端域名,不能用 *
(否则无法携带 Cookie)Access-Control-Allow-Methods
GET,POST,PUT,DELETE,OPTIONS
允许的请求方法 Access-Control-Allow-Headers
Content-Type,Authorization
允许的请求头(如 Token、Content-Type) Access-Control-Allow-Credentials
true
允许跨域携带 Cookie(如需) Access-Control-Max-Age
3600
预检请求缓存时间(减少 OPTIONS
请求次数)
步骤2:处理预检请求(OPTIONS
请求)
跨域请求前,浏览器会先发 OPTIONS
预检请求验证权限,需后端 IIS 正确响应(否则请求失败):
- 选中后端站点 → 双击「URL 重写」→ 点击右侧「添加规则」→ 选择「空白规则」;
- 配置规则:
- 匹配 URL:模式
.*
(匹配所有路径),使用「正则表达式」; - 条件:添加条件 → 条件输入
{REQUEST_METHOD}
,模式^OPTIONS$
(仅匹配OPTIONS
请求); - 操作:操作类型选择「自定义响应」,状态代码
204
(无内容,成功响应),状态文本No Content
;
- 匹配 URL:模式
- 保存规则,重启站点。
优势:无转发损耗,前端直接请求后端(如 http://backend-server.com/api/user
),性能最优,配置一次生效。
方案2:前端 IIS 配置反向代理(后端不可控时用)
原理:前端代码请求「与自身同源的地址」(如 http://frontend-server.com/api/user
),由前端 IIS 将该请求「转发」到后端服务器(如 http://backend-server.com/api/user
)。浏览器认为是同源请求,规避跨域。
前提:前端 IIS 需安装「URL 重写模块」和「应用请求路由(ARR)」(ARR 是 IIS 实现反向代理的核心模块,可通过 IIS 管理器或微软官网下载)。
步骤1:启用 ARR 代理
- 打开「前端服务器 IIS 管理器」→ 点击左侧服务器名称(如
WIN-XXXX
)→ 双击「应用请求路由缓存」; - 点击右侧「服务器代理设置」→ 勾选「启用代理」→ 保存(若提示“需要 URL 重写模块”,先安装该模块)。
步骤2:配置 URL 重写规则(转发请求)
- 选中前端站点(如
FrontendSite
,需先部署前端打包文件,如dist
目录)→ 双击「URL 重写」→ 「添加规则」→「空白规则」; - 配置规则(以转发
/api/
路径为例):- 匹配 URL:
模式^api/(.*)
(匹配所有以/api/
开头的路径,如/api/user
),使用「正则表达式」; - 条件(可选):无需额外条件;
- 操作:
操作类型选择「重写」,重写 URL 填写http://backend-server.com/api/{R:1}
({R:1}
是正则捕获的路径,如/user
);
勾选「停止处理后续规则」(避免其他规则干扰);
- 匹配 URL:
- 保存规则,重启前端站点。
步骤3:调整前端代码
前端请求地址从「后端域名」改为「前端同源路径」:
// 原跨域请求(错误)
axios.get('http://backend-server.com/api/user')
// 调整后(通过前端 IIS 转发)
axios.get('/api/user') // 实际请求 http://frontend-server.com/api/user,由 IIS 转发到后端
优势:无需修改后端配置,适合后端不可控场景(如调用第三方接口),且能隐藏后端真实地址。
三、总结
- 优先选方案1:若能修改后端 IIS 配置,直接添加跨域头是最直接、高效的方式,无转发损耗;
- 备选方案2:若后端不可控(如第三方接口),再用前端 IIS 配置反向代理,需注意调整前端请求路径。
两种方案均基于 IIS 原生功能实现,无需额外引入 Nginx(除非你有特殊需求,如在 IIS 前端叠加 Nginx 做负载均衡,但此时配置逻辑与前文 Nginx 方案一致)。