springboot+vue跨域请求使用方法

news2024/11/24 22:45:20

这里写目录标题

  • 一、所谓跨域:
  • 二、不做任何处理
  • 三、解决跨域请求
    • 案例 一
    • 案例 二

一、所谓跨域:

在前后端分离的项目中,前台一个服务,后台一个服务。
前台的一个Axios请求打进来,要访问后台Tomcat服务器Restful接口
浏览器出于安全的考虑,使用 XMLHttpRequest对象发起 HTTP请求时必须遵守同源策略
在默认的情况下跨域是被禁止。
IP不同或者端口号不同就是跨域

二、不做任何处理

前后端交互的时候 跨域问题
已拦截跨源请求:同源策略禁止读取位于 http://localhost:8080/的远程资源。(原因:CORS
12打开后会发现控制台已经报错 Access-Control-Allow-Origin
在这里插入图片描述
也就是说跨域的本质是靠Http的Header头中的Access-Control-Allow-Origin来实现跨域的

三、解决跨域请求

这两个用哪个都可以

案例 一

package com.aaa.common;


import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

// 案例 一  跨域请求

@Configuration
public class CorsConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
    // 添加映射路径,“/”表示所有的路径都会被映射到该配置下。
        registry.addMapping("/**")  
                //是否发送Cookie
                .allowCredentials(true)
                //放行哪些原始域
                .allowedOriginPatterns("*")
                // 允许的请求方法,包括GET、POST、PUT和DELETE。
                .allowedMethods(new String[]{"GET", "POST", "PUT", "DELETE"})
                // 允许的请求头信息,即任何请求头都允许。
                .allowedHeaders("*")
                // 允许的响应头信息,即任何响应头都允许。
                .exposedHeaders("*");
    }
}

案例 二

package com.aaa.common;


import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

// 案例 一  跨域请求

@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Configuration
public class CorsConfig {

    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**")
                        .allowedOriginPatterns("*") // 修改为您允许的请求源
                        .allowCredentials(true)
                        .allowedMethods("*")
                        .allowedHeaders("*");
            }
        };
    }
}

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

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

相关文章

“泰山众筹:引爆全球的财富狂潮!“

想象一下,你手中的白酒不再只是简单的饮品,而是一份珍贵的投资,一份充满惊喜的冒险,一份财富的种子!在这个神奇的时刻,让我们一起探索泰山众筹模式的魅力! 在传统的投资领域,你是否…

跨国传输的常见问题与对应解决方案

在今天的全球化时代,跨国数据传输已经成为一个不可或缺的需求。不论是个人还是企业,都需要通过网络将文件或数据从一个国家传输到另一个国家,以实现信息共享、协作、备份等目的。然而,跨国数据传输并不是一项容易的任务&#xff0…

我应该删除低质量页面以提高Google排名吗?

为什么考虑删除低质量页面? 上个月,根据Google的搜索团队John Mueller和Gary Illyes在 “Search Off the Record”播客中的讨论,质量是影响搜索的几乎每一个方面的关键因素。 虽然高质量的内容不能保证高排名,但它可以影响Googl…

三相电表逆相序是由于负载造成的吗

大家好,最近有蛮多客户问三相电表逆相序是由于负载造成的吗?那么答案是:是的,但是负载只是导致三相电表出现逆向序的原因之一,下面,小编来带大家一起了解下三相电表出现逆相序的原因有哪些,一起…

分享88个工作总结PPT,总有一款适合您

分享88个工作总结PPT,总有一款适合您 88个工作总结PPT下载链接:https://pan.baidu.com/s/1y08X9RMdIOCncbs28aMgDw?pwd8888 提取码:8888 Python采集代码下载链接:采集代码.zip - 蓝奏云 蓝色水彩风年终总结PPT模板 清新水彩简…

USB PD v1.0快速充电通信原理

1 原理 本篇文章讲的快速充电是指USB论坛所发布的USB Power Delivery快速充电规范(通过VBUS直流电平上耦合FSK信号来请求充电器调整输出电压和电流的过程),不同于本人发布的另一篇文章所讲的高通Quick Charger 2.0规范,因为高通QC…

uniapp自定义权限菜单,动态tabbar

已封装为组件&#xff0c;亲测4个菜单项目可以切换&#xff0c; 以下为示例&#xff0c;根据Storage 中 userType 的 值&#xff0c;判断权限菜单 <template><view class"tab-bar pb10"><view class"tabli" v-for"(tab, index) in ta…

C语言实现把一个字符串插到另一个字符串中的指定位置

完整代码&#xff1a; // 把一个字符串插到另一个字符串中的指定位置 #include<stdio.h> #include<stdlib.h> //字符串的最大长度为10 #define N 10int main(){//把str2插入到str1中char *str1(char *)malloc(N*sizeof(char));char *str2(char *)malloc(N*sizeof(…

