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

本文主要是介绍【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】跨域问题的概念，以及解决方法。的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---