问题再现:
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("*");

    }
}

跨域请求介绍

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

前往低代码交流专区

更多推荐