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

大家好，欢迎来到IT知识分享网。

目录

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 { @Override public 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 { @Bean public CorsWebFilter corsWebFilter() { CorsConfiguration config = new CorsConfiguration(); // 这里仅为了说明问题，配置为放行所有域名，生产环境请对此进行修改 config.addAllowedOrigin("*"); // 放行的请求头 config.addAllowedHeader("*"); // 放行的请求类型，有 GET, POST, PUT, DELETE, OPTIONS config.addAllowedMethod("*"); // 暴露头部信息 config.addExposedHeader("*"); // 是否允许发送 Cookie config.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 { @Bean public CorsWebFilter corsWebFilter() { CorsConfiguration config = new CorsConfiguration(); // 这里仅为了说明问题，配置为放行所有域名，生产环境请对此进行修改 config.addAllowedOriginPattern("*"); // 放行的请求头 config.addAllowedHeader("*"); // 放行的请求类型，有 GET, POST, PUT, DELETE, OPTIONS config.addAllowedMethod("*"); // 暴露头部信息 config.addExposedHeader("*"); // 是否允许发送 Cookie config.setAllowCredentials(true); UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(); source.registerCorsConfiguration("/", config); return new CorsWebFilter(source); } }

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