编程导航会员会员
登录/注册

Nginx 跨域 + 无法设置 Cookie 解决办法 + 使用域名访问

首先 F12 看 login 接口对应的网络请求有没有 ⚠️，如果有那是后端的问题，如果没有那是前端的问题

前端问题

前端没有携带 cookie 导致后端识别不到

1） 前端 axios 是否开启了 withCredentials=true

2） 在 OpenAPI 的那边配置项，设置下 withCrendential

img

后端问题

确认环境

1）确保后端跨域注解或者配置要删除，鱼皮项目一般是 config/CrosConfig.java

跨域方式只有一种就可以（一般是后端配置或者 Nginx），咱们这里就使用 Nginx 解决跨域

2）如果使用国内服务器，想要使用域名必须要备案

3）YML 配置

▼
yml
复制代码
server:
  servlet:
    session:
      cookie:
        domain: 域名或者IP

http 环境就不要使用 secure 和samesite

使用宝塔跨域

Easy 跨域配置

在宝塔前端配置文件

非常重要，一定确保「前端请求地址」和「前端运行地址」地址一致！！！ 这种方式需要确保 1、后端没有配置跨域， 一般是 config/CrosConfig.java （具体内容下面的图片） 2、前端请求的地址是，前端运行的 IP 或者前端的域名 比如下面这几种情况 1）比如前端 IP 是 123.123.123.123 那么前端请求后端的地址也是 123.123.123.123 2）比如前端 IP 是 123.123.123.123:90 那么前端请求后端的地址也是 123.123.123.123:90 3）比如前端域名是 leikooo.com 那么前端请求后端请求的地址也是 leikooo.com

image.png

前端请求地址和前端运行地址一致 也就是前端 baseURL 请求 192.168.196.158:8000 具体参考自己运行地址

后端跨域配置

image.png

需要修改宝塔具体位置

image.png image.png

如果是原生的 Nginx 下面是完整的代码，如果是宝塔的话只需要复制两个 location 模块到前端配置文件即可 ，注意一定不要换顺序！

