【Nginx】配置Nginx实现跨域策略


弹琵琶又见当年镜前你梳头

拨一首满花春秀

今日月下再醉孤酒

雨落枝头年复一年谁白发留

让爱随相思入梦左右

梦见我们还挽着手

🎵 马天宇《青衣》


在现代web开发中,跨源资源共享(CORS,Cross-Origin Resource Sharing)是一个常见的需求。对于前后端分离的项目,前端应用常常需要从不同的源(域名、协议或端口)请求后端服务。而出于安全考虑,浏览器的同源策略默认会阻止这类请求。幸运的是,通过在Nginx中配置适当的策略,我们可以允许特定的跨域请求,本文将指导你如何做到这一点。

什么是CORS

CORS是一个W3C标准,允许服务器指定哪些来源可以访问其资源。这是通过服务器发送一系列CORS相关的HTTP响应头来实现的。这些响应头决定了哪些网站可以请求服务器的资源,以及哪些HTTP请求方法和头部字段被允许。

在Nginx中配置CORS

配置Nginx以支持CORS相对简单。下面是一个基本的配置示例,展示了如何在Nginx服务器上为所有请求启用CORS。

基本CORS配置

打开你的Nginx配置文件,这通常位于/etc/nginx/nginx.conf,或者是包含在某个特定站点配置文件中,位于/etc/nginx/sites-available/目录下。找到你想要启用CORS的server块,在其中添加如下配置:

nginx 复制代码
server {
    listen 80;
    server_name yourdomain.com;

    location / {
        if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            #
            # Custom headers and headers various browsers *should* be OK with but aren't
            #
            add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
            #
            # Tell client that this pre-flight info is valid for 20 days
            #
            add_header 'Access-Control-Max-Age' 1728000;
            add_header 'Content-Type' 'text/plain; charset=utf-8';
            add_header 'Content-Length' 0;
            return 204;
         }
         if ($request_method = 'POST') {
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
            add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
         }
         if ($request_method = 'GET') {
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
            add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
         }
    }
}

这段配置实现了以下功能:

  • 允许所有来源(Access-Control-Allow-Origin: *)访问资源。在生产环境中,出于安全考虑,你可能想将它更改为特定的域名。
  • 允许GET、POST和OPTIONS方法。
  • 定义了哪些HTTP请求头被允许。
  • 对于OPTIONS预检请求,返回204状态码,并告诉客户端预检请求的结果可以缓存20天(Access-Control-Max-Age)。

注意事项

在配置CORS时,需要注意Access-Control-Allow-Origin不能设置为*如果同时设置了Access-Control-Allow-Credentials: true。因为在带凭证的请求中,*会被视为不安全的。

OPTIONS请求称为预检请求,用于检查服务器是否允许跨域请求。正确处理这类请求对于支持C

相关推荐
wanhengidc11 分钟前
云手机可以用来托管游戏吗?
运维·网络·安全·游戏·智能手机
Insist75321 分钟前
OpenEuler安装gitlab,部署gitlab-runner
linux·运维·服务器
真正的醒悟3 小时前
2025【1460天】网络工程师经验之道
运维·服务器
JosieBook8 小时前
【远程运维】Linux 远程连接 Windows 好用的软件:MobaXterm 实战指南
linux·运维·windows
羚羊角uou9 小时前
【Linux】命名管道
linux·运维·服务器
IT 小阿姨(数据库)10 小时前
PgSQL监控死元组和自动清理状态的SQL语句执行报错ERROR: division by zero原因分析和解决方法
linux·运维·数据库·sql·postgresql·centos
逍遥浪子~10 小时前
docker实践(一)
运维·docker·容器
AI云原生11 小时前
如何使用Docker快速运行Firefox并实现远程访问本地火狐浏览器的教程
运维·docker·云原生·容器·serverless·firefox·kubeless
今生相伴99111 小时前
ELFK:企业级日志管理的完整解决方案——从入门到精通
运维·elk·elasticsearch
小猪咪piggy12 小时前
【JavaEE】(24) Linux 基础使用和程序部署
linux·运维·服务器