使用axios进行跨域访问数据库接口实现前后端分离

最新推荐文章于 2024-10-02 12:09:21 发布

One-Direction

最新推荐文章于 2024-10-02 12:09:21 发布

阅读量3k

点赞数 2

分类专栏： Vue 文章标签： Vue

本文链接：https://blog.csdn.net/BUCTOJ/article/details/89277477

版权

Vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

安装axios

npm install axios --save

如果安装有cnpm可以使用cnpm使用淘宝镜像安装，速度更快；–save是向dependencies节点写入依赖，下次安装会把module包安装到node_modules目录汇总，会修改package.json，将模块名和版本号添加到dependencies部分，之后运行npm install 命令时，会自动安装module包。

导入axios

在mian.js下导入axios
import axios from 'axios'

Vue.prototype.$axios=axios;
Vue.prototype.HOME='/api';
axios.defaults.headers.post['Content-Type']= 'application/x-www-form-urlencoded;charset=UTF-8'; // 配置请求头

修改配置文件

修改config下的index.js中module.exports中的proxyTable对象

proxyTable: {
      '/api': {
        target: 'http://x.maggch.cn:3000',
        // secure: false, // 如果是https接口，需要配置这个参数
        changeOrigin: true,//是否为跨越请求
        pathRewrite: {
          '^/api': ''// /api 便为target所指向的地址，定义为HOME
        }
      }

    },

在源文件里使用axios

methods: {
    get_data:function () {
      let url = this.HOME + '/mock/11/entity/student';
      this.$axios.get(url).then(res => {
        let obj =JSON.stringify(res.data);
        let obj1=JSON.parse(obj);
        document.getElementById('display').innerHTML = obj1["姓名"];
      }).catch(error => {
        console.log(error);
        alert(error);
      });
    }
  }