一.什么是跨域问题
就是浏览器对JS施加的一种安全限制.浏览器默认不允许JS脚本获取远程网站的数据.
当JS发送AJAX请求时,就要遵守同源策略,否则会被限制.
此外,通过img、iframe、script等标签的src属性,则不限制。主要限制不同源网站相互之间的ajax调用。
二.跨域请求的流程
针对一些非简单的跨域请求,浏览器会先发送一个预检请求(请求方法为OPTIONS),也就是询问服务器是否允许这样的跨域请求,如果浏览器允许,
才会发送真正的数据请求.
什么是非简单的请求?
某些请求不会触发 CORS 预检请求。本文称这样的请求为“简单请求”,若请求 满足所有下述条件,则该请求可视为“简单请求”:
三.跨域问题的体现
如果你的请求出现如下报错,那就是出现了跨域问题
四.跨域问题解决
1.使用nginx统一代理
我们可以将前端项目也部署到nginx服务器中,然后所有的请求均由nginx进行统一转发,从而解决跨域问题.
2.配置当前请求允许跨域.
既然跨域会发送预检请求,那么我们只要在后端配置允许当前请求可以跨域不就可以了吗.
我们可以在后端设置添加请求头进行返回,也就是配置一个filter,就可以实现跨域请求配置.
举例:
@Configuration
public class CronConfig {
@Bean
public CorsWebFilter corsWebFilter(){
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
CorsConfiguration corsConfiguration = new CorsConfiguration();
//允许带哪些请求头的请求跨域
corsConfiguration.addAllowedHeader("*");
//允许哪些请求方法跨域
corsConfiguration.addAllowedMethod("*");
//允许哪些请求来源跨域
corsConfiguration.addAllowedOrigin("*");
//是否允许携带cookie跨域
corsConfiguration.setAllowCredentials(true);
//针对任意路径均进行跨域配置
source.registerCorsConfiguration("/**",corsConfiguration);
return new CorsWebFilter(source);
}
}
今天的分享就到这里了,有问题可以在评论区留言,均会及时回复呀.
我是bling,未来不会太差,只要我们不要太懒就行, 咱们下期见.