解决后端限制导致前端配置跨域仍请求失败报504的问题

文章目录

    • 问题
      • 一、通过配置跨域方式
      • 二、直接真实接口请求
      • 三、解决方式
      • 四、后端这样做的原因
  • 总结


问题

前端项目设置跨域proxy处理,接口请求不会报跨域,但是接口请求报了504,这种情况如何处理呢,后端又为何要这么做,下面我们来详细说一说~

一、通过配置跨域方式

跨域配置如下:
在这里插入图片描述
无效,不报跨域,但报接口请求504:

在这里插入图片描述

二、直接真实接口请求

毫无疑问,会报跨域问题:

在这里插入图片描述

三、解决方式

(1)设置端口和后端限制的一样,比如这里只有设置成运行端口号为3000
(2)请求头设置和后端约束的一致,设置Content-type,和Accept类型为application/vnd.api+json
(3)再用真实接口请求,不设置跨域proxy配置,这样就可以请求到后端数据

在这里插入图片描述
在这里插入图片描述

四、后端这样做的原因

后端限制跨域请求,大概率是为了提高安全性和防止恶意攻击,或保护敏感数据。但是,当端口与后端限制一致时,可以绕过跨域限制,从而允许前端应用程序请求后端数据。

总结

当然,并不是端口号一致就可以绕过跨域,还需要添加其他配置,比如前端请求需要发送带有application/vnd.api+json头部信息,这样服务器就就可以将 Access-Control-Allow-Headers 设置为 application/vnd.api+json,客户端在跨域请求中就包含这个头部信息。同时,后端还需要设置其他跨域相关的头部信息,如 Access-Control-Allow-Origin、Access-Control-Allow-Methods 等,服务器端的跨域配置也需要正确设置,例如在 Nginx 或 Apache 中配置跨域访问控制。

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

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

相关文章

汽车信息安全--欧盟汽车法规

目录 General regulation 信息安全法规 R155《网络安全及网络安全管理系统》解析 R156《软件升级与软件升级管理系统》解析 General regulation 欧洲的汽车行业受到一系列法律法规的约束,包括 各个方面包括: 1.安全要求:《通用安全条例&a…

机器学习筑基篇,​Ubuntu 24.04 快速安装 PyCharm IDE 工具,无需激活!

[ 知识是人生的灯塔,只有不断学习,才能照亮前行的道路 ] Ubuntu 24.04 快速安装 PyCharm IDE 工具 描述:虽然在之前我们安装了VScode,但是其对于使用Python来写大型项目以及各类配置还是比较复杂的,所以这里我们还是推…

使用RAID与LVM磁盘阵列技术

前言:本博客仅作记录学习使用,部分图片出自网络,如有侵犯您的权益,请联系删除 目录 一、RAID磁盘冗余阵列 1、部署磁盘整列 2、损坏磁盘阵列及修复 3、磁盘阵列备份盘 4、删除磁盘阵列 二、LVM逻辑卷管理器 致谢 一、RAID…

使用 PCA 可视化数据的分类能力

使用 PCA 探索数据分类的效果(使用 Python 代码) 「AI秘籍」系列课程: 人工智能应用数学基础人工智能Python基础人工智能基础核心知识人工智能BI核心知识人工智能CV核心知识 主成分分析 (PCA) 是数据科学家使用的绝佳工具。它可用于降低特征…

【QT】容器类控件

目录 概述 Group Box 核心属性 Tab Widget 核心属性 核心信号 核心方法 使用示例: 布局管理器 垂直布局 核心属性 使用示例: 水平布局 核⼼属性 (和 QVBoxLayout 属性是⼀致的) 网格布局 核心属性 使用示例: 示例&#x…

2024亚太杯中文赛数学建模B题word+PDF+代码

2024年第十四届亚太地区大学生数学建模竞赛(中文赛项)B题洪水灾害的数据分析与预测:建立指标相关性与多重共线性分析模型、洪水风险分层与预警评价模型、洪水发生概率的非线性预测优化模型,以及大规模样本预测与分布特征分析模型 …

python操作SQLite3数据库进行增删改查

python操作SQLite3数据库进行增删改查 1、创建SQLite3数据库 可以通过Navicat图形化软件来创建: 2、创建表 利用Navicat图形化软件来创建: 存储在 SQLite 数据库中的每个值(或是由数据库引擎所操作的值)都有一个以下的存储类型: NULL. 值是空值。 INTEGER. 值是有符…

Python 算法交易实验76 QTV200日常推进

