2026年宝塔面板前后端跨域配置是前后端分离部署开发的常见操作，解决浏览器同源策略限制导致的接口请求失败问题。主流配置方案有Nginx反向代理、Nginx直接添加CORS响应头、后端代码处理三种，本回答将逐一拆解每种方案的具体步骤、适用场景及注意事项，帮助开发者快速完成配置。
2026年宝塔前后端跨域配置主流方案一：Nginx反向代理（推荐新手优先使用）
Nginx反向代理是将前后端域名或端口映射到同一访问入口，无需修改后端代码，兼容性极强。其核心原理是让浏览器误以为请求来自同一源（协议、域名、端口三者一致），避开同源策略检查。具体操作步骤如下：
1. 登录2026年最新版宝塔面板，进入左侧“网站”菜单，找到前端部署的站点（如www.example.com），点击右侧“设置”。
2. 在弹出的设置窗口中切换至“反向代理”选项卡，点击“添加反向代理”。
3. 填写代理参数：代理名称可设为“api_proxy”；目标URL填写后端服务的完整地址（需确保后端已在宝塔或其他服务器正常启动，如http://127.0.0.1:8080或http://api.example.com）；发送域名选择默认即可；路径匹配需设置为前端调用接口的统一前缀（如/api/，注意前缀前需加斜杠）。
4. 点击“提交”完成添加，最后点击“重载配置”使设置生效。
5. 修改前端代码中所有接口请求的基础URL，去掉后端原域名或端口，仅保留统一前缀（如原http://api.example.com/login改为/api/login）。
适用场景：前端静态资源与后端服务部署在同一宝塔服务器或不同服务器均可，无需掌握后端语言。注意事项：路径匹配需与前端接口调用的前缀严格一致，否则代理无效；若使用CDN加速前端，需在CDN后台同样设置反向代理规则。
2026年宝塔前后端跨域配置主流方案二：Nginx直接添加CORS响应头
该方案通过修改前端或后端站点的Nginx配置文件，添加允许跨域的HTTP响应头，无需反向代理或大幅调整代码。CORS是W3C在2014年发布的跨域资源共享标准，2026年仍是主流跨域解决方案之一。具体操作步骤如下：
1. 登录2026年最新版宝塔面板，进入左侧“网站”菜单，找到部署后端服务的站点（如api.example.com），点击右侧“设置”。
2. 在弹出的设置窗口中切换至“配置文件”选项卡，在server块内、location块外或指定的接口location块内添加以下代码：
```
add_header Access-Control-Allow-Origin ;
add_header Access-Control-Allow-Methods 'GET, POST, PUT, DELETE, OPTIONS';
add_header Access-Control-Allow-Headers 'Origin, X-Requested-With, Content-Type, Accept, Authorization';
add_header Access-Control-Allow-Credentials true;
if ($request_method = 'OPTIONS') {
return 204;
}
```
3. 若使用指定接口前缀的location块，需将代码放在该块内；若允许所有请求跨域，放在server块内即可。
4. 点击“保存”并“重载配置”使设置生效。
适用场景：需要精准控制跨域请求来源的场景（此时需将Access-Control-Allow-Origin的值改为具体的前端域名，而非）。注意事项：当Access-Control-Allow-Credentials设为true时，Access-Control-Allow-Origin不能使用，否则浏览器会报错；OPTIONS预检请求必须设置204无内容响应，否则部分复杂请求会失败。
2026年宝塔前后端跨域配置主流方案三：后端代码处理
该方案直接在后端代码中添加CORS响应头逻辑，不依赖Nginx配置，灵活性最高。不同后端语言的实现方式略有不同，以下以2026年主流的Node.js（Express框架）和PHP（ThinkPHP 8.0框架）为例：
1. Node.js Express框架实现：
安装cors中间件（2026年最新稳定版为4.1.2+）：在宝塔面板的后端站点“终端”中执行npm install cors。
在app.js或index.js文件中添加代码：
```
const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors({
origin: 'http://www.example.com', // 允许的前端域名
credentials: true
}));
```
2. PHP ThinkPHP 8.0框架实现：
在app/middleware.php文件中注册全局中间件，或在route/app.php中为指定路由组添加中间件，示例代码如下：
```
