axios使用过程中的一些坑

最新推荐文章于 2025-06-03 10:39:26 发布

原创最新推荐文章于 2025-06-03 10:39:26 发布 · 4k 阅读

2 ·

CC 4.0 BY-SA版权

web前端同时被 3 个专栏收录

1 篇文章

订阅专栏

axios

1 篇文章

订阅专栏

vue

1 篇文章

订阅专栏

本文介绍在Vue项目中使用Axios解决跨域问题的方法，包括安装配置、proxyTable设置及代码示例。

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

在前后端分离的开发模式中，在开发中如何解决跨域问题，axios无疑是一个很好的解决方式。但在使用过程中，特别是第一次使用的情景下，经常会出现一些各种各样的问题，下面是常见遇到的一些问题以及解决方式。

vue-cli搭建的开发环境中，引用axios需要先安装axios，

npm install axios --save

在安装过程中，特别是第一次安装，会出现安装错误，这时可以试用 cnpm install axios --save的方式进行安装,

如果仍然安装不上，则删除项目中的node_modules, cnpm install ,cnpm install axios --save 进行重复安装

安装成功后，修改项目文件config/index.js,

将module.exports 中的 dev中的 proxyTable 设置为如下图中的值

module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    // Various Dev Server settings
    host: 'localhost', // can be overwritten by process.env.HOST
    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    autoOpenBrowser: false,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-

    proxyTable: {
      '/api': {
        target: 'http://xxx',//这里是服务器地址额
        changeOrigin: true, //核心 ，支持跨域
        pathRewrite: {
          '^/api': ''//这里理解成用‘/api’代替target里面的地址，后面组件中我们掉接口时直接用api代替 
                //比如我要调用'http://40.00.100.100:3002/user/add'，直接写‘/api/user/add’即可
        }
      }
    },

main.js文件增加如下代码

import axios from 'axios'

Vue.prototype.axios=axios;

经过如上的步骤，在代码实例中就可以应用了，如下案例

methods:{
      getOrgs(){
        this.axios.get("api/sys/security/org").then(response=>{
            console.log(response)
        }).catch(function (error) {
            console.log(error);
        })
      }
  }