axios处理跨域问题-创新互联-乐山大橙子建站

新闻中心

这里有您想知道的互联网营销解决方案

axios处理跨域问题-创新互联

首先npm安装好axios，其次在main.js中引入：

发展壮大离不开广大客户长期以来的信赖与支持，我们将始终秉承“诚信为本、服务至上”的服务理念，坚持“二合一”的优良服务模式，真诚服务每家企业，认真做好每个细节，不断完善自我，成就企业，实现共赢。行业涉及混凝土泵车等，在成都网站建设、营销型网站、WAP手机网站、VI设计、软件开发等项目上具有丰富的设计经验。

import axios from 'axios'

Vue.prototype.$axios = axios //把axios挂载到vue的原型中，在vue中每个组件都可以使用axios发送请求
Vue.prototype.HOME = '/api' //重要在于这里，Vue.prototype.HOME = '/api'是一个定值，默认指向localhost，所有修改指向路径为'/api'，配置文件index.js定义的可跨域路径

第二步就是修改上述所说的config>index.js配置文件

module.exports = {
  dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {     //axios跨域处理
      '/api': {       //此处并非和url一致
        target:'http://192.168.2.80:8081/',
        changeOrigin:true, //允许跨域
        pathRewrite:{
          '^/api': ''
        }
      }
    }
}
....以下省略
}

最后就是在需要跨域的文件中操作了：

 created() {
      var url = this.HOME + '/index***ds/getFe***List';  //HOME变量为已挂载的可跨域域名，这里将其拼接完，成为一个完整路径
      this.$axios({  //this代表vue对象，之前在入口文件中把axios挂载到了vue中，所以这里直接用this.$axios调用axios对象
        method: 'post',
        url: url,
        data: {feedType: 1, page: 1, pagesize: 10}
      }).then(function (res) {
        console.log(res);
      }).catch(function (err) {
        console.log(err);
      })
    },

这样就可以成功跨域，拿到后台返回的数据了。

需要注意的是：在Vue项目中如果我们修改了config里面的文件，请千万要重新启动项目，重新启动项目，重新启动项目，不然一定会报错。

当然，这只是在本地可以正常跨域访问接口，线上的话，还需要和后台协商处理

升级到 Vue3 后，会发现 Vue2 中存放配置的 config 文件夹没有了，大家不要慌张。可以在 package.json 文件的同级目录下创建 vue.config.js 文件。给出该文件的基础配置：

module.exports = {
    outputDir: 'dist',   //build输出目录
    assetsDir: 'assets', //静态资源目录（js, css, img）
    lintOnSave: false, //是否开启eslint
    devServer: {
        open: true, //是否自动弹出浏览器页面
        host: "localhost", 
        port: '8081', 
        https: false,   //是否使用https协议
        hotOnly: false, //是否开启热更新
        proxy: null,
    }
}

Vue3 解决跨域，内容只有第二步配置代理和 Vue2 不同，其他的一致。

devServer: {
    open: true, //是否自动弹出浏览器页面
    host: "localhost", 
    port: '8081',
    https: false,
    hotOnly: false, 
    proxy: {
        '/api': {
            target: 'https://www.v2ex.com/api', //API服务器的地址
            changeOrigin: true,
            pathRewrite: {
                '^/api': ''
            }
        }
    },
}

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

本文名称：axios处理跨域问题-创新互联
网址分享：http://lswzjz.com/article/dgjdse.html

新闻中心

其他资讯