vue cli4 axios跨域请求

vue cli4 axios跨域请求

1、在项目的根目录下新建一个vue.config.js文件，内容如下：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://10.10.17.200:8080',
        ws: true,
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

2、在需要跨域的组件中，写axios请求。

created () {
    axios.get('/api/getUsers').then(response => (this.userList = response.data))
      .catch(function (error) { // 请求失败处理
        console.log(error)
      })
  }

3、写后端接口代码

@RequestMapping("getUsers")
	@ResponseBody
	public List<User> getUsers(){
		List<User> userList=new ArrayList<User>();
		User user1=new User();
		User user2=new User();
		user1.setId(1000);
		user1.setUsername("user01");
		user1.setAge(18);
		user1.setSex("男");
		user1.setCity("广州");
		user1.setPhone("188*****5878");
		
		user2.setId(1001);
		user2.setUsername("user02");
		user2.setAge(20);
		user2.setSex("女");
		user2.setCity("上海");
		user2.setPhone("189*****456");
		userList.add(user1);
		userList.add(user2);
		return userList;
	}

4、vue前端请求效果

5、最后附上前端组件完整代码

<template>
  <el-container>
    <el-table
      :data="userList"
      border
      style="width: 100%">
      <el-table-column
        prop="id"
        label="ID"
        >
      </el-table-column>
      <el-table-column
        prop="username"
        label="姓名"
        >
      </el-table-column>
      <el-table-column
        prop="sex"
        label="性别">
      </el-table-column>
      <el-table-column
        prop="age"
        label="年龄">
      </el-table-column>
      <el-table-column
        prop="city"
        label="地址">
      </el-table-column>
      <el-table-column
        prop="phone"
        label="手机">
      </el-table-column>
    </el-table>
  </el-container>
</template>
<script>
import axios from 'axios'
export default {
  name: 'axios',
  components: {

  },
  data () {
    return {
      userList: null
    }
  },
  created () {
    axios.get('/api/getUsers').then(response => (this.userList = response.data))
      .catch(function (error) { // 请求失败处理
        console.log(error)
      })
  }
}
</script>

注意：本实例使用了Element UI、安装方法自行百度、vue-cli、axios安装同样自行百度。