前后端分离的项目使用nginx 解决 Invalid CORS request

我是这样打算的,前端用nginx代理,使用80 转443 端口走https
前端的地址就是http://yumbo.top 或https://yumbo.top

后端服务地址是:http://yumbo.top:8081

下面是我的完整配置,功能是正常的,加了注释

user  nginx;
worker_processes  1;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;#tcp_nopush     on;keepalive_timeout  65;#gzip  on;# include /etc/nginx/conf.d/*.conf;# 以下属性中以ssl开头的属性代表与证书配置有关,其他属性请根据自己的需要进行配置。server {listen 443 ssl;   #SSL协议访问端口号为443。此处如未添加ssl,可能会造成Nginx无法启动。server_name yumbo.top;  #将localhost修改为您证书绑定的域名,例如:www.example.com。root html;index index.html index.htm;ssl_certificate /etc/nginx/yumbo.top.pem;   #替换成您证书的文件名。ssl_certificate_key /etc/nginx/yumbo.top.key;   #替换成您证书的密钥文件名。ssl_session_timeout 5m;ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;  #使用此加密套件。ssl_protocols TLSv1 TLSv1.1 TLSv1.2;   #使用该协议进行配置。ssl_prefer_server_ciphers on;   charset utf-8;location / {root /etc/nginx/web;   #站点目录。index index.html index.htm;  }#/api是vue中配置的代理路径location /api/ {add_header Content-Type 'application/json; charset=utf-8';proxy_pass http://yumbo.top:8081/;#后端服务地址proxy_set_header Origin http://yumbo.top:8081/;#这个要和后端服务地址一样,不然会出现跨域问题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_set_header X-Forwarded-Proto $scheme;proxy_set_header Access-Control-Allow-Origin *;proxy_set_header Access-Control-Allow-Methods 'GET, POST, PUT, DELETE, OPTIONS';proxy_set_header Access-Control-Allow-Headers 'Content-Type, Authorization';}}server {listen 80;server_name yumbo.top;rewrite ^(.*)$ https://${server_name}$1 permanent; }}

问题的发现

起初nginx没有配置好,出现了Invalid CORS request 或者403等之类的错误。
通过chrome无痕窗口访问网站,发现一个很奇特的现象,有个别几个接口是好的(login, menu, ringData)。
其他接口都出现了Invalid CORS request 状态403
我再三确认过axios 以及 后端springboot项目跨域都是允许的

axios我是这样配的,所有请求都是通过这个axios创建得到的axios对象,但是detail接口发现是403 response返回Invalid CORS request ,包括其他接口也都是403,就奇怪了,为什么那几个接口为什么没有出现跨域?

axios.create({baseURL: (process.env.NODE_ENV === 'production' ? process.env.server : '') + '/api',withCredentials: true,headers})

在这里插入图片描述

为了排查这个问题,我用postman去测接口。
比如去测这个detail接口https://yumbo.top/api/dashboard/ringData/detail
发现postman能成功返回数据,包括不走nginx代理,直接访问接口http://yumbo.top:8081/api/dashboard/ringData/detail
也都能正常返回数据
在这里插入图片描述

但是 !!! 部署上服务器后,就出现了上面截图 detail 跨域了。非常的困惑

后面看了这篇文章,了解了为什么会产生跨域:

  1. 403 Invalid CORS request 跨域问题 invalid+cors+request什么意思

一开始也没认真去看这篇文章,文章的内容和实际是有差别的。
有些场景可能多个因素造成跨域。

通过postman我确认了后端服务正常,nginx 80 转443 代理正常,接口能通过https://yumbo.top/api/dashboard/ringData/detail 获得数据,但是部署上去的项目就是会出现下面这种
在这里插入图片描述
因为看过之前提到的哪篇文章,我知道 跨域是根据http header中的Origin 和 Request URL进行比较。

一开始我没有怀疑是nginx的问题,因为我发现postman能够拿到接口数据,那按道理是前端axios与nginx之间的问题。

于是我尝试postman 的header中添加Origin

无非就是下面这些情况,一个一个试

  1. https://yumbo.top
  2. http://yumbo.top
  3. http://yumbo.top:8081

一开始呢,我将Origin 值和我nginx地址填的一致https://yumbo.top,我试了一下,我发现原先可以拿到接口数据的变成了和我chrome访问网站的结果一样Invalid CORS request
于是我又试了一下第3种情况 http://yumbo.top:8081 发现拿到了后端接口数据
在这里插入图片描述

于是我就回头找之前出现 Invalid CORS request 的请求头

