建立一个简单的springboot项目，在vue中使用axios发送请求，结果却出现报错
什么是跨域？
同源策略：为了保证浏览器的安全，不同源的客户端脚本在没有明确授权的情况下，不能去读写对方的资源
什么是同源
所谓同源就是指两个页面有相同的协议，主机和端口号，一旦其中有一个不一样，就是不同源，此时无法读取非同源网页的Cookie，当然也就无法发送axios请求
CORS全称为 Cross Origin Resource Sharing（跨域资源共享）。这种方案对于前端来说没有什么工作量，和正常发送请求写法上没有任何区别，工作量基本都在后端这里。每一次请求，浏览器必须先以OPTIONS请求方式发送一个预请求（也不是所有请求都会发送 options，展开介绍点我），通过预检请求从而获知服务器端对跨源请求支持的HTTP方法。在确认服务器允许该跨源请求的情况下，再以实际的HTTP请求方法发送那个真正的请求。推荐的原因是：只要第一次配好了，之后不管有多少接口和项目复用就可以了，一劳永逸的解决了跨域问题，而且不管是开发环境还是正式环境都能方便的使用。详细MDN 文档
但总有后端觉得麻烦不想这么搞，那纯前端也是有解决方案的。
在dev开发模式下可以使用 webpack 的proxy也很方便，参照文档就会使用了，楼主一些个人项目使用的就是该方法。但这种方法在生产环境是不能使用的。在生产环境中需要使用nginx进行反向代理。不管是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;@Configurationpublic class MyCorsConfig {@Beanpublic CorsFilter corsFilter(){CorsConfiguration config = new CorsConfiguration();//允许谁来异步访问// config.addAllowedOrigin("*"); //允许所有人访问，不安全不推荐config.addAllowedOrigin("http://localhost:7777"); //这里写允许访问的前端服务器config.setAllowCredentials(true); //传递cookieconfig.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);}}
测试
页面成功跳转
