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

什么是跨域？

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

广义的跨域：

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

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

什么是同源策略？

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

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

Cookie、LocalStorage 和 IndexDB 无法读取。
DOM 和 Js对象无法获得。
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了，超简单，感谢各位大佬阅读，不喜勿喷！！！

巴特西

前后分离调用API跨域