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

当服务器环境为 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:调整前端代码

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

javascript 复制代码
// 原跨域请求(错误)
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 方案一致)。

相关推荐
想唱rap14 分钟前
Linux指令(1)
linux·运维·服务器·笔记·新浪微博
字节高级特工19 分钟前
网络协议分层与Socket编程详解
linux·服务器·开发语言·网络·c++·人工智能·php
ObjectX前端实验室24 分钟前
【react18原理探究实践】scheduler原理之Task 完整生命周期解析
前端·react.js
ObjectX前端实验室34 分钟前
【react18原理探究实践】调度器(Scheduler)原理深度解析
前端·react.js
路漫漫心远41 分钟前
音视频学习笔记十八——图像处理之OpenCV检测
前端
摸着石头过河的石头1 小时前
从零开始玩转前端:一站式掌握Web开发基础知识
前端·javascript
sniper_fandc1 小时前
关于Mybatis-Plus的insertOrUpdate()方法使用时的问题与解决—数值精度转化问题
java·前端·数据库·mybatisplus·主键id
minji...1 小时前
Linux 权限的概念及shell命令运行原理
linux·运维·服务器
10岁的博客2 小时前
技术博客SEO优化全攻略
前端
南屿im2 小时前
别再被引用坑了!JavaScript 深浅拷贝全攻略
前端·javascript