解决Vue前后端跨域问题的方式汇总

npm i axios

// 引入axios
import axios from 'axios'

<template>
    <div>
        <button @click="getInfo">获取信息</button>
    </div>
</template>
<script>
    // 引入axios
    import axios from 'axios'
    export default {
            name:'App', 
            methods:{
                getInfo(){
                    // 使用axios发送请求(get) 发送请求后会有两个回调
                    axios.get('http://localhost:9090/queryUserInfo').then(
                        // 成功回调
                        success=>{
                            console.log('请求成功！')
                            // 请求成功后的数据
                            console.log(success.data)
                        },
                        // 失败回调
                        error=>{    
                            console.log('请求失败！')
                            // 请求失败原因
                            console.log(error.message)
                        }
                    )
                }
            }
        }
</script>

package com.wyh.config;
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 CorsMapping implements WebMvcConfigurer {
    @Override
    /**
     * 重新跨域支持方法
     * CorsRegistry  开启跨域注册
     */
    public void addCorsMappings(CorsRegistry registry) {
        //addMapping 添加可跨域的请求地址
        registry.addMapping("/**")
                //设置跨域 域名权限 规定由某一个指定的域名+端口能访问跨域项目
                .allowedOrigins("*")
                //是否开启cookie跨域
                .allowCredentials(false)
                //规定能够跨域访问的方法类型
                .allowedMethods("GET","POST","DELETE","PUT","OPTIONS")
                //添加验证头信息  token
                //.allowedHeaders()
                //预检请求存活时间 在此期间不再次发送预检请求
                .maxAge(3600);
    }
}