网站首页 > 开源技术 正文
在宝塔面板中配置 Nginx 跨域(CORS)的步骤如下:
方法一:通过宝塔面板界面配置
1.登录宝塔面板
打开宝塔面板,进入「网站」模块。
2.找到目标网站
点击需要配置跨域的网站右侧的「设置」按钮。
3.修改配置文件
进入「配置文件」标签页,在 server 或 location 块中添加以下跨域配置:
# 允许跨域请求
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.编辑配置文件
在 server 或 location 块中添加跨域配置(同上)。
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)。
猜你喜欢
- 2025-04-26 使用TypeScript封装替换文件名的后缀名函数笔记
- 2025-04-26 项目中对react-native-mmkv库的封装和使用笔记
- 2025-04-26 WebRTC实现的视频会议流程设计和工程架构分享
- 2025-04-26 React Native终极资源库:35k+星标的开发者宝典
- 2025-04-26 mac 如何通过命令查看当前的ip
- 2024-08-24 html标签中元素显示模式(html块元素标签)
- 2024-08-24 TS 的一些常用知识点总结和使用说明
- 2024-08-24 使用js 封装一个根据某参数如userId去重的函数
- 2024-08-24 原生js有生命周期吗?及怎么使用?(原生js常用的方法)
- 2024-08-24 react native 封装一个通用的NavBar 导航栏笔记
你 发表评论:
欢迎- 04-26使用TypeScript封装替换文件名的后缀名函数笔记
- 04-26项目中对react-native-mmkv库的封装和使用笔记
- 04-26宝塔Nginx跨域配置教程
- 04-26WebRTC实现的视频会议流程设计和工程架构分享
- 04-26 React Native终极资源库:35k+星标的开发者宝典
- 04-26mac 如何通过命令查看当前的ip
- 04-26GP丨今年的圣诞树,已经被设计师给玩坏了?
- 04-26HTML5新年主题模板(附PSD下载)
- 最近发表
- 标签列表
-
- jdk (81)
- putty (66)
- rufus (78)
- 内网穿透 (89)
- okhttp (70)
- powertoys (74)
- windowsterminal (81)
- netcat (65)
- ghostscript (65)
- veracrypt (65)
- asp.netcore (70)
- wrk (67)
- aspose.words (80)
- itk (80)
- ajaxfileupload.js (66)
- sqlhelper (67)
- express.js (67)
- phpmailer (67)
- xjar (70)
- redisclient (78)
- wakeonlan (66)
- tinygo (85)
- startbbs (72)
- webftp (82)
- vsvim (79)
本文暂时没有评论,来添加一个吧(●'◡'●)