如何通过nginx解决跨域问题

 更新时间:2026年05月06日 08:54:53   作者:人生匆匆  
文章描述了在使用Nginx版本1.29.1配置代理时遇到的跨域问题,由于响应中缺少Access-Control-Allow-Origin头部,导致从10.20.4.1访问10.20.4.2:5000时出现跨域错误,通过配置Nginx以添加该头部,问题得到了解决,感兴趣的朋友跟随小编一起看看吧

nginx版本 1.29.1

问题
10.20.4.1 访问这个10.20.4.2:5000服务跨域了,麻烦处理一下
跨域报错


根据您图片中的错误信息,前端运行在 http://10.20.4.1,试图向 http://10.20.4.2:50000/upload发送 POST 请求,但被 CORS 策略阻止,因为响应中没有 Access-Control-Allow-Origin头部。

应该5000是python端口

我采用了nginx代理,添加允许跨域

user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log warn;
pid /var/run/nginx.pid;
events {
    worker_connections 1024;
}
http {
    include /etc/nginx/mime.types;
    default_type application/octet-stream;
    log_format main '$remote_addr - $remote_user [$time_local] "$request" '
                    '$status $body_bytes_sent "$http_referer" '
                    '"$http_user_agent" "$http_x_forwarded_for"';
    access_log /var/log/nginx/access.log main;
    sendfile on;
    keepalive_timeout 65;
    # 动态设置允许的CORS源
    # 1. 检查 map 块:确保包含 http://10.20.4.1
    map $http_origin $cors_allowed_origin {
        default "";
        "http://10.20.4.1" "http://10.20.4.1"; # 必须存在这一行
        "http://10.20.4.2" "http://10.20.4.2"; # 必须存在这一行
        # ... 其他允许的来源
    }
    server {
        listen 50000;
        server_name 10.20.4.2;
        # 2. 检查 server 或 location 块:确保添加了 CORS 头
        location / {
            # 处理 OPTIONS 预检请求
            if ($request_method = 'OPTIONS') {
                add_header 'Access-Control-Allow-Origin' $cors_allowed_origin;
                add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS';
                add_header 'Access-Control-Allow-Headers' '*';
                add_header 'Access-Control-Max-Age' 1728000;
                add_header 'Content-Length' 0;
                add_header 'Content-Type' 'text/plain; charset=utf-8';
                return 204;
            }
            # 反向代理到后端
            proxy_pass http://10.20.4.2:5000;
            # ... 其他 proxy_set_header ...
            # 为实际响应添加 CORS 头,使用 always 确保任何状态码都添加
            add_header 'Access-Control-Allow-Origin' $cors_allowed_origin always;
            add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS' always;
            add_header 'Access-Control-Allow-Headers' '*' always;
        }
    }
}

测试实际 POST 请求

此命令模拟前端实际发送的 POST 请求,检查响应是否包含 CORS 头部。

curl -X OPTIONS "http://10.20.4.2:50000" \
  -H "Origin: http://10.20.4.1" \
  -H "Access-Control-Request-Method: POST" \
  -H "Access-Control-Request-Headers: content-type" \
  -v

到此这篇关于通过nginx解决跨域问题的文章就介绍到这了,更多相关nginx解决跨域内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 详解nginx请求头数据读取流程

    详解nginx请求头数据读取流程

    这篇文章主要介绍了详解nginx请求头数据读取流程,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-03-03
  • web部署到nginx以后js,css等静态文件加载不正常的解决过程

    web部署到nginx以后js,css等静态文件加载不正常的解决过程

    在Ubuntu中配置Web页面时,JS和CSS文件虽可获取但加载失败,可能因路径错误、服务器配置不当、权限限制或缓存问题导致页面布局异常,需检查文件路径、服务器设置、MIME类型及浏览器控制台错误信息以排查原因
    2025-09-09
  • 使用Lvs+Nginx集群搭建高并发架构的实现示例

    使用Lvs+Nginx集群搭建高并发架构的实现示例

    本文主要介绍了使用Lvs+Nginx集群搭建高并发架构的实现示例,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-12-12
  • Nginx + consul + upsync 完成动态负载均衡的方法详解

    Nginx + consul + upsync 完成动态负载均衡的方法详解

    这篇文章主要介绍了Nginx + consul + upsync 完成动态负载均衡,需要的朋友可以参考下
    2020-11-11
  • nginx将泛解析的匹配域名绑定到子目录配置方法

    nginx将泛解析的匹配域名绑定到子目录配置方法

    这篇文章主要介绍了nginx将泛解析的匹配域名绑定到子目录配置方法,需要的朋友可以参考下
    2014-03-03
  • Nginx配置之location的匹配优先级浅析

    Nginx配置之location的匹配优先级浅析

    这篇文章主要给大家介绍了关于Nginx配置之location的匹配优先级的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者使用Nginx具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-11-11
  • Nginx WebSocket长连接及数据容量配置实践

    Nginx WebSocket长连接及数据容量配置实践

    Nginx通过配置HTTP代理,可以有效地处理WebSocket连接,支持长连接和大数据传输,关键配置包括设置HTTP/1.1版本、升级头部、连接头部、增加超时时间、调整最大请求体大小和临时文件大小,这些配置确保了WebSocket连接的稳定性和高效性
    2025-12-12
  • 简单谈谈Nginx基础知识入门

    简单谈谈Nginx基础知识入门

    Nginx(engine x)是一个高性能的HTTP服务器(其实不止HTTP服务器),一般主要用作负载均衡和反向代理,今天我们来简单学习下他的基础配置知识
    2017-08-08
  • Ubuntu环境下安装部署Nginx并设置自启动过程

    Ubuntu环境下安装部署Nginx并设置自启动过程

    文章主要介绍了使用wget下载Nginx及相关依赖包,解配置、编译、安装Nginx的过程,N并ginx模块配置、启动及管理等内容,并N提供ginx.service文件配置和,解决启动报错等问题
    2026-05-05
  • Nginx在前后端分离中的作用以及对比

    Nginx在前后端分离中的作用以及对比

    文章对比了直接访问(不使用Nginx)与使用Nginx(反向代理)两种方式的特点、优势及应用场景,直接访问简单直接但安全性较低;Nginx增加中间层代理,解决跨域、负载均衡等问题,适合生产环境,建议小型项目直接访问,大项目应推荐使用Nginx以获得更好的性能和安全性
    2026-05-05

最新评论