外贸站宝塔面板网站跨域请求API接口修复方案
问题现象与适用场景
外贸站经常需要前端页面向另一个域名或端口下的API接口发送请求，如果直接在浏览器访问，会看到控制台报错类似 Access-Control-Allow-Origin 缺失。
这个问题叫跨域（CORS），本质是浏览器安全策略限制了不同源之间的资源请求。
本文面向使用宝塔面板搭建的外贸站，教你通过修改Nginx或Apache配置文件来修复API接口的跨域问题。
准备工作：确认环境与接口信息
登录宝塔面板，先做三步检查：
- 确认Web服务器类型：在宝塔左侧点击“网站”，找到你的外贸站点，查看运行环境列是Nginx还是Apache。
- 确认API接口路径：例如接口地址是
https://api.yourdomain.com/v1/order，记录协议、域名和端口。 - 确认前端来源域名：比如前端页面部署在
https://www.yourstore.com，这个就是需要允许的源。
以上信息将直接用于配置跨域头。
核心操作：配置跨域响应头
情况一：Nginx 环境
- 在宝塔面板“网站”列表中点击站点对应的“设置”。
- 切换到“配置文件”标签页，找到
server块内location部分（或增加到最外层）。 - 在
location /或对应API路径的location块内，插入以下代码：
add_header Access-Control-Allow-Origin 'https://www.yourstore.com';
add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS, PUT, DELETE';
add_header Access-Control-Allow-Headers 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
# 处理预检请求（OPTIONS）
if ($request_method = 'OPTIONS') {
add_header Access-Control-Max-Age 86400;
add_header Content-Type 'text/plain charset=UTF-8';
add_header Content-Length 0;
return 204;
}注意：如果接口需要携带 Cookie 或 HTTP 认证，需额外增加add_header Access-Control-Allow-Credentials true;，且此时Origin必须使用具体域名，不能写*。
- 修改完成后点击“保存”，再点右上角“重载配置”或重启Nginx。
情况二：Apache 环境
- 在宝塔网站设置中找到“伪静态”或“配置文件”，一般使用
.htaccess。 - 在网站根目录下编辑
.htaccess文件（如果不存在可新建），添加以下内容：
Header set Access-Control-Allow-Origin "https://www.yourstore.com"
Header set Access-Control-Allow-Methods "GET, POST, OPTIONS, PUT, DELETE"
Header set Access-Control-Allow-Headers "DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization"
# 处理预检请求
RewriteEngine On
RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule ^(.*)$ $1 [R=204,L]- 保存文件，Apache会自动重载。如果未生效，在宝塔“服务”里重启Apache。
备用方案：PHP框架内设置
如果不想改服务器配置，也可以在API入口文件（如 index.php）开头添加：
header('Access-Control-Allow-Origin: https://www.yourstore.com');
header('Access-Control-Allow-Methods: GET, POST, OPTIONS');
header('Access-Control-Allow-Headers: Content-Type, Authorization');
if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
http_response_code(204);
exit;
}这种方案适合无服务器配置修改权限的虚拟主机。
常见踩坑与避坑说明
- 通配符
*与凭据冲突：使用Access-Control-Allow-Credentials: true时，Origin不能写*，必须写具体域名。否则浏览器会直接拦截。 - 预检请求未正确处理：如果前端发起了复杂请求（如自定义Header、PUT/DELETE），浏览器会先发 OPTIONS 预检。服务器必须返回
204且包含允许的Methods和Headers，否则正式请求不会发起。 - 宝塔面板版本差异：部分新版宝塔在配置文件里增加了“跨域”开关（在“网站”设置 > “反向代理”或“安全”选项卡），可以直接开启并填写域名，比手动改配置更简单。建议先检查是否有该功能。
- 多个前端域名：可以写多行
add_header，但更稳妥的做法是让后端程序动态判断来源域名后返回对应Origin。
验证修复是否生效
- 浏览器开发者工具：打开F12，点击“网络”标签，刷新前端页面，找到发往API的请求。查看响应头中是否包含
Access-Control-Allow-Origin: https://www.yourstore.com。 - curl 命令行测试：在服务器本地或任意终端执行：
curl -H "Origin: https://www.yourstore.com" -H "Access-Control-Request-Method: POST" -X OPTIONS -v https://api.yourdomain.com/v1/order观察返回的响应头是否包含预期的 Access-Control-Allow-Origin。
- 实际功能测试：在前端页面直接调用API，确认不再报跨域错误，并能正常获取数据。
如果仍不生效，可以回看宝塔面板的配置文件是否保存成功，或检查是否有其他中间件（如CDN）覆盖了跨域头。
按照本文步骤完整执行，绝大多数外贸站跨域问题都能解决。