发现Request Headers里有这个字段。于是就明白了,原来是axios自动的给请求头加了Origin,或者说是更底层 XMLRequest自动加的。
这个我们不用改axios,因为没必要改。
在这里插入图片描述
通过上述一系列的尝试,加上一些文章的内容,我们了解到,原来我遇到的跨域是因为我代理的后端服务地址http://yumbo.top:8081 而请求头中的Origin是https://yumbo.top(浏览器看到是是假的,因为后面被nginx转发了请求)

总结

得到Invalid CORS request的结果是因为Origin的值http://yumbo.top(前端浏览器,axios根据当前域自动添加的)和后端代理的接口地址http://yumbo.top:8081不一致。
我们知道nginx是可以修改请求头的,只要在nginx转发的那个地方加上Origin就可以解决这个问题。

下面是关键信息,只要这2个一致就行了

location /api/ {proxy_pass http://yumbo.top:8081/;#后端服务地址proxy_set_header Origin http://yumbo.top:8081/;#这个要和后端服务地址一样,不然会出现跨域问题
}

具体的其他一些关于nginx的配置,可以参考我前面完整的nginx配置


补充一下,为什么会出现个别请求没有出现跨域
因为后端springboot用的是@GetMapping
其他接口我都是用@PostMapping
根据我之前翻阅的文章知道,针对一些简单请求,比如get请求,或者个别请求是不会出现跨域的。
在这里插入图片描述

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

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

相关文章

华为HarmonyOS帮助应用实现在线认证服务 -- 3 IFAA免密身份认证

场景介绍 开通:提供移动端开通生物特征(指纹/3D人脸)IFAA免密身份认证的能力。使用用户已有的生物特征类型进行开通,会开通移动端对应生物特征类型的IFAA免密身份认证能力。 认证:提供移动端认证生物特征&#xff08…

用 Python 格式化器重新定义用户体验

文章目录 摘要引言用户体验优化的核心原则代码格式化工具代码模块详解核心类:CodeFormatter代码格式化方法:format核心逻辑处理使用示例示例输出用户体验设计亮点 QA 环节总结参考资料 摘要 开发者工具的用户体验(UX)对其使用率和…

如何使mysql数据库ID从0开始编号——以BiCorpus为例

BiCorpus是北京语言大学韩林涛老师研制一款在线语料库网站,可以通过上传tmx文件,实现在线检索功能,程序在github上开源免费,深受广大网友的喜欢。 在使用过程中,我发现我上传的语言资产经历修改后,mysql的…

Tomcat项目本地部署

前言: 除了在idea中将项目启动之外,也可以将项目部署在本地tomcat或者云服务器上,本片文章主要介绍了怎样将项目部署在本地tomcat 下面介绍如何使用Tomcat部署本地项目: 1、本篇文章使用的项目案例为一个聚合项目,ha…

2024-12-14 学习人工智能的Day35 卷积神经网络.阶段项目

卷积神经网络项目实现 关于项目实现的文档说明书,三个要素:数据、模型、训练 1、项目简介。 1.1 项目名称 ​ 基于CNN实现扑克牌花色的小颗粒度分类 1.2 项目简介 ​ 该项目旨在通过卷积神经网络(CNN)实现扑克的小颗粒度分类…

LabVIEW汽车综合参数测量

系统基于LabVIEW虚拟仪器技术,专为汽车带轮生产中的质量控制而设计,自动化测量和检测带轮的关键参数。系统采用PCIe-6320数据采集卡与精密传感器结合,能够对带轮的直径、厚度等多个参数进行高精度测量,并通过比较测量法判定产品合…

C++编程: 基于cpp-httplib和nlohmann/json实现简单的HTTP Server

文章目录 0. 引言1. 完整实例代码2. 关键实现3. 运行与测试 0. 引言 本文基于 cpp-httplib 和 nlohmann/json 实现简单的 HTTPS Server 实例代码&#xff0c;这两个库均是head-only的。 1. 完整实例代码 如下实例程序修改自example/server.cc #include <httplib.h>#i…

神经网络前馈型VS.反馈型

引言 神经网络作为深度学习的核心组件&#xff0c;已广泛应用于图像分类、语音识别和自然语言处理等领域。前馈型神经网络&#xff08;Feedforward Neural Network, FNN&#xff09;和反馈型神经网络&#xff08;Feedback Neural Network, FBNN&#xff09;是两种主要的神经网…

arcGIS使用笔记(无人机tif合并、导出、去除黑边、重采样)

无人机航拍建图之后&#xff0c;通过大疆智图软件可以对所飞行的区域的进行拼图&#xff0c;但是如果需要对拼好的图再次合并&#xff0c;则需要利用到arcGIS软件。下面介绍arcGIS软件在这个过程中常用的操作。 1.导入tif文件并显示的方法&#xff1a;点击“”图标进行导入操作…

