Vue报错has been blocked by CORS policy Response to preflight request doesn‘t pass access controlcheck

【已解决–我的是由于vue-cli版本问题，前文太长可以直接跳转到解决方案】

文章目录

• • • 服务端跨域解决
    • Nginx配置跨域（下文的解决方案是开发环境下，部署上线需要在nginx中配置反向代理）
    • 前端的跨域配置
    • 解决方案
    • 网上的一些解决方案

全部的报错信息：
Access to XMLHttpRequest at 'http://127.0.0.1:7772/person/sysOrgInfo/query-next-org-emp?id=xxx' from origin 'http://localhost:8086' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
项目中添加了token验证功能，本来可以正常使用加上token认证后就出现报错。刚开始我以为是跨域问题，项目的服务端已经添加了跨域的解决方案，postman测试可以访问，前端去访问接口时会出现报错。

跨域问题产生：当我们的服务端和前端不在一个服务器或者在同一个服务器但是使用不同的接口时，就会出现跨域问题。跨域问题的出现是由于浏览器的同源策略。

服务端跨域解决

服务端跨域解决：新建一个配置文件，全局跨域问题解决（项目部署上线后，前端的本地代理失效，须采用后端跨域解决方案或者在Nginx配置代理）我这里下面的解决方案主要针对的是在开发环境下后端已经配置跨域前端还不能进行访问的问题

1.后端相关Controller添加跨域注解@CrossOrigin( 这个注解可以让外界直接访问到这个controller层,但是需要每一个controller都添加 太麻烦)
2.新建CorsConfig类，继承WebMvcConfigurer ，并重写addCorsMappings方法

@Configuration
public class CorsConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
//        设置允许跨域的路径
        registry.addMapping("/**")
//                设置允许跨域请求的域名
                .allowedOrigins("*")
//