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

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

// 在xxx.vue文件中引入
import axios from 'axios'

// 在methods 对象中使用
  methods: {
    goToUrl: function() {
      axios({
        method: "post",
        url: 'http://localhost:81/geecg-api/jeecg-boot/sys/phoneLogin',
        headers: {
          "Content-Type": "application/json"
        },
        data: {
          "mobile":"18012124548",
          "captcha": "234"
        },
      }).then(function (response) {
        console.log("111111111111")
        console.log(response);
        if (response.data.code ==200){
          window.open("http://localhost:3000", '_blank');
        }
      }).catch(function (error) {
        console.log(error);
      });
    }
  }

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

  devServer: {
    host: '0.0.0.0',
    port: port,
    open: true,
    proxy: {
      // 到jeecg 的代理
      ['/geecg-api']: {
        target: `http://localhost:8080`,
        // target: `http://api-dashboard.yudao.iocoder.cn`,
        changeOrigin: true,
        pathRewrite: {
          '^/geecg-api': ''
        }
      }
    },
    disableHostCheck: true
  },