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

最新推荐文章于 2025-06-30 09:28:10 发布

One-Direction

最新推荐文章于 2025-06-30 09:28:10 发布

阅读量3k

点赞数 2

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/BUCTOJ/article/details/89277477

本文介绍如何使用Axios库进行API调用，包括安装、配置和使用方法。通过示例展示了如何在Vue项目中引入Axios，并配置代理以解决跨域问题，最后演示了如何在方法中调用API获取数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装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
        }
      }

    },