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);
    }
}