▼
text
复制代码
server
{
    listen 80;
    server_name 前端 IP 比如 126.4.3.3;
    root 前端路径;

    location /api {
      proxy_pass  http://127.0.0.1:后端端口;
      proxy_set_header Host $proxy_host;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_buffering off;
      proxy_set_header Connection "";
    }


    # 这个要写在下面！
    location / {
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
}

BUG

比如，下面这种情况:

image.png

所以会导致跨域失败！

解决方法：前端的 baseUrl 修改成前端运行地址

Hard 跨域配置

1、如果之前使用的是下面这种跨域方式也要删除掉/注释! image.png

2、这种方式是前端请求一个独立于前端和后端的端口，比如 前端 80 后端 8080 ，那么前端请求 90 端口让 90 对端口进项反向代理到后端

3、上面的 easy 方式虽然简单，但是如果后端想要使用独立的子域名的情况下就不适用了

image-20240914115007224 image-20240914115143570 
▼
nginx
复制代码
# 后端相关的反向代理+跨域
server {
    # 这个监听的端口任意都行，但是要注意前端要请求这个端口
    listen       90;
    server_name  前端 IP 比如 126.4.3.3;


    location / {
        # 禁止非 GET|POST|HEAD|OPTIONS|PUT|PATCH|DELET 的请求
        if ( $request_method !~ ^(GET|POST|HEAD|OPTIONS|PUT|PATCH|DELETE)$ ) {
            return 444;
        }

        set $origin $http_origin;
        # 重点！比如：
        # $origin !~ '^http?://leikooo\.com$
        # $origin !~ '^http?://127.0.0.1$
        if ($origin !~ '^http?://服务器IP$') {
            set $origin 'http://服务器IP';
        }

        if ($request_method = 'OPTIONS') {

            add_header 'Access-Control-Allow-Origin' "$origin" always;
            add_header 'Access-Control-Allow-Methods' 'GET, POST, PATCH, PUT, DELETE, OPTIONS' always;
            add_header 'Access-Control-Allow-Headers' 'Content-Type, Accept, Authorization' always;
            add_header 'Access-Control-Allow-Credentials' 'true' always;

            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 ~ '(GET|POST|PATCH|PUT|DELETE)') {
            add_header Access-Control-Allow-Origin "$origin" always;
            add_header Access-Control-Allow-Methods 'GET, POST, PATCH, PUT, DELETE, OPTIONS' always;
            add_header Access-Control-Allow-Headers 'Content-Type, Accept, Authorization' always;
            add_header Access-Control-Allow-Credentials true always;
        }
        # 反向代理到后端具体运行的端口
        proxy_pass http://localhost:后端实际运行端口;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr; 

    }
}

请求流程图

image.png

使用域名

前端请求后端的域名，然后在 Nginx 配置跨域和反向代理，访问到真正的后端

▼
nginx
复制代码
# 后端相关的反向代理+跨域
server {
    # http 默认 80 端口 https 默认 443 端口
    listen       80;
    server_name  修改成自己的子域名; # 比如 backend.leikooo.com


    location / {
        # 禁止非 GET|POST|HEAD|OPTIONS|PUT|PATCH|DELET 的请求
        if ( $request_method !~ ^(GET|POST|HEAD|OPTIONS|PUT|PATCH|DELETE)$ ) {
            return 444;
        }

        set $origin $http_origin;
        # 重点！比如：
        # $origin !~ '^http?://leikooo\.com$
        # 下面配置前端域名，比如 leikooo.cn
        if ($origin !~ '^http?://前端域名$') {
            set $origin '前端域名';
        }

        if ($request_method = 'OPTIONS') {

            add_header 'Access-Control-Allow-Origin' "$origin" always;
            add_header 'Access-Control-Allow-Methods' 'GET, POST, PATCH, PUT, DELETE, OPTIONS' always;
            add_header 'Access-Control-Allow-Headers' 'Content-Type, Accept, Authorization' always;
            add_header 'Access-Control-Allow-Credentials' 'true' always;

            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 ~ '(GET|POST|PATCH|PUT|DELETE)') {
            add_header Access-Control-Allow-Origin "$origin" always;
            add_header Access-Control-Allow-Methods 'GET, POST, PATCH, PUT, DELETE, OPTIONS' always;
            add_header Access-Control-Allow-Headers 'Content-Type, Accept, Authorization' always;
            add_header Access-Control-Allow-Credentials true always;
        }
        # 反向代理到后端具体运行的端口
        # 如果后端开启了 https 不要忘记请求协议变成 https 
        proxy_pass http://localhost:后端实际运行端口;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr; 

    }
}

注意：

1）前端请求 90 （上面 server 模块下 listen 的端口）而不是直接请求后端实际运行端口

image.png

2） 直接请求后端端口，那么 Nginx 就失去了存在的意义！

3）宝塔 + 服务器放行 90 端口，这个要注意！！（具体看自己写的是哪个端口）

4）完成 添加 nginx 配置 + 放行端口 正常就没什么问题了！

5）后端配置文件如果写了 samesite 或者 sercure 属性要删除掉！

image.png

6）后端写了跨域配置要 删除/注释 一般是 @CrossOrigin 或者 CrosConfig

使用原生 Nginx 跨域

经过实际测试，用 nginx 跨域就可以解决

▼
nginx
复制代码
user  root;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}