FPGA 第十四讲 分频器--偶分频

时间:2024.12.14 时钟对于 FPGA 是非常重要的,但板载晶振提供的时钟信号频率是固定的,不一定满足工程需求,所以使用分频或倍频产生需要的时钟是很有必要的。 一、学习内容 1.分频器 分频器是数字系统设计中最常见的基本电路之一。所谓“分频”,就是把输入信号的频率变成…

【多模态】swift框架使用qwen2-vl

前言 前几篇里面学习了常见的一些多模态模型的典型架构和源代码&#xff0c;上一篇里面测试使用了minicpm-v系列模型&#xff0c;在尝试RLHF的时候发现swift特别好用特别全&#xff0c;记录一下对swift的一些使用&#xff0c;欢迎批评指正&#xff5e;   前一篇里面写了minic…

python爬虫--小白篇【爬取B站视频】

目录 一、任务分析 二、网页分析 三、任务实现 一、任务分析 将B站视频爬取并保存到本地&#xff0c;经过分析可知可以分为四个步骤&#xff0c;分别是&#xff1a; 爬取视频页的网页源代码&#xff1b;提取视频和音频的播放地址&#xff1b;下载并保存视频和音频&#x…

基于ArqMATH 数据集探索大语言模型在数学问题推理解答中的能力

概述 论文地址&#xff1a;https://arxiv.org/pdf/2404.00344 源码地址&#xff1a;https://github.com/gipplab/llm-investig-mathstackexchange 大规模语言模型&#xff08;LLMs&#xff09;因其解决自然语言任务的能力而备受关注&#xff0c;在某些任务中&#xff0c;其准…

x2go远程控制

X2Go 优点&#xff1a;专为远程桌面和图形界面优化。性能优越&#xff0c;特别是在网络带宽较低的情况下&#xff0c;采用了高效的压缩和缓存技术。支持多用户、会话恢复功能&#xff0c;适合企业使用。使用 SSH 连接&#xff0c;具有较好的安全性。 安装与配置&#xff1a;需…

[SV]如何在UVM环境中使用C Model

在UVM环境中使用C Memory 一、C语言实现Memory 1.1 代码说明 Memory 初始化: memory_init() 函数将内存空间初始化为 0,并初始化互斥锁。AXI 写操作 (axi_write): 检查地址范围是否合法。使用 memcpy 将数据从输入缓冲区写入模拟内存。使用互斥锁保证线程安全。AXI 读操作 …

基于ZYNQ 7z010开发板 oled点亮的实现

dc拉高的时候就是发送128字节数据的时候 发送指令dc拉低 模式是00 sck先置低再置高 复位是与开发板上的按键一样都是低有效 25位字节指令 加 3字节的 页地址加起始结束 b0,00,10, timescale 1ns / 1ps module top0(input wire clk ,input wire rst_n,// out…

被裁20240927 --- YOLO 算法

背景 在云端部署ViSP&#xff0c;ViSP实现视觉伺服、yolo实现视觉跟踪。 开源的2d视觉跟踪算法有哪些&#xff1f; 开源的2D视觉跟踪算法有很多呢&#xff0c;这里给你推荐一些比较知名和常用的吧。 ByteTrackV2&#xff1a;这是一个通用2D跟踪算法&#xff0c;提出了分层的…

360极速浏览器不支持看PDF

360安全浏览器采用的是基于IE内核和Chrome内核的双核浏览器。360极速浏览器是源自Chromium开源项目的浏览器&#xff0c;不但完美融合了IE内核引擎&#xff0c;而且实现了双核引擎的无缝切换。因此在速度上&#xff0c;360极速浏览器的极速体验感更佳。 展示自己的时候要在有优…

基于SpringBoot和PostGIS的全球城市信息管理实践

目录 前言 一、业务需求介绍 1、功能思维导图 二、业务系统后台实现 1、Model层实现 2、业务层的实现 3、控制层的实现 三、前端管理业务的实现 1、全球城市列表的实现 2、详情页面实现 3、实际城市定位 四、总结 前言 在全球化和信息化时代背景下&#xff0c;城市作…

k8s的ConfigMap是什么, 为什么设计ConfigMap, 如何使用ConfigMap

ConfigMap简介, 为什么设计ConfigMap 在k8s中, ConfigMap是一种API对象, 用于将非机密的配置数据存储到键值对中。 Configmap作用是, 把配置数据从应用代码中分隔开, 让镜像和配置文件解耦&#xff0c;实现了镜像的可移植性。 举例&#xff1a; 我有一个Squid(正向代理)的Pod…