1.在做前后端分离的项目时,会遇到跨域问题,如下图所示:
2.这里可以看到,出现了跨域问题,首先我们先看看跨域问题是怎么产生的:
这是由于浏览器同源策略的限制。
所谓同源是指:协议、域名、端口三者都要相同,即使两个不同的域名指向同一个IP地址,也是非同源。 一句话总结:只要请求的资源URL的协议、域名、端口号三者任意一个与当前页面的不同就会出现跨域问题。
同源策略是一种约定,用于保障浏览器最基本最核心的安全问题,若是缺少同源策略浏览器的正常功能可能都会受到影响。试想一下,如果没有同源(同协议、同域名、同端口)策略,不同源的数据和资源(Cookie、localStorage等)就能随意访问,这种情况简直不敢想象。所以为了浏览器采用同源策略是非常必要的。
3.解决方案(后端)
方案一:在后端的Controller类上加上注解@CrossOrigin
这样可以解决大部分的跨域问题
当然也可能不会生效,这时候就要采用方案二了
方案二
在springboot中添加配置类:
package com.zj.service_base.config;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;
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("http://localhost:8080")
// //允许跨域访问的方法
// .allowedMethods("GET","POST","DELETE","PUT","OPTION")
// //是否允许携带参数
// .allowCredentials(true)
.allowedHeaders()
// //最大相应时间
// .maxAge(3600);
registry
//过滤所有请求
.addMapping("/**")
//配置跨域来源
.allowedOrigins("http://localhost:9528", "null")
//是否支持跨域Cookie
.allowCredentials(true)
//最大响应时间
.maxAge(3600)
//设置允许访问的方法
.allowedMethods("GET", "POST", "PUT", "DELETE");
}
private CorsConfiguration corsConfiguration() {
CorsConfiguration cors = new CorsConfiguration();
cors.addAllowedOrigin("*");
cors.addAllowedHeader("*");
cors.addAllowedMethod("*");
//将请求头里保存的token暴露出来给前端获取
cors.addExposedHeader("Authorization");
return cors;
}
@Bean
public CorsFilter corsFilter() {
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
source.registerCorsConfiguration("/**", this.corsConfiguration());
return new CorsFilter(source);
}
}
我们只需要将如图所示的地址改为前端项目的地址即可:
方法三
package com.zhengjian.config;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
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("/**")
.allowedOriginPatterns("*") // SpringBoot2.4.0 [allowedOriginPatterns]代替[allowedOrigins]
.allowedMethods("*")
.maxAge(3600)
.allowCredentials(true);
}
}