Nginx 跨域 + 无法设置 Cookie 解决办法

今天来分享一下关于项目部署上线时怎么解决跨域问题!!!

首先感谢一下大佬的方法,才让这个困扰我很久的问题得以解决!!!
这也是我请教大佬才解决的问题,大佬和我说,这是他耗费两周才解决的问题,我这也是属于前人栽树后人乘凉了,嘿嘿嘿!!!

前端问题

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

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

2) 在 OpenAPI 的那边配置项,设置下 withCrendential

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

在这里插入图片描述

后端问题
YML 配置

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

http 环境就不要使用 secure 和samesite

使用宝塔跨域
在这里插入图片描述
在这里插入图片描述

后端相关的反向代理+跨域

server {# 这个监听的端口任意都行,但是要注意前端要请求这个端口listen       9090;server_name  localhost;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; }
}

注意:

  1. 前端请求 9090 (上面 server 模块下 listen 的端口)而不是直接请求后端实际运行端口

  2. 直接请求后端端口,那么 Nginx 就失去了存在的意义!

  3. 宝塔 + 服务器放行 9090 端口,这个要注意!!(具体看自己写的是哪个端口)

  4. 完成 添加 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 localhost ;root /root/app/dist;# 访问默写前端页面 404 就是没加下面这行的原因try_files $uri $uri/ /index.html;location / {index  index.html index.htm;}}  # 后端相关的反向代理+跨域server {# 这个监听的端口任意都行,但是要注意前端要请求这个端口listen       9090;server_name  localhost;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; }}
}

注意:

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

2)服务器放行 9090 端口,这个要注意!!(具体看自己写的是哪个端口)

使用 HTTPS

实际测试使用域名 + HTTPS 也可以解决

这里看一下大佬写的!!!

教程:https://www.code-nav.cn/post/1831983737277050881

BUG

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

解决:前后端统一,要用域名都用域名、IP 都用 IP

  1. 还是不行?

1)端口是否放行!!!

2)前端请求的端口是否是 Nginx listen 的端口,不要直接请求实际端口 !!!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/53397.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

uni-app安装插件

1.通过插件市场安装https://ext.dcloud.net.cn 打开HBuilderX编辑器。 点击菜单栏中的“工具”->“插件安装”。 这里会看到已安装插件和安装新插件两个选项卡,点击安装新插件, 能看到一些核心插件,如果所需要的插件在核心插件里面有&…

1、vectorCast单元测试常用操作

一、自动创建测试工程 1、设置工作目录 进入软件主页面,点击file,选择set working directory,随便选择一个保存该项目的目录即可。 2、创建一个空工程 编译器选择vector自带的编译器,vectorCast MinGW C。 此时项目工程就创建好了 2.1、配置编译器节点 点击编译器节点…

KVM环境下制作ubuntu qcow2格式镜像

如果是Ubuntu KVM环境是VMware虚拟机,需要CPU开启虚拟化 1、配置镜像源 wget -O /etc/apt/sources.list https://www.qingtongqing.cc/ubuntu/sources.list2、安装kvm qemu-img libvirt kvm虚拟化所需环境组件 apt -y install qemu-kvm virt-manager libvirt-da…

Redisson 总结

1. 基础使用 1.1 引入依赖 <dependencies><dependency><groupId>org.redisson</groupId><artifactId>redisson-spring-boot-starter</artifactId></dependency> </dependencies>包含的依赖如下 1.2 配置文件 其实默认主机就…

Java基础总结(2)

1.实例方法和静态方法的区别 调用方式不同&#xff1a;静态方法可以通过类名.方法名直接调用&#xff0c;也可以通过当前类的实例对象.方法名来调用&#xff0c;但是实例方法只能通过后者来访问访问类的成员存在限制&#xff1a;在静态方法内部&#xff0c;只能访问类的静态成员…

【计网】从零开始掌握序列化 --- JSON实现协议 + 设计 传输\会话\应用 三层结构

唯有梦想才配让你不安&#xff0c; 唯有行动才能解除你的不安。 --- 卢思浩 --- 从零开始掌握序列化 1 知识回顾2 序列化与编写协议2.1 使用Json进行序列化2.2 编写协议 3 封装IOService4 应用层 --- 网络计算器5 总结 1 知识回顾 上一篇文章我们讲解了协议的本质是双方能够…

WPF DataGrid 单元格居中,头部居中,点击行改变背景色。

我得全局样式都写在了App.XAML文件下的ResourceDictionary里&#xff0c;方便全局引用 DataGrid样式和点击改变行背景色的触发器(BasedOn继承的是UI框架的样式&#xff0c;若无则删除&#xff0c;触发器还有鼠标移动事件等&#xff0c;按需自行修改添加) <Style x:Key&quo…

安卓13长按电源按键直接关机 andriod13不显示关机对话框直接关机

总纲 android13 rom 开发总纲说明 文章目录 1.前言2.问题分析3.代码分析4.代码修改5.编译6.彩蛋1.前言 有些设备需要在长按电源键的时候,直接关机。不需要弹出对话框进行询问。 2.问题分析 过滤电源按键,需要在系统里面处理的话,那么我们需要熟悉android的事件分发,然后再…

