再vue项目使用axios原生发送post请求

前言：在大多数项目开发中，都是采用前后端分离架构，在此情况下都采用一些成熟的框架，类似于ruoyi，因为成熟所以前端的请求都进行了各种封装，有时想单独发起一个简单的请求，还有点麻烦，因此记录一下。

1.  
   // 在xxx.vue文件中引入
2.  
   import axios from 'axios'
3.  
    
4.  
   // 在methods 对象中使用
5.  
   methods: {
6.  
   goToUrl: function() {
7.  
   axios({
8.  
   method: "post",
9.  
   url: 'http://localhost:81/geecg-api/jeecg-boot/sys/phoneLogin',
10.  
    headers: {
11.  
    "Content-Type": "application/json"
12.  
    },
13.  
    data: {
14.  
    "mobile":"18012124548",
15.  
    "captcha": "234"
16.  
    },
17.  
    }).then(function (response) {
18.  
    console.log("111111111111")
19.  
    console.log(response);
20.  
    if (response.data.code ==200){
21.  
    window.open("http://localhost:3000", '_blank');
22.  
    }
23.  
    }).catch(function (error) {
24.  
    console.log(error);
25.  
    });
26.  
    }
27.  
    }
28.  
     

因为是前后端分离，当前前端使用的端口是81，后端运行的端口是8080，就产生跨域问题，所以还需要在vue.config.js中进行代理配置。

1.  
   devServer: {
2.  
   host: '0.0.0.0',
3.  
   port: port,
4.  
   open: true,
5.  
   proxy: {
6.  
   // 到jeecg 的代理
7.  
   ['/geecg-api']: {
8.  
   target: `http://localhost:8080`,
9.  
   // target: `http://api-dashboard.yudao.iocoder.cn`,
10.  
    changeOrigin: true,
11.  
    pathRewrite: {
12.  
    '^/geecg-api': ''
13.  
    }
14.  
    }
15.  
    },
16.  
    disableHostCheck: true
17.  
    },

这篇好文章是转载于：学新通技术网