详解Vue-cli 创建的项目如何跨域请求
时间:2019-03-30
本文章向大家介绍详解Vue-cli 创建的项目如何跨域请求,主要包括详解Vue-cli 创建的项目如何跨域请求使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
问题描述:
使用 Vue-cli 创建的项目,开发地址是 localhost:8023,需要访问 localhost:9000 上的接口
分析原因:
不同域名之间的访问,需要跨域才能正确请求。跨域的方法很多,通常都需要后台配置
不过 Vue-cli 创建的项目,可以直接利用 Node.js 代理服务器,实现跨域请求
解决方案:
接口地址原本为 /form/save,但是为了匹配代理地址,在前面加一个 /api
如果使用了 axios,可以全局配置一个 baseURL,这样就不用挨个儿修改 url 了
axios.defaults.baseURL = '/api'
在 config>index.js 的 dev 中添加配置项 proxyTable:
proxyTable: { '/api': { target: 'http://127.0.0.1:9000/', changeOrigin: true, pathRewrite: { '^/api': '/' } } },
其中 '/api' 为匹配项,target 为被请求的地址
因为在 ajax 的 url 中加了前缀 '/api',而原本的接口是没有这个前缀的
所以需要通过 pathRewrite 来重写地址,将前缀 '/api' 转为 '/'
如果本身的接口地址就有 '/api' 这种通用前缀,就可以把 pathRewrite 删掉
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- [LeetCode]String主题系列{第5,6题}
- CDH内存调拨过度警告分析
- Ztorg:从 root 到 SMS
- [LeetCode]Math主题系列{第7,9,13,273题}
- 被忽视的攻击面:Python package 钓鱼
- [LeetCode]LinkedList主题系列{第2题}
- [LeetCode]HashTable主题系列{第3题}
- 如何使用Oozie API接口向Kerberos集群提交Java程序
- [LeetCode]Array主题系列{35,39,40,48题}
- 如何使用Sqoop2
- [LeetCode]Array主题系列{1,11,15,16,18,26,27,31,33,34题}
- Bwapp漏洞平台答案全解-A1(第三篇)
- pom.xml配置文件中所有标签及作用简单描述
- 关于C#获取动态的时间差函数
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- php tpl模板引擎定义与使用示例
- ThinkPHP5&5.1框架关联模型分页操作示例
- Android实现简易计算器(可以实现连续计算)
- PHP实现提高SESSION响应速度的几种方法详解
- ThinkPHP5.1框架数据库链接和增删改查操作示例
- 新版Flutter集成到已有Android项目的实现
- PHP基于session.upload_progress 实现文件上传进度显示功能详解
- Android实现加法计算器
- Android使用Realm数据库实现App中的收藏功能(代码详解)
- Android实现简单加法计算器
- Android实现两个数相加功能
- 基于Android studio3.6的JNI教程之ncnn之语义分割ENet
- android计算器实现两位数的加减乘除
- android studio实现简单考试应用程序实例代码详解
- Kotlin 实现按钮点击跳转监听事件方式