【VUE】跨域问题的概念,以及解决方法。

2024-09-09 07:36

本文主要是介绍【VUE】跨域问题的概念,以及解决方法。,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

目录

1.跨域概念

2.解决方法

2.1 配置网络请求代理

2.2 使用@CrossOrigin 注解

2.3 通过配置文件实现跨域

2.4 添加 CorsWebFilter 来解决跨域问题


1.跨域概念

  • 跨域问题是由于浏览器实施了同源策略,该策略要求请求的域名、协议端口必须与提供资源的服务相同。如果不相同,则需要服务器显式地允许这种跨域请求。
  • 一般在springboot+vue前后端分离项目中,前端应用(Vue.js)通常运行在一个不同的域名或端口上,而后端服务(Spring Boot)则运行在另一个,则会产生跨域问题。

2.解决方法

2.1 配置网络请求代理

在vue项目的vue.config.js 中配置网络请求代理,代码如下:

devServer: {proxy: {'/api': { // 匹配所有以 /api 开头的请求路径target: 'url',//指定代理的目标服务器地址,即后端服务的实际地址。pathRewrite:{'^/api':'' //将请求地址中的/api替换为空字符},changeOrigin: true}}
}

网络请求代理原理:

  • 一个项目可以分为三个部分,浏览器,前端服务器,后端服务器。浏览器首先会向前端服务器发出请求,拿到页面,然后再向后端发出请求,拿到数据填充到页面中。但是由于浏览器的同源策略,当浏览器向再向后端发出请求时,就会报错。
  • 网络请求代理的原理是,在前端服务器中设置一个网络代理,如下图,当浏览器发出以 api 开头的请求时,可以认为是请求后端的数据,否则是请求页面。 当请求后端的数据时,就在前端服务中设置一个访问后端的目标url,这个url访问到数据后,响应给浏览器,这样浏览器就只需要和前端服务器进行交互,间接避免了浏览器的同源策略。

2.2 使用@CrossOrigin 注解

这个主要是针对后端而言,使用 @CrossOrigin 注解可以实现跨域,此注解既可以修饰类,也可以修饰方法。当修饰类时,表示此类中的所有接口都可以跨域;当修饰方法时,表示此方法可以跨域,它的实现如下:

import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.HashMap;
@RestController
@CrossOrigin(origins = "*")//该类的所有单元方法均可实现跨域访问
public class TestController {@RequestMapping("/test")public HashMap<String, Object> test() {return new HashMap<String, Object>() {{put("state", 200);put("data", "success");put("msg", "");}};}
}

注:使用此方式只能实现局部跨域,当一个项目中存在多个类的话,使用此方式就会比较麻烦(需要给所有类上都添加此注解)。

2.3 通过配置文件实现跨域

通过设置配置文件的方式就可以实现全局跨域了,它的实现步骤如下:

  1. 创建一个新配置文件。
  2. 添加 @Configuration 注解,实现 WebMvcConfigurer 接口。
  3. 重写 addCorsMappings 方法,设置允许跨域的代码。
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 {@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/**") // 所有接口.allowCredentials(true) // 是否发送 Cookie.allowedOriginPatterns("*") // 支持域.allowedMethods(new String[]{"GET", "POST", "PUT", "DELETE"}) // 支持方法.allowedHeaders("*").exposedHeaders("*");}
}

2.4 添加 CorsWebFilter 来解决跨域问题

在 Spring-Framework 从 5.3 版本之前,使用以下代码可以让 Spring Cloud Gateway 网关允许跨域:

@Configuration
public class GlobalCorsConfig {@Beanpublic CorsWebFilter corsWebFilter() {CorsConfiguration config = new CorsConfiguration();// 这里仅为了说明问题,配置为放行所有域名,生产环境请对此进行修改config.addAllowedOrigin("*");// 放行的请求头config.addAllowedHeader("*");// 放行的请求类型,有 GET, POST, PUT, DELETE, OPTIONSconfig.addAllowedMethod("*"); // 暴露头部信息config.addExposedHeader("*"); // 是否允许发送 Cookieconfig.setAllowCredentials(true); UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();source.registerCorsConfiguration("/**", config);return new CorsWebFilter(source);}
}

而 Spring-Framework 5.3 版本之后,关于 CORS 跨域配置类 CorsConfiguration 中将 addAllowedOrigin 方法名修改为 addAllowedOriginPattern,因此配置了变成了以下这样:

@Configuration
public class GlobalCorsConfig {@Beanpublic CorsWebFilter corsWebFilter() {CorsConfiguration config = new CorsConfiguration();// 这里仅为了说明问题,配置为放行所有域名,生产环境请对此进行修改config.addAllowedOriginPattern("*");// 放行的请求头config.addAllowedHeader("*");// 放行的请求类型,有 GET, POST, PUT, DELETE, OPTIONSconfig.addAllowedMethod("*"); // 暴露头部信息config.addExposedHeader("*"); // 是否允许发送 Cookieconfig.setAllowCredentials(true); UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();source.registerCorsConfiguration("/**", config);return new CorsWebFilter(source);}
}

:部分知识点总结来源于:https://zhuanlan.zhihu.com/p/679740296 ,想进一步了解的,可以去看。

这篇关于【VUE】跨域问题的概念,以及解决方法。的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1150546

相关文章

解决systemctl reload nginx重启Nginx服务报错:Job for nginx.service invalid问题

《解决systemctlreloadnginx重启Nginx服务报错:Jobfornginx.serviceinvalid问题》文章描述了通过`systemctlstatusnginx.se... 目录systemctl reload nginx重启Nginx服务报错:Job for nginx.javas

Oracle数据库使用 listagg去重删除重复数据的方法汇总

《Oracle数据库使用listagg去重删除重复数据的方法汇总》文章介绍了在Oracle数据库中使用LISTAGG和XMLAGG函数进行字符串聚合并去重的方法,包括去重聚合、使用XML解析和CLO... 目录案例表第一种:使用wm_concat() + distinct去重聚合第二种:使用listagg,

Java后端接口中提取请求头中的Cookie和Token的方法

《Java后端接口中提取请求头中的Cookie和Token的方法》在现代Web开发中,HTTP请求头(Header)是客户端与服务器之间传递信息的重要方式之一,本文将详细介绍如何在Java后端(以Sp... 目录引言1. 背景1.1 什么是 HTTP 请求头?1.2 为什么需要提取请求头?2. 使用 Spr

Redis缓存问题与缓存更新机制详解

《Redis缓存问题与缓存更新机制详解》本文主要介绍了缓存问题及其解决方案,包括缓存穿透、缓存击穿、缓存雪崩等问题的成因以及相应的预防和解决方法,同时,还详细探讨了缓存更新机制,包括不同情况下的缓存更... 目录一、缓存问题1.1 缓存穿透1.1.1 问题来源1.1.2 解决方案1.2 缓存击穿1.2.1

Java如何通过反射机制获取数据类对象的属性及方法

《Java如何通过反射机制获取数据类对象的属性及方法》文章介绍了如何使用Java反射机制获取类对象的所有属性及其对应的get、set方法,以及如何通过反射机制实现类对象的实例化,感兴趣的朋友跟随小编一... 目录一、通过反射机制获取类对象的所有属性以及相应的get、set方法1.遍历类对象的所有属性2.获取

Java中的Opencv简介与开发环境部署方法

《Java中的Opencv简介与开发环境部署方法》OpenCV是一个开源的计算机视觉和图像处理库,提供了丰富的图像处理算法和工具,它支持多种图像处理和计算机视觉算法,可以用于物体识别与跟踪、图像分割与... 目录1.Opencv简介Opencv的应用2.Java使用OpenCV进行图像操作opencv安装j

Ubuntu系统怎么安装Warp? 新一代AI 终端神器安装使用方法

《Ubuntu系统怎么安装Warp?新一代AI终端神器安装使用方法》Warp是一款使用Rust开发的现代化AI终端工具,该怎么再Ubuntu系统中安装使用呢?下面我们就来看看详细教程... Warp Terminal 是一款使用 Rust 开发的现代化「AI 终端」工具。最初它只支持 MACOS,但在 20

Python实现数据清洗的18种方法

《Python实现数据清洗的18种方法》本文主要介绍了Python实现数据清洗的18种方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学... 目录1. 去除字符串两边空格2. 转换数据类型3. 大小写转换4. 移除列表中的重复元素5. 快速统

Mysql DATETIME 毫秒坑的解决

《MysqlDATETIME毫秒坑的解决》本文主要介绍了MysqlDATETIME毫秒坑的解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着... 今天写代码突发一个诡异的 bug,代码逻辑大概如下。1. 新增退款单记录boolean save = s

Debian如何查看系统版本? 7种轻松查看Debian版本信息的实用方法

《Debian如何查看系统版本?7种轻松查看Debian版本信息的实用方法》Debian是一个广泛使用的Linux发行版,用户有时需要查看其版本信息以进行系统管理、故障排除或兼容性检查,在Debia... 作为最受欢迎的 linux 发行版之一,Debian 的版本信息在日常使用和系统维护中起着至关重要的作