SpringBoot 项目中允许 跨域访问 添加CorsMappings

最近开始学习 vue-element-admin 实现前后端分离，

学习教程：

• 手摸手，带你用vue撸后台 系列一（基础篇）
• 手摸手，带你用vue撸后台 系列二(登录权限篇)
• 手摸手，带你用vue撸后台 系列三 (实战篇)
• 手摸手，带你用vue撸后台 系列四(vueAdmin 一个极简的后台基础模板)
• 手摸手，带你封装一个vue component
• 手摸手，带你优雅的使用 icon
• 手摸手，带你用合理的姿势使用webpack4（上）
• 手摸手，带你用合理的姿势使用webpack4（下）

后端：SpringBoot + JPA 

因为项目比较紧急我本人直接开始从vue-cli 脚手架开始学习，里面包含了vue-loader，vuex，vue-router...，

关于vue-cli 详细介绍：https://blog.csdn.net/haochangdi123/article/details/80274210

----------------------------------------------------------------------------------------------------------------------------------

当我与部署好后端项目，前段相应逻辑也写完了以后，想测试下，结果发现：

经过查阅网上资料后发现 原来是跨域了。 针对网上的教程我尝试了  在axios 里面的 headers 设置成：

  headers: {
    'Content-Type':'application/x-www-form-urlencoded'
  }

再次尝试，访问结果还是报错，只不过不是403。

发现这种方式    并不适合我我现在已有环境下，所以我还是改回了：

  headers: {
    'Content-type': 'application/json;charset=UTF-8'
  }

解决方法：

从后端接口做修改，让接口允许跨域被访问。

package com.keyun.minigame.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;

@Configuration
public class CorsConfig extends WebMvcConfigurerAdapter
{
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        //配置基本CorsMappings
        System.out.println("----------------------");
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowCredentials(true)
                .allowedMethods("GET", "POST", "DELETE", "PUT")
                .maxAge(3600);
    }
}

访问结果：

自己踩了很多坑，希望通过这篇博客让更多的程序猿 少走弯路。