AJAX跨域问题以及解决办法

最近在写一个springboot + mybatis (后端) + html + css + JavaScript（前端）的小项目，使用 ajax 的时候，遇到了以前未遇到的 ajax 跨域问题，写下来与大家分享，并且以备不时之需。

一、什么是AJAX跨域问题？

现在的主流浏览器有安全校验机制，当我们发送XMLHttpRequest请求的时候，如果请求的是别的域(协议、主机域名、端口)不同时（只要有一个不同），那么就会产生跨域问题(也就是说客户端无法获取服务端返回的数据)。
发生跨域问题的前提是有XMLHttpRequest请求，所以如果不是XMLHttpRequest请求，一般不会有跨域问题。

二、什么时候会出现AJAX跨域问题？

1. 目前流行的前后端分离的开发模式，前端需要多次调用后端提供的API
2. 如果后端提供的API不是同一个域（主机域名 or 端口 or 协议 不同），那么就会出现ajax跨域问题

三、解决AJAX跨域问题

先贴代码：

package com.example.demo.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;

/**
 * 解决ajax跨域问题
 * */
@Configuration
public class CorsConfig {
    private CorsConfiguration buildConfig() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*"); // 允许任何域名使用
        corsConfiguration.addAllowedHeader("*"); // 允许任何头
        corsConfiguration.addAllowedMethod("*"); // 允许任何方法（post、get等）
        return corsConfiguration;
    }

    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", buildConfig());
        return new CorsFilter(source);
    }
}

我是使用w3c的cors实现跨域（直接在项目里加了这个类。。）
直接“三连”：

1. corsConfiguration.addAllowedOrigin("*");//允许任何主机域名使用
2. corsConfiguration.addAllowedHeader("*");//允许任何头
3. corsConfiguration.addAllowedMethod("*");//允许任何方法（post、get等）

注意：实际开发中尽量不要滥用上面的方式。
例如：上面的header配置了通配符（*），这意味着任何域都可以访问本域的资源，容易被黑客攻击并盗取数据！！！

[参考文档]
[1]: https://www.cnblogs.com/zhyue93/p/ajax.html
[2]: https://www.imooc.com/learn/947