详解Vue-cli 创建的项目如何跨域请求


Posted in Javascript onMay 18, 2017

问题描述:

使用 Vue-cli 创建的项目,开发地址是 localhost:8023,需要访问 localhost:9000 上的接口

分析原因:

不同域名之间的访问,需要跨域才能正确请求。跨域的方法很多,通常都需要后台配置

不过 Vue-cli 创建的项目,可以直接利用 Node.js 代理服务器,实现跨域请求

 解决方案:

接口地址原本为 /form/save,但是为了匹配代理地址,在前面加一个 /api

详解Vue-cli 创建的项目如何跨域请求

 如果使用了 axios,可以全局配置一个 baseURL,这样就不用挨个儿修改 url 了

axios.defaults.baseURL = '/api'

在 config>index.js 的 dev 中添加配置项 proxyTable:

详解Vue-cli 创建的项目如何跨域请求

proxyTable: {
   '/api': {
    target: 'http://127.0.0.1:9000/',
    changeOrigin: true,
    pathRewrite: {
     '^/api': '/'
    }
   }
  },

其中 '/api' 为匹配项,target 为被请求的地址

因为在 ajax 的 url 中加了前缀 '/api',而原本的接口是没有这个前缀的

所以需要通过 pathRewrite 来重写地址,将前缀 '/api' 转为 '/'

如果本身的接口地址就有 '/api' 这种通用前缀,就可以把 pathRewrite 删掉

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js弹窗代码 可以指定弹出间隔
Jul 03 Javascript
浏览器加载、渲染和解析过程黑箱简析
Nov 29 Javascript
Javascript仿PHP $_GET获取URL中的参数
May 12 Javascript
Jquery实现由下向上展开效果的例子
Dec 08 Javascript
javascript 闭包详解
Feb 15 Javascript
ashx文件获取$.ajax()方法发送的数据
May 26 Javascript
jQuery延迟执行的实现方法
Dec 21 Javascript
jquery获取链接地址和跳转详解(推荐)
Aug 15 jQuery
原生JS实现的自动轮播图功能详解
Dec 28 Javascript
layUI实现列表查询功能
Jul 27 Javascript
vue+moment实现倒计时效果
Aug 26 Javascript
vue项目打包之开发环境和部署环境的实现
Apr 23 Javascript
Bootstrap table学习笔记(2) 前后端分页模糊查询
May 18 #Javascript
BootStrap 导航条实例代码
May 18 #Javascript
AngularJS全局警告框实现方法示例
May 18 #Javascript
第一次记录Bootstrap table学习笔记(1)
May 18 #Javascript
原生js轮播特效
May 18 #Javascript
js实现放大镜特效
May 18 #Javascript
vue v-on监听事件详解
May 17 #Javascript
You might like
PHP学习笔记(二) 了解PHP的基本语法以及目录结构
2014/08/04 PHP
PHP @ at 记号的作用示例介绍
2014/10/10 PHP
PHP实现抓取迅雷VIP账号的方法
2015/07/30 PHP
PHP 用session与gd库实现简单验证码生成与验证的类方法
2016/11/15 PHP
PHP实现登陆表单提交CSRF及验证码
2017/01/24 PHP
PHP连接MySQL数据库操作代码实例解析
2020/07/11 PHP
js利用事件的阻止冒泡实现点击空白模态框的隐藏
2014/01/24 Javascript
扩展jQuery对象时如何扩展成员变量具体怎么实现
2014/04/25 Javascript
javascript截取字符串小结
2015/04/28 Javascript
微信js-sdk地理位置接口用法示例
2016/10/12 Javascript
jQuery Validate验证框架详解(推荐)
2016/12/17 Javascript
webpack配置sass模块的加载的方法
2017/07/30 Javascript
基于vue2的canvas时钟倒计时组件步骤解析
2018/11/05 Javascript
tracking.js页面人脸识别插件使用方法
2020/04/16 Javascript
JS数组求和的常用方法总结【5种方法】
2019/01/14 Javascript
vue 组件之间事件触发($emit)与event Bus($on)的用法说明
2020/07/28 Javascript
Vue路由 重定向和别名的区别说明
2020/09/09 Javascript
[08:44]和酒神一起战斗 DOTA2教你做大人
2014/03/27 DOTA
[00:31]2016完美“圣”典风云人物:国士无双宣传片
2016/12/04 DOTA
Python3.2模拟实现webqq登录
2016/02/15 Python
关于python3中setup.py小概念解析
2019/08/22 Python
python 使用pygame工具包实现贪吃蛇游戏(多彩版)
2019/10/30 Python
pycharm激活方法到2099年(激活流程)
2020/09/22 Python
Python常用GUI框架原理解析汇总
2020/12/07 Python
CSS3条纹背景制作的实战攻略
2016/05/31 HTML / CSS
美国第二大连锁书店:Books-A-Million
2017/12/28 全球购物
欧缇丽加拿大官方网站:Caudalie加拿大
2019/07/18 全球购物
什么是Linux虚拟文件系统VFS
2012/01/31 面试题
大专生自我鉴定范文
2013/10/01 职场文书
一年级数学教学反思
2014/02/01 职场文书
暑期政治学习心得体会
2014/09/02 职场文书
家长给老师的感谢信
2015/01/20 职场文书
2015年度酒店客房部工作总结
2015/05/25 职场文书
80后创业总结的9条职场用人思想,记得收藏
2019/08/13 职场文书
喜迎建国70周年:有关爱国的名言名句
2019/09/24 职场文书
python 远程执行命令的详细代码
2022/02/15 Python