vue+axios+nginx+springBoot 解决跨域（遇到的坑记录一下）

vue使用axios发送请求跨域问题。

一、什么是CORS?

CORS(Corss-Orign Resource Sharing)是W3C工作草案，是一份浏览器技术的规范。定义了跨域资源访问时，浏览器和服务器之间如何通信，使用自定义的http头部允许浏览器和服务器相互了解对方，从而决定请求或响应成功与否。CORS在现代浏览器都支持，使用和普通的ajax没有任何区别，关键是只要服务器实现CORS接口。

当使用axios发送请求时，浏览器首先校验content-type是否为application/x-www-form-urlencoded、multipart/form-data或text/plain。发送了两次请求就是这个原因，一次判断content-type，一次发送请求。

四种常见的 POST 提交数据方式

axios的content-type默认为application/json

开始解决。
①配置axios请求的baseURL


②打开nginx
nginx配置文件nginx.conf
在最后加上

server {
        listen    8848;   #监听端口（要代理请求的端口-from）
        server_name  localhost;   #监听地址
        location / {
            proxy_pass  http://localhost:8080;   #（代理的目标端口-to）
        } 
    }
}

③后端配置跨域配置WebMvcConfiguration类实现WebMvcConfigurer接口重新addCorsMappings跨域映射方法。
使用CrossOrigin注解也可以。

import lombok.extern.slf4j.Slf4j;
import org.springframework.context.annotation.Bean;
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 WebMvcConfiguration implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.
                // 设置允许跨域的路径
                addMapping("/**")
                // 设置允许跨域请求的域名
                .allowedOriginPatterns("*")
                // 是否允许证书
                .allowCredentials(true)
                // 设置允许的方法
                .allowedMethods("GET", "POST", "DELETE", "PUT", "PATCH")
                // 设置允许的header属性
                .allowedHeaders("*")
                // 跨域允许时间
                .maxAge(3600);
    }
}

重新运行问题解决。