http {

    include       mime.types;
    default_type  application/octet-stream;
    access_log  logs/access.log;

    sendfile        on;
    keepalive_timeout  65;

    #gzip  on;

    # 前端配置不是重点
    server {
        listen       80;
        server_name 前端 IP 比如 126.4.3.3 ;

      	root /root/app/dist;
        # 访问默写前端页面 404 就是没加下面这行的原因
        try_files $uri $uri/ /index.html;
        
        location / {
            index  index.html index.htm;
        }
   }  

   # 后端相关的反向代理+跨域
   server {
        # 这个监听的端口任意都行，但是要注意前端要请求这个端口
        listen       90;
        server_name  前端 IP 比如 126.4.3.3;
        
      
        location / {
            # 禁止非 GET|POST|HEAD|OPTIONS|PUT|PATCH|DELET 的请求
            if ( $request_method !~ ^(GET|POST|HEAD|OPTIONS|PUT|PATCH|DELETE)$ ) {
                return 444;
            }
                
            set $origin $http_origin;
            # 重点！比如：
            # $origin !~ '^http?://leikooo\.com$
            # $origin !~ '^http?://127.0.0.1$
            if ($origin !~ '^http?://服务器IP$') {
                set $origin 'http://服务器IP';
            }

            if ($request_method = 'OPTIONS') {

                add_header 'Access-Control-Allow-Origin' "$origin" always;
                add_header 'Access-Control-Allow-Methods' 'GET, POST, PATCH, PUT, DELETE, OPTIONS' always;
                add_header 'Access-Control-Allow-Headers' 'Content-Type, Accept, Authorization' always;
                add_header 'Access-Control-Allow-Credentials' 'true' always;

                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 ~ '(GET|POST|PATCH|PUT|DELETE)') {
                add_header Access-Control-Allow-Origin "$origin" always;
                add_header Access-Control-Allow-Methods 'GET, POST, PATCH, PUT, DELETE, OPTIONS' always;
                add_header Access-Control-Allow-Headers 'Content-Type, Accept, Authorization' always;
                add_header Access-Control-Allow-Credentials true always;
            }
            # 反向代理到后端具体运行的端口
            proxy_pass http://localhost:后端实际运行端口;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr; 

        }
    }
}

使用域名

要注意一点，使用了下面的配置，就不需要再更改宝塔前端项目的 Nginx 配置(不需要再添加任何配置，比如 proxy_pass 之类的)，当然也不用单独再配置一个前端项目

类似这种

image.png 
▼
nginx
复制代码
user  root;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}

http {

    include       mime.types;
    default_type  application/octet-stream;
    access_log  logs/access.log;

    sendfile        on;
    keepalive_timeout  65;

    #gzip  on;

    # 前端配置不是重点
    server {
        listen       80;
        # 修改成前端的域名
        server_name leikooo.cn;

      	root /root/app/dist;
        # 访问默写前端页面 404 就是没加下面这行的原因
        try_files $uri $uri/ /index.html;
        
        location / {
            index  index.html index.htm;
        }
   }  

    # 后端相关的反向代理+跨域
    server {
        # 比如我们配置 backend.leikooo.cn 这个是后端域名
        # http 默认 80 端口 https 默认 443 端口
        listen       80;
        server_name  修改成自己的二级域名; # 我设置的一般就是 backend.leikooo.cn


        location / {
            # 禁止非 GET|POST|HEAD|OPTIONS|PUT|PATCH|DELET 的请求
            if ( $request_method !~ ^(GET|POST|HEAD|OPTIONS|PUT|PATCH|DELETE)$ ) {
                return 444;
            }

            set $origin $http_origin;
            # 重点！比如：
            # $origin !~ '^http?://leikooo\.com$
            # 下面配置前端域名，比如 leikooo、.cn
            if ($origin !~ '^http?://前端域名$') {
                set $origin '前端域名';
            }

            if ($request_method = 'OPTIONS') {

                add_header 'Access-Control-Allow-Origin' "$origin" always;
                add_header 'Access-Control-Allow-Methods' 'GET, POST, PATCH, PUT, DELETE, OPTIONS' always;
                add_header 'Access-Control-Allow-Headers' 'Content-Type, Accept, Authorization' always;
                add_header 'Access-Control-Allow-Credentials' 'true' always;

                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 ~ '(GET|POST|PATCH|PUT|DELETE)') {
                add_header Access-Control-Allow-Origin "$origin" always;
                add_header Access-Control-Allow-Methods 'GET, POST, PATCH, PUT, DELETE, OPTIONS' always;
                add_header Access-Control-Allow-Headers 'Content-Type, Accept, Authorization' always;
                add_header Access-Control-Allow-Credentials true always;
            }
            # 反向代理到后端具体运行的端口
            # 如果后端开启了 https 不要忘记请求协议变成 https 
            proxy_pass http://localhost:后端实际运行端口;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr; 

        }
    }
}

