网上的绝大部分教程解决vue+axios跨域问题都不能直接适用vue-cli3。这是因为vue-cli3不一样的配置方式导致的。

如果是使用vue-cli3构建的项目,那么默认是没有config.js文件的。按照官方文档介绍,每个人可以通过在项目根目录下建立vue.config.js文件,配置属于自己的config文件。

之后按照网上其他的解决axios跨域问题的方案实施即可。

// vue.config.js
module.exports = {
    publicPath: '/',
    devServer: {
        proxy: {
            '/api': {
                target: 'http://localhost:10086',
                changeOrigin: true,
                ws: true,
                pathRewrite: {
                  '^/api': ''
                }
            }
        }
    }
}

【VUE】vue在vue-cli3环境下基于axios解决跨域问题的更多相关文章

  1. vue开发环境和生产环境里面解决跨域的几种方法

    什么是跨域   跨域指浏览器不允许当前页面的所在的源去请求另一个源的数据.源指协议,端口,域名.只要这个3个中有一个不同就是跨域. 这里列举一个经典的列子: #协议跨域 http://a.baidu. ...

  2. vue ui九宫格、底部导航、新闻列表、跨域访问

    一.  九宫格 九宫格:在mint-ui组件库基于vue框架 mui不是基于vue框架 只是css/js文件 (1)官方网站下载安装包 (2)copy css js fonts[字体图标] src/l ...

  3. Vue使用Axios实现http请求以及解决跨域问题

    Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中.Axios的中文文档以及github地址如下: 中文:https://www.kancloud.cn/y ...

  4. 搞懂:前端跨域问题JS解决跨域问题VUE代理解决跨域问题原理

    什么是跨域 跨域:一个域下的文档或脚本试图去请求另一个域下的资源 广义的跨域包含一下内容: 1.资源跳转(链接跳转,重定向跳转,表单提交) 2.资源请求(内部的引用,脚本script,图片img,fr ...

  5. vue webpack配置解决跨域问题

    现在基本项目都是实行前后端分离的原则,不管是ng 或者是vue 在开发中都无法避免跨域的这个问题 本人刚上手第一个vue项目,在调用api的时候出现了跨域的这个问题 这是封装好一个简单的post 请求 ...

  6. vue 解决跨域问题

    1.后端处理允许跨域 2.反向代理跨域 代理服务器英文全称是Proxy Server,其功能就是代理网络用户去去的网络信息.形象的说:它是网络信息的中转站. vue中设置代理: 1.config/in ...

  7. vue+nodejs+express解决跨域问题

    nodejs+express解决跨域问题,发现网上的大部分都是误导人,花了不少时间,终于弄懂了, 我在vue+nodejs+express+mongodb的项目里面,发现本地用vue代理正常调用远程的 ...

  8. 部署spring boot + Vue遇到的坑(权限、刷新404、跨域、内存)

    部署spring boot + Vue遇到的坑(权限.刷新404.跨域.内存) 项目背景是采用前后端分离,前端使用vue,后端使用springboot. 工具 工欲善其事必先利其器,我们先找一个操作L ...

  9. vue项目打包本地后通过nginx解决跨域

    前言 有时候我们打包好vue项目让后端人员部署项目时可能会有小插曲,为了不麻烦后端人员和避免尴尬,最好的办法就是在本地自己先测一下,而在本地运行打包后的项目会遇到接口跨域的问题.我平时经常用的方法就是 ...

随机推荐

  1. linux下su设置无密码模式

    1.首先切换到root用户下 2.进到etc目录  cd /etc 3. 修改文件的权限   chmod u+w /etc/sudoers 4. 修改文件   vim  /etc/sudoers

  2. javaScript高级3笔记2

    DOM0级事件 <img src = "../..."  onclick = "function()" />  // 处理事件 elment.onc ...

  3. [HNOI2004][bzoj1211] 树的计数(prufer序列)

    1211: [HNOI2004]树的计数 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 3432  Solved: 1295[Submit][Stat ...

  4. 医院设置x

    医院设置x   题目描述 Description 设有一棵二叉树,如下图 其中,圈中数字表示结点居民的人口.圈边上数字表示结点编号,.现在要求在某个结点上建立一个医院,使所有居民所走的路程之和为最小, ...

  5. 记使用vim常用的快捷键

    显示行数  :set nu 跳转到最后一行 G 跳转到指定行数 nG  n为行数 跳转到行首 0 跳转到行尾 $ (shift+4)

  6. HTML5属性备忘单

    在网上闲逛的时候看到了文章,感觉总结的这个html5文章,决定转载过来,在排版的时候也帮助自己重新梳理复习一遍.毕竟学习基础最重要. by zhangxinxu from http://www.zha ...

  7. Vue_(组件)计算属性

    Vue计算属性中文文档 传送门 Vue计算属性:更强大的属性声明方式,可以对定义的属性进行逻辑处理与数据监视; 注意:模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑 ...

  8. TCP层sendmsg系统调用的实现分析

    概述 sendmsg系统调用在tcp层的实现是tcp_sendmsg函数,该函数完成以下任务:从用户空间读取数据,拷贝到内核skb,将skb加入到发送队列的任务,调用发送函数:函数在执行过程中会锁定控 ...

  9. 【Spring】mvc:annotation-driven 使用

    关注此标签,是在项目中有使用 <!-- 解决@ResponseBody 的实现类其默认的编码是 iso-8859-1的问题 --> <mvc:annotation-driven> ...

  10. Movidius的深度学习入门

    1.Ubuntu虚拟机上安装NC SDK cd /home/shine/Downloads/ mkdir NC_SDK git clone https://github.com/movidius/nc ...