Powered by md-Blog  文 - 篇  访客 -

Vue.js利用WebPack配置Proxy代理进行POST通信实现前后端分离开发模式


  分类:Vue  / 
更新:2020-11-01 17:25:25  /  创建:2020-07-28 11:17:35
不要删除

1、配置 webpack.dev.js

devServer: {
  proxy: {
    '/api': {
      target: 'http://tdl.cc',
      changeOrigin: true,
      // pathRewrite: { '^/api': '/api' }
    }
  },
}

2、安装 axios 进行 Ajax 通信

yarn add axios

3、安装 qs 进行 POST 序列化

yarn add qs

4、配置入口文件 main.js

// axios
import axios from 'axios'
Vue.prototype.$axios = axios

5、配置组件

// axios
import qs from 'qs'

export default {
  methods: {
    login(){
      let qsData = qs.stringify({
        login: "hello",
      });

      this.$axios
        .post("/api/login.php", qsData)
        .then((res) => {
          console.log(res);
          
        })
        .catch((error) => {
          console.log(error);
        });
    }
  }

不要删除

小站不易,感谢支持!