宝塔Nginx跨域配置教程

在宝塔面板中配置 Nginx 跨域(CORS)的步骤如下:


方法一:通过宝塔面板界面配置

1.登录宝塔面板

打开宝塔面板,进入「网站」模块。

2.找到目标网站

点击需要配置跨域的网站右侧的「设置」按钮。

3.修改配置文件

进入「配置文件」标签页,在 serverlocation 块中添加以下跨域配置:

# 允许跨域请求
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';

# 处理 OPTIONS 预检请求
if ($request_method = 'OPTIONS') {
 return 204;
}
  • 允许所有域名跨域:使用 Access-Control-Allow-Origin *
  • 允许特定域名:替换 * 为域名,例如 https://example.com

4.保存并重启Nginx

点击「保存」,然后重启 Nginx 服务。


方法二:直接修改 Nginx 配置文件

1.定位配置文件

配置文件通常位于
/www/server/panel/vhost/nginx/你的网站域名.conf

2.编辑配置文件

serverlocation 块中添加跨域配置(同上)。

3.检查语法并重启

nginx -t # 检查配置语法
systemctl restart nginx # 重启 Nginx

高级配置示例

server {
    listen 80;
    server_name example.com;

    location / {
        # 基础跨域配置
        add_header Access-Control-Allow-Origin $http_origin;
        add_header Access-Control-Allow-Methods 'GET, POST, PUT, DELETE, OPTIONS';
        add_header Access-Control-Allow-Headers 'Content-Type, Authorization';
        add_header Access-Control-Allow-Credentials true;

        # 处理 OPTIONS 预检请求
        if ($request_method = 'OPTIONS') {
            add_header Access-Control-Allow-Origin $http_origin;
            add_header Access-Control-Allow-Methods 'GET, POST, PUT, DELETE, OPTIONS';
            add_header Access-Control-Allow-Headers 'Content-Type, Authorization';
            add_header Access-Control-Max-Age 1728000;
            add_header Content-Type 'text/plain; charset=utf-8';
            add_header Content-Length 0;
            return 204;
        }

        # 其他配置...
    }
}

注意事项

安全性

  • 生产环境建议明确指定允许的域名(如 Access-Control-Allow-Origin https://example.com),避免使用 *
  • 如需携带 Cookie,需设置 Access-Control-Allow-Credentials true,且 Access-Control-Allow-Origin 不能为 *

缓存优化

通过 Access-Control-Max-Age 减少预检请求次数。

调试工具

使用浏览器开发者工具(Network 标签)检查响应头是否生效。


通过以上配置,Nginx 即可支持跨域请求。如果遇到问题,可通过 nginx -t 检查语法或查看错误日志(/www/wwwlogs/error.log)。

相关文章

部署Nginx-一个ip,多个域名,部署多个项目

一、背景无论是在centos、ubuntu、iis等云服务器,还是在个人的电脑上,当部署Nginx时,基本上都会遇到想用一台服务器(只有一个IP)映射到多个域名上,以供访问多个不同的前端项目的情况(这...

在 Nginx 中防止 SSL 证书被其他域名“窜用”

在 Nginx 中防止 SSL 证书被其他域名“窜用”(即防止未经授权的域名使用你的 SSL 证书),需要确保你的服务器配置只允许合法域名访问,并通过适当的配置阻止非法域名的 HTTPS 请求。一般情...

搭建nginx反向代理用作内网域名转发

情景由于公司内网有多台服务器的http服务要映射到公司外网静态IP,如果用路由的端口映射来做,就只能一台内网服务器的80端口映射到外网80端口,其他服务器的80端口只能映射到外网的非80端口。非80端...

要将端口5002和5003通过Nginx代理到一个域名上的操作笔记

要将端口5002和5003通过Nginx代理到域名www.4rvi.cn的不同路径下,请按照以下步骤配置Nginx:步骤说明创建或编辑Nginx配置文件通常配置文件位于/etc/nginx/sites...

Nginx域名配置

对于想搭建自己博客或者其他个人网站的小伙伴,可能会需要配置域名。在我们购买完服务器,代码敲完,项目搞定,怎么使用域名访问呢?首先购买域名(要有DNS解析)-> 然后域名备案与审核 -> 最...

使用nginx配置动态域名解析

使用nginx配置来达到动态域名解析,resolver指令设置解析器的地址using-nginx-map-directive-to-dynamically-set-proxy-upstream要使用...