前后分离调用API跨域

前后分离调用API接口跨域问题

什么是跨域？

　　 跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的。

广义的跨域：

1. 资源跳转：A链接、重定向、表单提交。
2. 资源嵌入： <link>、<script>、<img>、<frame>等dom标签，还有样式中background:url()、@font-face()等文件外链。
3. 脚本请求： js发起的ajax请求、dom和js对象的跨域操作等。

　　其实我们通常所说的跨域是狭义的，是由浏览器同源策略限制的一类请求场景。

什么是同源策略？

　　同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名。

　　

同源策略限制以下几种行为：

1. Cookie、LocalStorage 和 IndexDB 无法读取。
2. DOM 和 Js对象无法获得。
3. AJAX 请求不能发送。

跨域场景：

　　

url	说明	是否允许通信
http://www.domain.com/a.js http://www.domain.com/b.js http://www.domain.com/lab/c.js	同一域名，不同文件或路径	允许
http://www.domain.com:8000/a.js http://www.domain.com/b.js	同一域名，不同端口	不允许
http://www.domain.com/a.js https://www.domain.com/b.js	同一域名，不同协议	不允许
http://www.domain.com/a.js http://192.168.4.12/b.js	域名和域名对应相同ip	不允许
http://www.domain.com/a.js http://x.domain.com/b.js http://domain.com/c.js	主域相同，子域不同	不允许
http://www.domain1.com/a.js http://www.domain2.com/a.js	不同域名	不允许

　　

解决方式：（这里只介绍一种最简单的方式）

跨域资源共享（CORS）

　　SpringBoot新增WebMvcConfiguration类

package com.yhzy.zytx.common.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.WebMvcConfigurer;
 
/**
 * @ClassName WebMvcConfiguration
 * @Description 跨域请求处理
 * @Author 天生傲骨、怎能屈服
 * @Date 2019/5/31 16:19
 * @Version 1.0
 */
@Configuration
public class WebMvcConfiguration implements WebMvcConfigurer {
 
    @Bean
    public CorsFilter corsFilter() {
        final UrlBasedCorsConfigurationSource urlBasedCorsConfigurationSource = new UrlBasedCorsConfigurationSource();
        final CorsConfiguration corsConfiguration = new CorsConfiguration();
        /*是否允许请求带有验证信息*/
        corsConfiguration.setAllowCredentials(true);
        /*允许访问的客户端域名*/
        corsConfiguration.addAllowedOrigin("*");
        /*允许服务端访问的客户端请求头*/
        corsConfiguration.addAllowedHeader("*");
        /*允许访问的方法名,GET POST等*/
        corsConfiguration.addAllowedMethod("*");
        urlBasedCorsConfigurationSource.registerCorsConfiguration("/**", corsConfiguration);
        return new CorsFilter(urlBasedCorsConfigurationSource);
    }
}

　　

　　注：类上要加@Configuration注解

　　这样就OK了，超简单，感谢各位大佬阅读，不喜勿喷！！！