首页 > 系统相关 >Nginx配置允许跨域

Nginx配置允许跨域

时间:2024-05-15 15:20:17浏览次数:12  
标签:Control 跨域 header Access Nginx add nginx 允许

要在Nginx中配置允许跨域(Cross-Origin Resource Sharing, CORS),你需要修改Nginx的配置文件(通常是nginx.conf或者某个包含在nginx.conf中的单独的配置文件)。下面是一个基本的例子,展示了如何在Nginx中设置CORS:

  1. 打开你的Nginx配置文件。这通常是/etc/nginx/nginx.conf或者/etc/nginx/conf.d/default.conf,或者一个特定站点的配置文件在/etc/nginx/sites-available//etc/nginx/conf.d/目录下。

  2. 在你想要允许跨域请求的server块或location块中添加add_header指令。

下面是一个简单的例子,它允许来自任何源的跨域请求,并允许所有的请求方法(GET, POST, PUT, DELETE等)和请求头:

server {
    listen 80;
    server_name your.domain.com;

    location / {
        # ... 其他的配置 ...

        # 允许跨域请求
        if ($request_method = 'OPTIONS') {
            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-Max-Age' 1728000;
            add_header 'Content-Type' 'text/plain; charset=utf-8';
            add_header 'Content-Length' 0;
            return 204;
        }

        if ($request_method = 'POST' || $request_method = 'GET' || $request_method = 'PUT' || $request_method = 'DELETE') {
            add_header 'Access-Control-Allow-Origin' '*';
            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,Range';
            #
            # 如果需要处理跨域Cookie,请取消下面的注释
            #
            # add_header 'Access-Control-Allow-Credentials' 'true';
        }

        # ... 其他的代理或静态文件配置 ...
    }
}

注意

  • * 允许来自任何源的请求,但在生产环境中,出于安全考虑,你应该明确指定允许的源。
  • 如果你需要处理跨域Cookie(即withCredentials设置为true的XHR/Fetch请求),则必须设置Access-Control-Allow-Credentialstrue,并且Access-Control-Allow-Origin不能设置为*,而应该是一个具体的源(如http://example.com)。
  • 在处理OPTIONS预检请求时,Nginx直接返回204状态码,这告诉浏览器请求是允许的,并且不需要实际发送请求体。
  • 请根据你的实际需求调整允许的HTTP方法和请求头。

修改完Nginx配置文件后,重新加载或重启Nginx服务以使更改生效:

sudo nginx -s reload
# 或者
sudo systemctl reload nginx
# 或者完全重启Nginx服务
sudo systemctl restart nginx

标签:Control,跨域,header,Access,Nginx,add,nginx,允许
From: https://www.cnblogs.com/ydswin/p/18193923

相关文章

  • Nginx的常用命令(启动重启停止等)
    Windows查看nginx的版本号:nginx-v启动nginx:startnginx快速停止或关闭nginx:nginx-sstop正常停止或关闭nginx:nginx-squit配置文件nginx.conf修改重装载命令:nginx-sreloadLinux进入nginx目录中cd/usr/local/nginx/sbin1、查看nginx版本号./nginx-v2、启......
  • 后端跨域cookie问题与spring-session-data-redis
    背景1、后端统一接入了公司内部登录系统,登录后cookie信息在域名:test.net.cn下。Set-Cookie:SESSION=09a2f617-66a0-4e02-b99f-130d83900321;Domain=test.net.cn;Path=/;HttpOnly;SameSite=Lax2、当我们的系统接入到统一登录系统后,若访问域名为a.test.net.cn,则不会出现问题,因......
  • nginx容器卷映射文件不生效
    问题:启动如下,当修改/data/nginx/conf/nginx.conf文件内容,执行dockerexec容器idnginx-sreload,登录容器里面查看是无法生效的,必须要重启容器才行dockerrun-d-p13700:13700\-v/data/www:/usr/local/nginx/html\-v/data/nginx/conf/nginx.conf:/usr/local/nginx/con......
  • Nginx配置https(证书)报错
    一、nginx配置问题nginx配置https的时候报错: nginx:[emerg]unknowndirective35+GAN"ssl"in/usr/local/nginx/conf/nginx.conf:28或者 nginx:[emerg]the"ssl"parameterrequiresngx_http_ssl_modulein/usr/loca....出现这个问题的时候可以检查一下是不是没有......
  • tui-image-editor中跨域问题
    如何安装tui-image-editor等就不再赘述,参考这篇博客即可,https://blog.csdn.net/weixin_44867717/article/details/128212251简单版参考:https://blog.csdn.net/Bonsoir777/article/details/134153807官网:https://ui.toast.com/tui-image-editor 下面说说我碰到的问题,跨域......
  • Docker 编译安装Nginx正向代理
    先记录一波正向代理#makebaseimage.FROMdebian:bookworm-20240423-slimASbaseLABELmaintainer="RocSun<[email protected]>"RUNrm-rf/etc/apt/sources.list.d/*\&&echo"">/etc/apt/sources.list\&&ech......
  • asp.net core 跨域
    missingalloworiginheaderasp.netcore在ASP.NETCore中,出现"missingalloworiginheader"错误通常是由于跨域资源共享(CORS)未正确配置所致。该错误的原因是客户端(如浏览器)尝试从不同的域或端口请求资源,而这些资源的访问被服务器限制。为了解决这个问题,你可以使......
  • vue3 多服务器域名跨域代理和请求配置
    多服务器域名的跨域配置:同样是在vue.config.js文件中对devServer.proxy进行配置,如下:const{defineConfig}=require('@vue/cli-service')module.exports=defineConfig({transpileDependencies:true,lintOnSave:false,//关闭eslint检查,devServer:{......
  • nginx实用入门
    下载并启动下载地址:http://nginx.org/en/download.html双击即可启动测试启动:http://localhost/部署网站添加该条配置即可server{listen8088;server_name名字;location/{root文件目录;indexindex.htmlindex.htm;}}关闭、开始、重启在cmd下操作,进......
  • k8s——configmap-secret-nginx实验
    简介configmapsecret一、实验环境二、实验描述三、实验1:步骤1.使用configmap投射到nginx.conf配置文件到pod里1.1需要准备nginx.conf配置文件1.2将nginx.conf内容存放到configmap里(通过文件的方式,,这样简单一点)1.3启动ngnix的pod,使用configmap里的nginx.conf配置文件2.......