Vue3使用axios请求springboot时遇到跨域错误解决办法

原创已于 2022-09-05 17:28:35 修改 · 4.8k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript

于 2022-06-05 20:04:22 首次发布

本文介绍了Vue应用中遇到的跨域问题，通过修改vue.config.js配置并结合SpringBoot后端处理，详细展示了如何解决同源策略限制下的API请求。重点讲解了配置代理和后端 Cors 设置。

问题再现：
vue请求代码

<script>
    const app = Vue.createApp({
        data() {
            return {
                msg: ''
            }
        },
        mounted() {
            axios.get('http://127.0.0.1:8080/test').then((Response)=>{
                console.log(Response.data);
                this.msg = Response.data;
            })
        }
    }).mount("#dataTest");
</script>

启动Vue项目，测试请求：
在这里插入图片描述
典型的跨域请求错误，文章末尾有介绍什么是跨域请求错误
解决方法
打开vue.config.js

加上以下代码：

//vue使用axios遇到跨域访问错误的解决办法
module.exports = {
  devServer:{
    proxy:{
      '/test':{		//axios请求的别名
        // 跨域的服务器地址
        target: 'http://127.0.0.1:8080/test',	//真实请求的地址
        // 是否允许跨域
        changeOrigin: true,
        // 替换掉请求路径的/sougou为“”
        pathRewrite:{'^/test': ""}
      },
    }
  }
}

原来代码的请求地址就改为/test

<script>
    const app = Vue.createApp({
        data() {
            return {
                msg: ''
            }
        },
        mounted() {
            axios.get('/test').then((Response)=>{
                console.log(Response.data);
                this.msg = Response.data;
            })
        }
    }).mount("#dataTest");
</script>

修改vue.config.js文件后要重启项目
方法测试：
在这里插入图片描述
测试成功，解决跨域请求问题
只需编写一个配置类即可

SpringBoot后端解决跨域

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 CorsConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                //.allowedOriginPatterns("*")
                .allowedMethods("GET", "HEAD", "POST", "PUT", "DELETE", "OPTIONS")
                .allowCredentials(true)
                .maxAge(3600)
                .allowedHeaders("*");

    }
}

跨域请求介绍

什么是跨域？
跨域的出现是由于：同源策略（Sameoriginpolicy），它是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。
什么时候会出现跨域
只要请求的：域名、端口、协议，任意一个不同时都会出现跨域请求问题
解决方法
见上面