Vue.js跨域请求代理与axios传参

最新推荐文章于 2023-02-20 19:48:13 发布

原创最新推荐文章于 2023-02-20 19:48:13 发布 · 281 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍如何在Vue项目中设置config/index.js文件进行跨域代理，通过配置proxyTable实现本地开发环境的跨域请求。同时，展示了使用axios插件发送POST请求的具体方法，包括数据序列化为JSON格式。

1.config/index.js

module.exports = {
  dev: {

  }
}

2.在dev花括号添加配置

proxyTable: {
      '/api':{
        target:'http://localhost:8080/kzy',//跨域域名路径
        changeOrigin:true,//允许跨域
        pathRewrite:{
          '^/api':''//代替target中地址（例如要访问的接口test,访问路径可写成/api/test）
        }
      }
    }

3.请求

   import axios from 'axios';
   import qs from 'qs';//转JSON插件

   methods: {
      goTo () {
        axios.post('/api/findByCategory', qs.stringify({name:"小明"}))
          .then(response => {
            console.log(response);
          })
          .catch(err => {
            console.log(err);
          });
        }
     }

安利：Vue官方推荐组件axios默认就是提交 JSON 字符串。