前提
- 前端使用的开发工具是VScode ,使用的是Vue进行开发前端
- 后端使用的开发工具是IDEA,使用的是SpringBoot进行开发后端
- 本文只从后端的角度来解决跨域问题
什么是跨域问题
因为浏览器有一个同源机制,只有同源的地址可以进行数据交互,这个是浏览器的安全机制
- 什么是同源?
- 只要两个地址中的协议,主机号,端口号都一致才算同源,只要有一个不一致就不是同源的
- 比如:
spring boot的项目启动地址: http://localhost:8080/ssm/users
Vue项目的启动地址:http://localhost:8081/
这两个地址中的访问端口号不一致,所以无法进行数据交互。
从后端角度的解决办法:
- 以下方法使用一种即可,最好不要同时多种存在。
方法1(亲测有效)
创建一个配置类,实现WebMvcConfigurer接口 ,并重写里面的addCorsMappings()方法 ,这个配置类一般是通用的,可以直接复制使用即可
注意:该类最好放在springboot主启动类所在包下或者其子包下,这样才可以扫描到配置类中的注解,才能生效!!!
package com.example.config;
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 WebMvcConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*")
.allowedHeaders("*")
.allowedMethods("GET", "POST", "PUT", "OPTIONS", "DELETE", "PATCH")
.maxAge(3600);
}
}
方法2
在控制器方法上加上注解@CrossOrigin ,此时该方法就支持跨域访问了
缺点:如果控制器中方法很多,需要每个方法都加上@CrossOrigin注解,比较麻烦
//查询一个用户
@CrossOrigin //加上该注解则该方法就支持跨域访问了
@GetMapping("/{id}")
public Result searchOneUser(@PathVariable String id){
Result result = new Result(200,userServiceImpl.query(id));
return result;
}
方法3
创建一个配置类,在该配置类中创建一个CorsFilter过滤器对象,该对象会对请求的url进行过滤配置。也可以直接复制过去进行使用
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;
import org.springframework.web.cors.CorsConfiguration;
@Configuration
public class config {
@Bean
public CorsFilter corsFilter(){
CorsConfiguration corsConfiguration = new CorsConfiguration();
corsConfiguration.addAllowedOrigin("*");
corsConfiguration.addAllowedHeader("*");
corsConfiguration.addAllowedMethod("*");
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
source.registerCorsConfiguration("/**",corsConfiguration);
return new CorsFilter(source);
}
}