小皮面板如何设置网站跨域访问

学完这篇，你能在小皮面板（phpStudy / 小皮面板 Linux 版）上给自己的站点正确加上跨域响应头，让前端页面顺利调通后端接口，而不是靠浏览器插件硬扛。

第一步：先确认你的站点跑的是 Nginx 还是 Apache

这一步要确定改哪个配置文件，因为两者的跨域写法完全不同。

Windows 小皮面板（phpStudy v8）：打开面板首页，中间「环境」区域会显示已安装的服务器，例如 Nginx 1.15.11 或 Apache 2.4.39；也可以点左侧菜单「网站」，看站点列表的「类型」列。

Linux 小皮面板：点左侧「网站」，在站点列表里点站点名，弹出的站点设置窗口顶部会显示「Nginx」或「Apache」。

第二步：找到站点的配置文件入口

这一步要定位到实际存放该站点配置的文件，后面所有修改都在这里做。

Windows 小皮面板：左侧「网站」→ 找到你的域名那一行 → 点右侧「管理」按钮 → 选「修改」→ 在弹出窗口里切到「配置文件」标签，这里就是可编辑的配置内容。文件实际路径通常是 phpstudy_pro\Extensions\Nginx1.15.11\conf\vhosts\你的域名.conf。

Linux 小皮面板：「网站」→ 站点右侧「设置」→「配置文件」（部分版本叫「网站配置」）。文件实际路径通常是 /www/server/panel/vhost/nginx/你的域名.conf。

第三步：在 Nginx 站点配置里加跨域头

这一步做完，浏览器就会在响应里看到 CORS 头，跨域请求不再被拦。

在 server { } 块内、location 之外添加：

    add_header Access-Control-Allow-Origin $http_origin always;
    add_header Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS" always;
    add_header Access-Control-Allow-Headers "Content-Type, Authorization, X-Requested-With" always;
    add_header Access-Control-Allow-Credentials "true" always;

    if ($request_method = OPTIONS) {
        return 204;
    }

带 Cookie 的请求必须用 Access-Control-Allow-Credentials: true 配 $http_origin 回显来源，不能用 *。想限制只允许自己的域名，在 nginx.conf 的 http { } 块里加白名单：

map $http_origin $cors_allow {
    default "";
    "~^https?://(www\.)?example\.com$" $http_origin;
}

然后把上面的 $http_origin 换成 $cors_allow。Windows 版 nginx.conf 在 phpstudy_pro\Extensions\Nginx1.15.11\conf\nginx.conf，Linux 版在 /www/server/nginx/conf/nginx.conf。

注意：add_header 写在 location 里会覆盖 server 层的同名指令，如果你在 location 里又写了 add_header，跨域头可能就丢了，建议统一放在 server 层。

注意：OPTIONS 预检请求必须在鉴权、rewrite 之前返回 204，否则带 Authorization 头的请求会先被拦成 401 或 404，浏览器直接报 CORS 错误。

第四步：保存并重载服务

这一步让配置生效，不重载则改动不会起作用。

Windows 小皮面板：在「配置文件」窗口点「保存」，然后回首页，在 Nginx 那一行点「重启」；或点「网站」页面右上角的「重载配置」。

Linux 小皮面板：点「保存」后一般会自动重载。若不确定，用终端执行：

/www/server/nginx/sbin/nginx -t && systemctl reload nginx

nginx -t 显示 syntax is ok 和 test is successful 才算配置没写错。

第五步：Apache 站点的改法

如果站点类型是 Apache，改法不同。在站点配置文件（第二步的入口）的 <VirtualHost> 块内加入：

Header set Access-Control-Allow-Origin "https://www.example.com"
Header set Access-Control-Allow-Methods "GET, POST, OPTIONS"
Header set Access-Control-Allow-Headers "Content-Type, Authorization"
Header set Access-Control-Allow-Credentials "true"

注意：Apache 必须先加载 mod_headers 模块，否则这些指令会直接报错。Windows 小皮面板：首页 Apache 那行点「管理」→「模块」，勾选 headers_module 后重启；或在 httpd.conf 里取消 LoadModule headers_module 前面的 #。

第六步：不想动配置，就用 PHP 输出头

临时调试或没有服务器配置权限时，在接口入口文件最顶部加：

header('Access-Control-Allow-Origin: https://www.example.com');
header('Access-Control-Allow-Methods: GET, POST, OPTIONS');
header('Access-Control-Allow-Headers: Content-Type, Authorization');
header('Access-Control-Allow-Credentials: true');
if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') { http_response_code(204); exit; }

注意：header() 之前不能有任何输出，包括文件开头的空行和 UTF-8 BOM，否则报 headers already sent。同时不要再在 Nginx 里重复加同名头，两边都加会出现重复响应头。

第七步：验证是否生效

浏览器按 F12 → Network → 刷新页面 → 点那条接口请求 → 看 Response Headers 里有没有 Access-Control-Allow-Origin。命令行验证：

curl -I -H "Origin: https://www.example.com" http://你的域名/index.php

响应中出现跨域头即配置成功。

小结

• 先分清站点是 Nginx 还是 Apache，改的配置文件和语法都不一样。
• Nginx 用 add_header，OPTIONS 请求返回 204；Apache 用 Header set 且需 mod_headers。
• 带 Cookie 时不能用 *，要用 $http_origin 回显来源，并用 map 做白名单。
• PHP 方式适合临时调试，注意 header() 前不能有输出。
• 改完必须重载或重启服务，用 nginx -t 和浏览器 F12 双重验证。