Golang | Leetcode Golang题解之第420题强密码检验器

题目&#xff1a; 题解&#xff1a; func strongPasswordChecker(password string) int {hasLower, hasUpper, hasDigit : 0, 0, 0for _, ch : range password {if unicode.IsLower(ch) {hasLower 1} else if unicode.IsUpper(ch) {hasUpper 1} else if unicode.IsDigit(ch)…

【2025】儿童疫苗接种预约小程序(源码+文档+解答)

博主介绍&#xff1a; ✌我是阿龙&#xff0c;一名专注于Java技术领域的程序员&#xff0c;全网拥有10W粉丝。作为CSDN特邀作者、博客专家、新星计划导师&#xff0c;我在计算机毕业设计开发方面积累了丰富的经验。同时&#xff0c;我也是掘金、华为云、阿里云、InfoQ等平台…

hackmyvm靶场--zon

环境 攻击机kali 靶机 未知 主机探测 因为在同一个局域网内使用ARP协议探测存活主机 靶机为192.168.56.128 端口探测 常见的80和22端口 那么一定是寻找web漏洞拿shell了 后台扫描 后台扫描常用dirsearch和gobuster,有时候小字典可能不太行&#xff0c;可以尝试换个大点…

使用AVL树实现Map

一、数组在裂变扩容时可能会出现环、在数组元素转为链表之后选择尾插法插入节点、数组到链表到AVL到RBT的转换 1、数组在裂变扩容时链表中的节点计算出来的位置可能也会发生变化&#xff0c;在多线程情况下调整节点位置可能会出现环。 2、数组中的数组元素转为链表后插入新节点…

设计模式 享元模式(Flyweight Pattern)

享元模式 简绍 享元模式&#xff08;Flyweight Pattern&#xff09;是一种结构型设计模式&#xff0c;它的目的是通过共享技术来有效地支持大量细粒度的对象。享元模式可以极大地减少内存的使用&#xff0c;从而提高程序的性能。它特别适用于需要创建大量相似对象的场景&#…

Cypress安装与启动(开始学习记录)

一 Cypress安装 使用npm安装 1.查看node.js npm的版本&#xff0c;输入 npm --version 和 node --version&#xff0c;node.js没安装的可以去中文网下载最新稳定版安装&#xff0c;npm不建议升级到最新版本&#xff0c;会导致安装Cypress时Error: Cannot find module ansi-st…

在已安装的openresty上添加安装upstream模块报错的解决以及使用Consul服务发现时定时变更nginx的upstream的shell脚本

一、在已经安装好的openresty环境上添加安装upstream模块报错&#xff1a; 在已经安装好的openresty环境上添加安装upstream模块报错&#xff1a;http upstream check module can not find any check server, make sure you ve added the check 的问题解决。 服务器上已经安装好…

idea中java及java web项目的常见问题

1、乱码问题&#xff0c;主要有几处地方&#xff0c;需要检查。 ①确保文件编码&#xff0c;其实主要就是在idea启动文件中&#xff0c;增加了 -Dfile.encodingUTF-8的设置 ②编辑器默认编码&#xff0c;都改为UTF-8 ③Tomcat的运行配置&#xff0c;编码也改为UTF-8,同样使用…

SpringBoot3核心特性-核心原理

目录 传送门前言一、事件和监听器1、生命周期监听2、事件触发时机 二、自动配置原理1、入门理解1.1、自动配置流程1.2、SPI机制1.3、功能开关 2、进阶理解2.1、 SpringBootApplication2.2、 完整启动加载流程 三、自定义starter1、业务代码2、基本抽取3、使用EnableXxx机制4、完…

zynq的PS端mac与RTL8211F的连接要点

目录 1 VCCO_MIO12 PS_MIO_VREF3 PS的引脚4 RXDLY TXDLY5 ZYNQ的MAC可以调整延时吗 1 VCCO_MIO1 接1.8V 2 PS_MIO_VREF 接0.9V&#xff0c;可通过电阻分压 可通过电阻分压 3 PS的引脚 4 RXDLY TXDLY RXDLY RXD[0] TXDLY RXD[1] 与XC7Z020的PS端MAC连接&#xff0c;必须…

CVE-2024-2389 未经身份验证的命令注入

什么是 Progress Flowmon? Progress Flowmon 是一种网络监控和分析工具,可提供对网络流量、性能和安全性的全面洞察。Flowmon 将 Nette PHP 框架用于其 Web 应用程序。 未经身份验证的路由 我们开始在“AllowedModulesDecider.php”文件中枚举未经身份验证的端点,这是一个描…

1.pytest基础知识(默认的测试用例的规则以及基础应用)

一、pytest单元测试框架 1&#xff09;什么是单元测试框架 单元测试是指再软件开发当中&#xff0c;针对软件的最小单位&#xff08;函数&#xff0c;方法&#xff09;进行正确性的检查测试。 2&#xff09;单元测试框架 java&#xff1a;junit和testing python&#xff1a;un…