注意：

1）前端请求 9090 而不是直接请求后端实际运行端口

2）服务器放行 9090 端口，这个要注意！！（具体看自己写的是哪个端口）

Nginx 解决跨域原理

  1. 跨域问题的原因 跨域问题是由浏览器的 同源策略（Same-Origin Policy) 引起的。同源策略要求： 协议、域名、端口都必须一致。 如果前端和后端运行在不同的域名、IP 或端口上，例如： 前端地址为 http://126.4.3.3 后端地址为 http://126.4.3.3:8080 浏览器会认为它们是不同源，因此会阻止请求，这是跨域问题的本质。
  2. 如何解决跨域问题的配置逻辑 Nginx 配置中，location /api 是关键：
▼
text
复制代码
location /api {
    proxy_pass http://127.0.0.1:后端端口;
    proxy_set_header Host $proxy_host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_buffering off;
    proxy_set_header Connection "";
}

这里通过 Nginx 的反向代理机制： 将前端通过 /api 路径发起的请求转发到后端（即 http://127.0.0.1:后端端口 ）。 对于前端来说，请求的域名和端口仍然是 http://126.4.3.3 ，从浏览器的角度看，请求是同源的。

使用 HTTPS

实际测试使用域名 + HTTPS 也可以解决，解决无法设置 cookie 的问题

教程：https://www.codefather.cn/post/1831983737277050881

BUG

1、前端使用域名，但是前端后端使用 ip ，导致 session 设置不上

解决：前后端统一，要用域名都用域名、IP 都用 IP

2、还是不行？

1）检查端口是否放行！！！ 2）前端请求的端口是否是 Nginx listen 的端口，不要直接请求实际端口 ！！！

Nginx
Cookie
Http

相关专栏

教程

教程

项目教程

常用教程

常用教程

常用教程

0个评论
全部评论
点击登录，快来和大家讨论吧～
表情
图片
暂无评论
leikooo
leikooo
等级vip
内容推荐
更多
关于浏览器存不住cookie的问题
4
什么是负载均衡？不就是加台服务器嘛！
8
你的 IP 归属地，是咋被挖出来的？
7
HTTPS页面请求HTTP接口失败？一文讲透Mixed Content
5
Nginx 限流技术综合调研报告
2
作者分享
更多
Spring 团队开发者布道师 Josh Long，从 2011 年起每周二坚持写 This Week in Spring https://spring.io/authors/joshlong，大概 15 年半从未间断，到现在大概写了 800 期以上😱 大佬在采访里他说，写博客不是额外负担，而是逼自己整理每周所学的「强制机制」——反正本来就会刷社区动态，写出来既方便自己，也帮到别人。更重要的是 Spring 一直在变：微服务、AI……永远有新东西可聊，停一周就容易掉队。一旦养成习惯，坚持往往比重新开始更容易。 这种级别的大佬都还在用周更逼自己不掉队，我更没理由再拖了。还有之前左耳朵耗子大佬说的 ARTS 打卡，我老实说只撑了两周，真的需要捡起来了，加油✊
10
试了下 Grok CLI：curl -fsSL https://x.ai/cli/install.sh | bash 虽然功能不如 Claude Code 全，但能免费用 Grok 4.5 啊😍。一行 prompt 大概 3 分钟就生成出来了而且没有报错：" Three.js UMD 构建。正在实现完整的太阳系模拟（含自定义轨道控制，兼容本地打)"。 大伙可以访问试试：https://solar-system-seven-mocha.vercel.app/
4
彻底搞懂 Spring AI Tool Calling：从底层协议到源码执行全流程
7
别用 JWT 管理用户会话
9
没想到 Bot 占全球 HTML 流量的 50% 以上了，被这个比例给震惊到了。还有开发者在评论区说自己的网站「每天」访问量 250k 但是 Cloudflare 显示真实的用户只有 150 个😱 数据来源：https://radar.cloudflare.com/traffic#bot-vs-human
5
下载 APP