解决后端限制导致前端配置跨域仍请求失败报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来写大型项目以及各类配置还是比较复杂的,所以这里我们还是推…

AWS CloudWatch 权限管理指南

在 AWS 环境中,有效管理 CloudWatch 权限对于维护系统安全和优化运营效率至关重要。本文将详细介绍 CloudWatch 的常用权限分类,并提供相应的 JSON 策略示例。 1. 概述 CloudWatch 权限可以大致分为以下几类: 只读访问权限完全访问权限日志管理权限告警管理权限指标管理权…

使用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题洪水灾害的数据分析与预测:建立指标相关性与多重共线性分析模型、洪水风险分层与预警评价模型、洪水发生概率的非线性预测优化模型,以及大规模样本预测与分布特征分析模型 …

UI设计中瀑布流布局方式的特定和例子

在UI设计中,瀑布流布局方式(Waterfall Layout)是一种非常流行且有效的内容展示方式,其特定和例子可以归纳如下: 瀑布流布局的特定 视觉表现: 瀑布流布局呈现为参差不齐的多栏布局,随着页面滚…

数据集介绍与使用 M2DGR、KITTI、EuRoc,评测

SLAM 数据集汇总主页:https://github.com/qxiaofan/awesome-slam-datasets SLAM 数据 集综述论文:Simultaneous Localization and Mapping Related Datasets: A Comprehensive Survey 论文地址:https://arxiv.org/abs/2102.04036 M2DGR 简…

JAVA学习-练习试用Java实现“拼接最大数”

问题&#xff1a; 给定长度分别为 m 和 n 的两个数组&#xff0c;其元素由 0-9 构成&#xff0c;表示两个自然数各位上的数字。现在从这两个数组中选出 k (k < m n) 个数字拼接成一个新的数&#xff0c;要求从同一个数组中取出的数字保持其在原数组中的相对顺序。 求满足该…

iview中checkbox多选框带实际值和显示值的写法

<CheckboxGroup v-model"selectHotworkMeasures"><Checkboxv-for"item in hotworkMeasuresList":key"item.key">{{ item.name }}</Checkbox></CheckboxGroup>selectHotworkMeasures: [],

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

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

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

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

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

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

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

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

Pandas 基础 —— 探索数据分析的第一步

引言 在数据科学的世界中&#xff0c;Pandas 以其强大的数据处理能力而成为分析工作的核心工具。本文将引导你走进 Pandas 的大门&#xff0c;从基础概念到数据清洗的实用技巧&#xff0c;为你的数据分析之路打下坚实的基础。 Pandas 简介 Pandas 是一个开源的 Python 数据分…

筛选Github上的一些优质项目

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

p2p、分布式,区块链笔记:libp2p通过libp2p_demo::network实现文件传递功能

代码 代码来自github开源项目file-sharing.rs。主要依赖clap库进行命令行参数解析&#xff0c;使用async_std进行并行操作&#xff0c;使用libp2p_demo::network中的相关方法进行网络建立与文件传输&#xff0c;但是代码量却减少了很多&#xff0c;这是由于libp2p_demo::netwo…

Matplotlib 学习

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

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

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