[JavaScript知识库]在Vue+Spring Boot项目中Axios跨域接收后端发送的数据

需要导入Axios插件https://www.axios-http.cn/docs/intro

npm install axios

Vue部分

首先在/src/main.js里配置

//Axios
import Axios from 'axios';
    //Axios global configuration
    //默认路径
    Axios.defaults.baseURL='/api'
   //设置post请求的内容类型，为json格式
    Axios.defaults.headers.post['Content-Type']='application/json'

第二步在/config/index.js下为刚刚设置的baseURL=‘默认路径’即’/api‘进行跨区改造

 proxyTable: {
      //axios跨域改造
      '/api': {
        target:'http://localhost:8000', // 你请求的第三方接口
        // 在本地会创建一个虚拟服务端，然后发送请求的数据，
        // 并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
        changeOrigin:true, 
        pathRewrite:{ 
         // 路径重写，是配置往target接口的重定向匹配的
          //相当于把当前端口的target请求localhost:8001/api/xxx,在跨域的时候，把/api替换成'^/api'的值''.
          //这时一个请求localhost:8001/api/xxx会变成http://localhost:8000/xxx
          //如果不配置pathRewrite 请求就被转发到 http://XX.XX.XX.XX:8000 并把相应uri带上。
          //比如：localhost:8001/api/xxx 会被转发到http://localhost:8000/xxx
          '^/api': ''  
        }
      }
    }
 }

Vue组件中的调用

<template>
  <button @click="Click">点我</button>
</template>


<script>

import axios from "axios";
export default {
  name: "table",
  methods: {
    getMsg:function (){
        //发出get请求， 后续的.then()处理数据，
      // then中用箭头函数的形式，因为后续要处理到data中的msg变量
      //因为使用箭头函数没有对 this 的绑定。
      axios.get('/getMsg').then((res) =>{
      //获取数据
        this.msg=res.data
          //获取请求状态
        console.log(res.status)
      }).catch(function (err){
        console.log(err)
      })
    }
    Click() {
      console.log(this.msg);
    },
 }，
 data() {
 	return {
 		msg:''
 	}
  },
 mounted() {
     this.getMsg();
 }
</script>

Spring Boot部分

首先是配置SpringBoot项目运行的端口号，和Vue那边配置的跨域端口号一样

server:
  port: 8000

然后是controller

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class testController {

    @RequestMapping("/getMsg")
    public String getMsg(){
        return "Hello,Vue SpringBoot Connect By Axios";
    }
}

最后把两个项目分别打开
可以看到控制台输出了200，说明跨域请求成功
然后点击按钮输出了spring boot 中返回的那段话

实际应用中后端发送数据要加上Json格式转化，前端处理数据时要加上Json格式数据解析