vue cli4 axios跨域请求

Bertha 。 2023-02-19 05:23 28阅读 0赞

# 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前端请求效果 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZW54dWU_size_16_color_FFFFFF_t_70][]

### 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安装同样自行百度。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZW54dWU_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200619102723718.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZW54dWU=,size_16,color_FFFFFF,t_70