当前位置：首页 > news >正文

服务器都是用的iis，前端部署后报跨域，不是用同一个服务器是前端项目的服务器做Nginx转发，还是后端项目的服务器做Nginx转发？

news 2025/9/11 5:31:38

当服务器环境为 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；
保存规则，重启站点。

优势：无转发损耗，前端直接请求后端（如 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）；
  勾选「停止处理后续规则」（避免其他规则干扰）；
保存规则，重启前端站点。

步骤3：调整前端代码

前端请求地址从「后端域名」改为「前端同源路径」：

// 原跨域请求（错误）
axios.get('http://backend-server.com/api/user')// 调整后（通过前端 IIS 转发）
axios.get('/api/user') // 实际请求 http://frontend-server.com/api/user，由 IIS 转发到后端

优势：无需修改后端配置，适合后端不可控场景（如调用第三方接口），且能隐藏后端真实地址。