localhost跨域问题解决

建立一个简单的springboot项目，在vue中使用axios发送请求，结果却出现报错

什么是跨域？

同源策略：为了保证浏览器的安全，不同源的客户端脚本在没有明确授权的情况下，不能去读写对方的资源 

什么是同源

所谓同源就是指两个页面有相同的协议，主机和端口号，一旦其中有一个不一样，就是不同源，此时无法读取非同源网页的Cookie，当然也就无法发送axios请求

        CORS全称为 Cross Origin Resource Sharing（跨域资源共享）。这种方案对于前端来说没有什么工作量，和正常发送请求写法上没有任何区别，工作量基本都在后端这里。每一次请求，浏览器必须先以OPTIONS请求方式发送一个预请求（也不是所有请求都会发送 options，展开介绍 点我），通过预检请求从而获知服务器端对跨源请求支持的 HTTP方法。在确认服务器允许该跨源请求的情况下，再以实际的HTTP请求方法发送那个真正的请求。推荐的原因是：只要第一次配好了，之后不管有多少接口和项目复用就可以了，一劳永逸的解决了跨域问题，而且不管是开发环境还是正式环境都能方便的使用。详细 MDN 文档

但总有后端觉得麻烦不想这么搞，那纯前端也是有解决方案的。

        在dev开发模式下可以使用 webpack 的proxy也很方便，参照 文档 就会使用了，楼主一些个人项目使用的就是该方法。但这种方法在生产环境是不能使用的。在生产环境中需要使用 nginx 进行反向代理。不管是proxy 和nginx 的原理都是一样的，通过搭建一个中转服务器来转发请求从而规避跨域的问题。

开发环境	生产环境
cors	cors
proxy	nginx

解决方法

1、Springboot中配置CORS

直接添加注解@CrossOrigin

@CrossOrigin
@RestController
@RequestMapping("/user")
public class UserController {

}

但是这个方法只会在本Controller中起作用，在别的Controller上也需要加，比较繁琐

2、全局跨域处理

配置一个跨域过滤器

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;

@Configuration
public class MyCorsConfig {

    @Bean
    public CorsFilter corsFilter(){
        CorsConfiguration config = new CorsConfiguration();
        //允许谁来异步访问
//        config.addAllowedOrigin("*");    //允许所有人访问，不安全不推荐
        config.addAllowedOrigin("http://localhost:7777");   //这里写允许访问的前端服务器
        config.setAllowCredentials(true);    //传递cookie

        config.addAllowedMethod("*");    //允许哪些方法访问(*是全部方法)
//        config.addAllowedMethod("OPTIONS");
//        config.addAllowedMethod("HEAD");
//        config.addAllowedMethod("GET");
//        config.addAllowedMethod("PUT");
//        config.addAllowedMethod("POST");
//        config.addAllowedMethod("DELETE");
//        config.addAllowedMethod("PATCH");

//        允许的头信息
        config.addAllowedHeader("*");

        //过滤资源
        UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource();
        configSource.registerCorsConfiguration("/**",config);

        return new CorsFilter(configSource);
    }
}

测试

 页面成功跳转