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

发布于:2025-09-11 ⋅ 阅读:(16) ⋅ 点赞:(0)

当服务器环境为 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:添加跨域响应头(基础配置)
  1. 打开「后端服务器 IIS 管理器」→ 选中后端站点(如 BackendSite)→ 双击「HTTP 响应头」;
  2. 点击右侧「添加」,依次添加以下头(根据需求调整):
    响应头名称 值(示例) 说明
    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 正确响应(否则请求失败):

  1. 选中后端站点 → 双击「URL 重写」→ 点击右侧「添加规则」→ 选择「空白规则」;
  2. 配置规则:
    • 匹配 URL:模式 .*(匹配所有路径),使用「正则表达式」;
    • 条件:添加条件 → 条件输入 {REQUEST_METHOD},模式 ^OPTIONS$(仅匹配 OPTIONS 请求);
    • 操作:操作类型选择「自定义响应」,状态代码 204(无内容,成功响应),状态文本 No Content
  3. 保存规则,重启站点。

优势:无转发损耗,前端直接请求后端(如 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 代理
  1. 打开「前端服务器 IIS 管理器」→ 点击左侧服务器名称(如 WIN-XXXX)→ 双击「应用请求路由缓存」;
  2. 点击右侧「服务器代理设置」→ 勾选「启用代理」→ 保存(若提示“需要 URL 重写模块”,先安装该模块)。
步骤2:配置 URL 重写规则(转发请求)
  1. 选中前端站点(如 FrontendSite,需先部署前端打包文件,如 dist 目录)→ 双击「URL 重写」→ 「添加规则」→「空白规则」;
  2. 配置规则(以转发 /api/ 路径为例):
    • 匹配 URL
      模式 ^api/(.*)(匹配所有以 /api/ 开头的路径,如 /api/user),使用「正则表达式」;
    • 条件(可选):无需额外条件;
    • 操作
      操作类型选择「重写」,重写 URL 填写 http://backend-server.com/api/{R:1}{R:1} 是正则捕获的路径,如 /user);
      勾选「停止处理后续规则」(避免其他规则干扰);
  3. 保存规则,重启前端站点。
步骤3:调整前端代码

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

// 原跨域请求(错误)
axios.get('http://backend-server.com/api/user')

// 调整后(通过前端 IIS 转发)
axios.get('/api/user') // 实际请求 http://frontend-server.com/api/user,由 IIS 转发到后端

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

三、总结

  1. 优先选方案1:若能修改后端 IIS 配置,直接添加跨域头是最直接、高效的方式,无转发损耗;
  2. 备选方案2:若后端不可控(如第三方接口),再用前端 IIS 配置反向代理,需注意调整前端请求路径。

两种方案均基于 IIS 原生功能实现,无需额外引入 Nginx(除非你有特殊需求,如在 IIS 前端叠加 Nginx 做负载均衡,但此时配置逻辑与前文 Nginx 方案一致)。


网站公告

今日签到

点亮在社区的每一天
去签到