springboot实现前后端分离跨域访问

在springboot项目中，前端html页面和后端api接口是分离的，实际项目部署的时候也是分开部署的。这样由于IP不同或者端口不同，就存在跨域问题，导致html无法调用api。
为解决此问题，实际项目部署的时候一般有三种解决方案：
（1）使用Nginx反向代理
使用Nginx反向代理，根据访问路径进行拦截，如果是html则指向静态页，如果是api，则把请求跳转到api的访问地址。一般这是大部分项目推荐使用的部署方式。
具体Nginx配置如下：

http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;
    keepalive_timeout  65;

    #前端页面服务器
    server {
        #监听端口和域名
        listen       8080; 
        server_name  localhost;

        #添加头部信息
        proxy_set_header Cookie $http_cookie;
        proxy_set_header X-Forwarded-Host $host;
        proxy_set_header X-Forwarded-Server $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        
        #拦截api接口访问
        location /api/ {              
               proxy_pass http://localhost:8080/;  #注意：使用代理地址时末尾记得加上斜杠"/"。      
        }
        
        #拦截静态页html
        location / {
               root   html/www;  #注意：使用"/"拦截全路径的时候记得放在最后。
               index  index.html index.htm;  #index表示首页 
        }           
        
    }
}

（2）将api和html部署在同一个tomcat
由于跨域是IP和端口不同导致的，那么将html和api部署在同一个tomcat中，就不存在跨域问题。只需将springboot项目打成war包和html部署在一就行，简单方便。这种方式只适合小型项目，一般不推荐。

（3）在springboot代码层面允许跨域
在springboot项目代码层面加入支持跨域配置，也可实现跨域访问。这种方式适合开发调试阶段使用。一般都要求边开发边调试，我就是与前端人员进行同步开发调试，在代码层面开启跨域访问，开发调试起来非常方便。
springboot开启跨域支持非常简单，只需要在启动类中配置WebMvcConfigurer，并重写addCorsMappings方法即可。

@Configuration
public class MyMvcConfig {

    @Bean
    public WebMvcConfigurer  webMvcConfigurer(){
        return new WebMvcConfigurer() {

            //配置跨域
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**")     //允许的路径
                        .allowedMethods("*")     //允许的方法
                        .allowedOrigins("*")       //允许的网站
                        .allowedHeaders("*")     //允许的请求头
                        .allowCredentials(true)
                        .maxAge(3600);
            }
}

以上三种方式均可解决跨域问题。总结：方法1是推荐的部署方式；方法2是适合小项目；方法3是推荐开发调试阶段使用。