vue3delete请求报403forbidden,前后端解决方式,cookie无效问题

在做开发时,前期已经在Controller类加上@CrossOrigin(origins = "*"),发送get和post请求都没问题,但遇到delete请求时,又报出跨域问题

一.前端添加proxy代理服务器(未能解决)

在vue.config.js中使用devServer配置代理,在文件中添加

devServer:{proxy:{"/api":{target:"http://localhost:9998",changeOrigin: true,pathRewrite:{"^/api": ""},}}}

然后在你的axios配置文件中将baseURL改成

const API = axios.create({baseURL:'/api', timeout: 2000                  
})

这是因为proxy中设置了target,则此时请求地址变为http://localhost:9998/api
但同时在proxy中添加了pathRewrite属性,它是一个正则表达式,匹配/api并替换为“”(空字符串),所以实际请求地址依然为http://localhost:9998/接口名称
使用proxy代理服务器的目的是:
解决跨域问题,我们的前端项目和代理服务器有相同的端口,访问代理服务器不存在跨域问题,然后由代理服务器去访问target目标地址。

二.后端重写addCorsMappings跨域方法(成功)

我这里是在src文件夹下,新建了config文件夹,创建了MyConfiguration类实现了WebMvcConfigurer,具体如下:

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;@SuppressWarnings("deprecation")
@Configuration
public class MyConfiguration implements WebMvcConfigurer {@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/**").allowedMethods("GET","POST","DELETE","PUT","OPTIONS") //允许的请求类型//允许携带头信息(该处为所有头信息,可根据自己的需求修改).allowedHeaders("*").allowedOrigins("*").maxAge(3600);}
}

在后端重写addCorsMappings方法成功解决了delete的跨域问题

三. 解决响应头中携带set-cookie,但是cookie无法存在浏览器application中

使用cookie是希望浏览器保存,在后续请求中,携带cookie发送至后台
我尝试直接将cookie加在response中,但是浏览器application还是无法查看到

  1. 前端要设置withCredentails
    在axios配置文件中添加withCredentials: true,此属性可实现在后续的请求中均携带cookie,发送至后台
    2.后端要设置allowCredentials和allowOrigin
    在这里插入图片描述
    注意:一旦前端设置了withCredentials属性,后端也必须对应设置allowCredentials为true;此外allowOrigins必须设置为源地址,如果是设置为*是无效的。

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

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

相关文章

连接Huggingface报requests.exceptions.SSLError错误

最近在学习使用 SHAP 算法解释 BERT 模型的输出结果,然而在从 Huggingface 上导入模型和数据集的过程中出现了网络连接相关的错误,本文用于记录错误类型和解决错误的方法。 1 代码示例 SHAP 官方展示的代码如下: import datasets import nu…

Linux screen命令使用

文章目录 1. 前言2. screen是什么?3. screen使用场景描述3. screen常用命令4. 小结5. 参考 1. 前言 实际开发中用到的云服务器,如果项目使用的是python,需要利用项目运行一些时间较长的项目程序脚本的话,由于我们通过ssh连接远端服务器&…

一文详解扩散模型

文章目录 1、常见的生成模型2、变分推断简介3、文生图的评价指标4、Diffusion Models5、其他技术交流群精选 节前,我们星球组织了一场算法岗技术&面试讨论会,邀请了一些互联网大厂朋友、参加社招和校招面试的同学。 针对算法岗技术趋势、大模型落地…

2024年通信安全员ABC证证考试题库及通信安全员ABC证试题解析

题库来源:安全生产模拟考试一点通公众号小程序 2024年通信安全员ABC证证考试题库及通信安全员ABC证试题解析是安全生产模拟考试一点通结合(安监局)特种作业人员操作证考试大纲和(质检局)特种设备作业人员上岗证考试大…

项目3:从0开始的RPC框架(扩展版)-3

七. 负载均衡 1. 需求分析 目前我们的RPC框架仅允许消费者读取第一个服务提供者的服务节点,但在实际应用中,同一个服务会有多个服务提供者上传节点信息。如果消费者只读取第一个,势必会增大单个节点的压力,并且也浪费了其它节点…

Jenkins+K8s实现持续集成(一)

镜像仓库的搭建 docker run -d \--restartalways \--name registry \-p 5000:5000 \-v /root/devops/registry/data:/var/lib/registry \registry安装完之后,执行下面命令可以看到镜像仓库已经安装成功 docker ps 然后在浏览器上输入下面地址进行访问 http://ip:…

车牌号识别(低级版)

import cv2 from matplotlib import pyplot as plt import os import numpy as np from paddleocr import PaddleOCR, draw_ocr from PIL import Image, ImageDraw, ImageFont# 利用paddelOCR进行文字扫描,并输出结果 def text_scan(img_path):ocr PaddleOCR(use_a…

HTML(11)——CSS三大特性

CSS拥有三大特性&#xff0c;分别是&#xff1a;继承性&#xff0c;层叠性&#xff0c;优先级 继承性 说明&#xff1a;子级标签默认继承父级标签的文字控制属性。 如果子级自己有样式&#xff0c;则父级的属性不生效 例如&#xff1a; <style> body{ font-size:30px;…

ADS1220芯片写寄存器失败

1&#xff09;场景&#xff1a;最近调试ADS1220 的芯片&#xff0c;需要读取不同通道的AD值&#xff0c;修改寄存器0的值时一直失败 但是在单片机启动时&#xff0c;写寄存器0时&#xff0c;值能正确写入&#xff0c;并正确读出&#xff0c;之后写完读取出的都是FF或其他异常值…

CobaltStrike后渗透进阶篇

0x01 网络钓鱼攻击 钓鱼攻击简介 钓鱼攻击主要通过生成的木马诱使受害者运行后上线&#xff0c;其中木马一般都伪装成正常的程序。与此同时配合钓鱼网站可帮助攻击者模拟真实网站诱骗受害者访问&#xff0c;达到获取账号密码、上线木马等目的。接下来主要介绍后门程序的生成及…

利用Python爬取天气数据并实现数据可视化,一个完整的Python项目案例讲解

要使用Python爬取天气数据并进行制图分析分几个步骤进行&#xff1a; 选择数据源&#xff1a;首先&#xff0c;你需要找到一个提供天气数据的API或网站。一些常见的选择包括&#xff1a;OpenWeatherMap、Weatherbit、Weather Underground等。 安装必要的库&#xff1a;你需要安…

mamba模型原理解读

本文主要讲解我对于2023年提出的mamba模型的理解和解读&#xff0c;mamba模型的提出为transformer模型存在的计算效率低下&#xff0c;需要大量时间运行程序提出了解决方案。提高了模型的运行效率和计算效率。我主要是根据下面这篇文章入手&#xff1a; 1.mamba模型是通过堆叠多…

SpringBoot调用WebService的实践

作者所在公司的系统间的信息交互是通过webservice完成。如&#xff1a;MES与SAP的交互&#xff0c;MES与WMS的交换&#xff0c;MES与SRM的交互&#xff0c;MES与IOT的交互等。 MES是用.NET VS2008 C#写的&#xff0c;调用webservice很简单&#xff0c;这里不再赘述。如有想了解…

kotlin数组

1、kotlin中的数组与java数组比较&#xff1a; 2、创建 fun main() {// 值创建val a intArrayOf(1,2,3)// 表达式创建val b IntArray(3){println("it: ${it}")it1}println("a数组&#xff1a;${a.contentToString()}, 长度&#xff1a;${a.size}")prin…

重生之 SpringBoot3 入门保姆级学习(22、场景整合 Swagger 接口文档)

重生之 SpringBoot3 入门保姆级学习&#xff08;22、场景整合 Swagger 接口文档&#xff09; 6.2 Swagger 接口文档 6.2 Swagger 接口文档 1、将 starter 导入 Maven 官网 https://springdoc.org/<dependency><groupId>org.springdoc</groupId><artifact…

电路分析期末总结笔记下

对称三相电路的线电流和相电流&#xff0c;线电压和相电压关系 相电压与线电压的关系 线电压定义&#xff1a;任意两相之间的电压称为线电压&#xff0c;常用符号V_L表示。 相电压定义&#xff1a;一相绕组两端的电压称为相电压&#xff0c;常用符号V_P表示。 关系&#xff1…

2024年6月22日(星期六)骑行谷仓坝

2024年6月22日 (星期六) 骑行谷仓坝&#xff0c;早8:00到8:30&#xff0c; 龙泉小学门口(北京路尽头&#xff0c;高架桥下&#xff09;&#xff0c;9:00准时出发 【因迟到者&#xff0c;骑行速度快者&#xff0c;可自行追赶偶遇。】 偶遇地点:集合 &#xff0c;家住东&#xf…

ESP8266+STM32+阿里云保姆级教程(AT指令+MQTT)

前言&#xff1a;在开发过程中&#xff0c;几乎踩便了所有大坑小坑总结出的文章&#xff0c;我是把坑踩满了&#xff0c;帮助更过小白快速上手&#xff0c;如有错误之处&#xff0c;还麻烦各位大佬帮忙指正、 目录 一、ESP-01s介绍 1、ESP-01s管脚功能&#xff1a; 模组启动模…

无监督医学图像翻译与对抗扩散模型| 文献速递-深度学习结合医疗影像疾病诊断与病灶分割

Title 题目 Unsupervised Medical Image Translation With Adversarial Diffusion Models 无监督医学图像翻译与对抗扩散模型 01 文献速递介绍 多模态成像对于全面评估人体解剖结构和功能至关重要[1]。通过各自模态捕获的互补组织信息&#xff0c;有助于提高诊断准确性并改…

换位置(C++)

问题描述 体育课上&#xff0c;有一个班级的同学站成了一队&#xff0c;体育老师请最高的和最矮的两位同学调换一下位置&#xff0c;其余的同学不要动&#xff0c;请编程实现&#xff01;&#xff08;假设所有人的高矮都是不一样的&#xff09; 输入 第一行有一个整数 &…