CORS跨域与Nginx反向代理

时间：2024-04-09 16:38:11

最近的项目都是关于前后端分离的，当我们把项目横向分层前后端分离后，由于浏览器安全限制会发现请求出现异常，主要原因是浏览器的同源策略（协议、域名和端口）是否相同。

解决方案：

解决跨域的方法有很多，如
(1)通过jsonp跨域
(2)通过修改document.domain来跨子域
(3)使用window.name来进行跨域
(4)使用HTML5中新引进的window.postMessage方法来跨域传送数据
(5)使用代理服务器
(6)CORS全称是"跨域资源共享"

本文主要讲解CORS跨域和Ningx反向代理。

CORS跨域：

CORS方案：跨域时部分浏览器默认不携带cookie，因此为了携带cookie需要在前端设置xmlhttprequest的withCrendetalls属性。
同时在后端拦截器在响应头中设置跨域设置

response.setHeader("Access-Control-Allow-Origin", "*");
 response.setHeader("Access-Control-Allow-Methods", "POST, GET, PUT, OPTIONS, DELETE");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "x-requested-with, Content-Type");
response.setHeader("Access-Control-Allow-Credentials", "true");

Nginx反向代理

nginx反向代理，通过修改nginx配置文件实现反向代理，请求统一通过nginx分发请求
CORS跨域与Nginx反向代理

Nginx配置（192.168.75.139）

# 负载均衡
upstream my_site {
      server 192.168.75.138:8080;
      server 192.168.75.137:8080;
      server 192.168.75.136:8080;
    }

   server {
        listen       8081;
        server_name  localhost;
        location ^~ /api/ {
            proxy_pass   http://my_site/;
            proxy_set_header            Host $host;
            proxy_set_header            X-Real-ip $remote_addr;
            proxy_set_header            X-Forwarded-For $proxy_add_x_forwarded_for;
        }
        location = / {
            proxy_pass   http://my_site/nginx/indexNginxCrossQuest.jsp;
        }
        location = /nginx/ {
            proxy_pass   http://my_site/nginx/;
            proxy_set_header            Host $host;
            proxy_set_header            X-Real-ip $remote_addr;
            proxy_set_header            X-Forwarded-For $proxy_add_x_forwarded_for;
        }
        location ~ \.(html|htm|ico|png|jpg|jpeg|js|css|bmp)$ {
            proxy_pass   http://my_site;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;

浏览器请求（192.168.75.1）
CORS跨域与Nginx反向代理

综合对比

CORS Nginx反向代理
前端代码配置 credentials=true 无
后端代码配置 setHeader：Allow-Origin、Allow-Methods等 无
服务端配置 无 Nginx配置
移植灵活性 高、无额外配置 低、每增加一个环境都需要增加配置
安全性 高、来源可控、直接追溯 X-Forwarded-For追溯多级来源
安全控制 黑白名单 更新配置

相关文章