当前位置:   article > 正文

nginx 解决跨域问题

nginx 解决跨域问题

在前后端分离的开发架构中,跨域问题时常发生,特别是浏览器出于安全原因实施的同源策略限制了不同源的网页间相互交互的能力。通过 Nginx 设置反向代理是一种常见的解决跨域问题的方法。具体步骤如下:

  1. 设置反向代理
    当前端应用(如:localhost:8080)需要访问后端服务(如:localhost:59200)时,可以通过Nginx配置反向代理,使两者看起来像是同一个源,从而规避浏览器的同源策略限制。

    在Nginx的配置文件中(通常是nginx.conf或某个站点配置文件,如/etc/nginx/sites-available/default),添加或修改服务器块(server block)内容:

    server {
        listen 8080; # 听在此端口,以便前端应用通过此端口访问
        
        location /api { # 假设所有API请求都位于/api路径下
            proxy_pass http://localhost:59200; # 将请求转发到后端服务器
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
            # 如果后端需要的话,还需要设置其他必要的头部,如Authorization等
            # proxy_set_header Authorization $http_authorization;
            # 其他可选配置,如缓存、重试等
        }
        
        # 其他配置...
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
  2. 启用CORS
    如果只需要允许特定的跨域请求,而不是完全通过代理解决,也可以在Nginx上配置CORS头部:

    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,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type'; # 允许的请求头
            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' '*';
        }
    
        if ($request_method = 'GET') {
            add_header 'Access-Control-Allow-Origin' '*';
        }
    
        # ...此处继续配置你的静态资源或者其他location规则...
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

    上述配置中,设置了CORS响应头部,允许来自任何源的请求('*'表示任意源,也可以替换为具体的域名),并且指定了允许的方法和请求头。注意,对于OPTIONS预检请求(这是浏览器在进行非简单请求前发送的请求),需要单独处理并返回相应的CORS头部。

通过上述配置,Nginx既可以作为反向代理隐藏后端服务器的真实地址,又可以用来管理CORS策略,从而有效地解决了跨域问题。不过请注意,使用通配符*允许所有源时可能存在安全风险,实际部署时应尽量精确控制允许的源列表。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/477153
推荐阅读
相关标签
  

闽ICP备14008679号