说明 最近实在太忙, 没太有空推进这个项目,我想还是尽量抽一点点时间推进具体的工程,然后更多的还是用碎片化的时间从整体上对qtv200进行设计完善。有些结构的问题其实是需要理清的,例如: 1 要先基于原始数据进行描述…

浪潮信息元脑服务器支持英特尔®至强®6能效核处理器 展现强劲性能

如今,服务器作为数字经济的核心基础设施,正面临着前所未有的挑战和机遇。作为服务器领域的领军企业,浪潮信息始终站在行业前沿,不断推陈出新,以满足客户日益增长的需求。近日,浪潮信息再次展现技术实力&…

基于GWO-CNN-BiLSTM数据回归预测(多输入单输出)-灰狼优化算法优化CNN-BiLSTM

基于GWO-CNN-BiLSTM数据回归预测(多输入单输出)-灰狼优化算法优化CNN-BiLSTM 1.数据均为Excel数据,直接替换数据就可以运行程序。 2.所有程序都经过验证,保证程序可以运行。 3.具有良好的编程习惯,程序均包含简要注释。 获取方式 https:/…

筛选Github上的一些优质项目

每个项目旁都有标签说明其特点,如今日热捧、多模态、收入生成、机器人、大型语言模型等。 项目涵盖了不同的编程语言和领域,包括人工智能、语言模型、网页数据采集、聊天机器人、语音合成、AI 代理工具集、语音转录、大型语言模型、DevOps、本地文件共享…

Matplotlib 学习

知识点 1.plot():用于绘制线图和 散点图scatter() 函数:plot() 函数可以接受许多可选参数,用于控制图形的外观,例如:颜色: colorblue 控制线条的颜色。线型: linestyle-- 控制线条的样式,例如虚线。标记…

YoloV8改进策略:Block改进|轻量实时的重参数结构|最新改进|即插即用(全网首发)

摘要 本文使用重参数的Block替换YoloV8中的Bottleneck,GFLOPs从165降到了116,降低了三分之一;同时,map50-95从0.937涨到了0.947。 改进方法简单,只做简单的替换就行,即插即用,非常推荐&#xf…

C++_STL---list

list的相关介绍 list是可以在常数范围内在任意位置进行插入和删除的序列式容器,并且该容器可以前后双向迭代。 list的底层是带头双向循环链表结构,链表中每个元素存储在互不相关的独立节点中,在节点中通过指针指向其前一个元素和后一个元素。…

IDEA与通义灵码的智能编程之旅

1 概述 本文主要介绍在IDEA中如何安装和使用通义灵码来助力软件编程,从而提高编程效率,创造更大的个人同企业价值。 2 安装通义灵码 2.1 打开IDEA插件市场 点击IDEA的设置按钮,下拉选择Plugins,如下: 2.2 搜索通义灵码 在搜索框中输入“通义灵码”,如下: 2.3 安…

使用ifconfig命令获取当前服务器的内网IP地址

如何使用ifconfig命令获取当前服务器的内网IP地址呢? ifconfig eth0 | grep inet | awk {print $2}

什么是五级流水?银行眼中的“好流水”,到底是什么样的?

无论是按揭买房还是日常贷款,银行流水都是绕不开的一环。规划好你的流水,不仅能让你在申请贷款时更有底气,还可能帮你省下不少冤枉钱。今天,咱们就来一场深度剖析,聊聊如何在按揭贷款、个人经营抵押贷款前,…

代码随想录 数组部分+代码可在本地编译器运行

代码随想录 数组部分,代码可在本地编译器运行 文章目录 数组理论基础704.二分查找题目:思路二分法第一种写法二分法第二种写法 代码 27.移除元素题目:思路-双指针法代码 977.有序数组的平方题目思路-双指针代码 209.长度最小的子数组题目&am…

ChatGPT4深度解析:探索智能对话新境界

大模型chatgpt4分析功能初探 目录 1、探测目的 2、目标变量分析 3、特征缺失率处理 4、特征描述性分析 5、异常值分析 6、相关性分析 7、高阶特征挖掘 1、探测目的 1、分析chat4的数据分析能力,提高部门人效 2、给数据挖掘提供思路 3、原始数据&#xf…

科研绘图系列:R语言径向柱状图(Radial Bar Chart)

介绍 径向柱状图(Radial Bar Chart),又称为雷达图或蜘蛛网图(Spider Chart),是一种在极坐标系中绘制的柱状图。这种图表的特点是将数据点沿着一个或多个从中心向外延伸的轴来展示,这些轴通常围绕着一个中心点均匀分布。 特点: 极坐标系统:数据点不是在直角坐标系中展…