易思无人值守智能物流系统Sys_ReportFile文件上传漏洞复现

文章目录 易思无人值守智能物流系统Sys_ReportFile文件上传漏洞复现0x01 前言0x02 漏洞描述0x03 影响版本0x04 漏洞环境0x05 漏洞复现1.访问漏洞环境2.构造POC3.复现 0x06 修复建议 易思无人值守智能物流系统Sys_ReportFile文件上传漏洞复现 0x01 前言 免责声明&#xff1a;请…

Learning to Segment Rigid Motions from Two Frames 代码复现

环境配置 https://github.com/gengshan-y/rigidmask 1.拉取代码 git clone https://github.com/gengshan-y/rigidmask.git cd rigidmask2.创建conda环境&#xff0c;修改rigidmask.yml name: rigidmask channels:- pytorch- pytorch3d- conda-forge- defaults dependencies…

HashMap源码分析——Java全栈知识(8)

jdk1.7和jdk1.8的HashMap的原理有一点出入我们就分开讲解&#xff1a; 1、JDK1.7中的HashMap JDK1.7中的HashMap是通过数组加链表的方式存储数据。他的底层维护了一个Entry数组&#xff0c;通过哈希函数的计算出来哈希值&#xff0c;将待填数据根据计算出来的哈希值填入到对应…

memset的用处

这个memset是真的究极坑中坑,这玩意对int数组是压根没法初始化-1,0其他任何数,以后除了-1和0,其他的一概不能用这玩意,这个是真的坑,一旦出了错巨难找 初始-1 初始0 初始1

JTS: 13 Polygonizer 多线合成面

这里写目录标题 版本代码 版本 org.locationtech.jts:jts-core:1.19.0 链接: github 代码 线段 生成之后的面 public class GeometryPolygonization {private static final GeometryFactory geometryFactory new GeometryFactory();private static final Logger LOGGER …

Vue2别踩白块(第二种)

效果图: 点击黑块变灰 游戏结束 功能简介 点击白块直接失败,点击黑块得计一分。 代码逻辑 其实和第一种类似,唯一区别在于此种方式的判断滚动到底部是否有违背点击的黑块的算法。 1、数组存放白块数据:二维数组,数组内部单个元素为一个四位数字的数组,其中1代表黑块,0代…

移动硬盘只读模式怎么取消?

当硬盘驱动器处于为只读模式时&#xff0c;您仅能读取保存在该驱动器中的数据&#xff0c;但却无法添加新数据和修改当前数据。如果您想要对数据做一些改变就需要取消只读模式。那么&#xff0c;移动硬盘只读模式怎么取消&#xff1f; 方案一&#xff1a;使用命令提示符移除只读…

生产环境docke问题排查

查看进程top查看具体的线程 top -H -p 8898如果cpu 过高&#xff0c;就是有问题的地方&#xff1b; 接下来根据docker查看具体的问题 查看dockers容器哪个内存、cpu占用过高 docker stats前言&#xff1a; 有java 启动容器&#xff1b;有jre包启动的容器。如下图 根据cpu很高…

Microsoft 365一键安装、激活!(附安装包)

下面将介绍的是Microsoft 365一键安装。 安装包&#xff1a;https://dnmjun.lanzout.com/iBFGZ1ddxql 安装步骤 1、下载得到安装包后&#xff0c;先解压&#xff01; 2、双击OfficeSetup开始安装 3、进入正式安装了&#xff0c;耐心等即可。 4、下载过程会需要点时间&#x…

Data Uncertainty Learning in Face Recognition

传统的面部识别方法即使在图片中面部模糊的情况下&#xff0c;耶给出确定的面部识别特征 事实上&#xff0c;这种模糊的代表着数据的不确定性&#xff0c;这个网络向我们展示了在不确定视角下&#xff0c;简单的回归任务和面部识别回归任务共享同样的模式 在这篇论文中&#xf…

数控机床数字孪生可视化平台,推动智能装备水平整体提升

作为智能制造的中重要装备之一&#xff0c;数控机床正朝着智能化、精密化、数字化、可视化的目标发展。数字孪生技术是一种新兴的技术&#xff0c;可以将物理机床仿真为虚拟机床&#xff0c;以实现更高效的数控机床调试。数字孪生是指将实际物理系统与其数字化的虚拟模型相结合…

Confluence未授权管理用户添加漏洞复现 (CVE-2023-22515)

Confluence未授权管理用户添加漏洞复现 【CVE-2023-22515】 一、漏洞描述二、漏洞影响版本三、网络空间测绘查询四、漏洞复现1.手动复现2.自动化复现小龙POC检测nuclei检测 免责声明&#xff1a;请勿利用文章内的相关技术从事非法测试&#xff0c;由于传播、利用此文所提供的信…