vue.config.js解决跨域问题
时间:2019-11-27
本文章向大家介绍vue.config.js解决跨域问题,主要包括vue.config.js解决跨域问题使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
需求我们要访问后台的数据,但因为后台的端口号不一致所以需要实现跨域
未跨域
// 请求接口 后台的接口为5001 我们本地的接口为8080,所以我们需要去到vue.config.js配置跨域 http://localhost:5001/api/
this.$axios.post('http://localhost:5001/api/users/register',this.user)
.then(res =>{
// 注册成功
alert('注册成功!')
this.$router.push('/login')
console.log(res)
})//在http全局配置了catch所以这边是不用配置的
}
在当前项目的根路径下新建一个文件,文件名是固定的 vue.config.js —>proxy
module.exports = {
devServer: {
open: true,
host: 'localhost',
port: 8080,
https: false,
//以上的ip和端口是我们本机的;下面为需要跨域的
proxy: { //配置跨域
'/api': {
target: 'http://localhost:5001/api/', //这里后台的地址模拟的;应该填写你们真实的后台接口
ws: true,
changOrigin: true, //允许跨域
pathRewrite: {
'^/api': '' //请求的时候使用这个api就可以
}
}
}
}
}
跨域页面使用:
// 请求接口 后台的接口为5001 我们本地的接口为8080,所以我们需要去到vue.config.js配置跨域 http://localhost:5001/api/
this.$axios.post('/api/users/register',this.user)
.then(res =>{
// 注册成功
alert('注册成功!')
this.$router.push('/login')
console.log(res)
})//在http全局配置了catch所以这边是不用配置的
}
跨域成功:
hint:只要是修改了配置就一定要重启项目
————————————————
原文链接:https://blog.csdn.net/qq_40190624/article/details/85257610
原文地址:https://www.cnblogs.com/whoamimy/p/11945474.html
- .NET Core装饰模式和.NET Core的Stream
- Nginx反向代理,负载均衡,redis session共享,keepalived高可用
- 多行图片hover加边框兼容IE7+
- Debian JDK安装及配置
- Python With-As
- 用 TensorFlow 创建自己的 Speech Recognizer
- Shell利剑之xargs和time
- Shell利剑之export、read和history
- css sprite 调整大张图片中小图标的大小
- Learn Git One
- Docker系列教程04-Docker镜像常用命令
- Linux 系统优化
- Spring Cloud Edgware新特性之九:Sleuth使用MQ方式整合Zipkin
- Linux 基础知识
- 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 数组属性和方法
- python jupyter notebook配置 更改默认工作目录 更换皮肤主题 代码字体 大小
- 关于直播卖货系统平台在微信浏览器中音视频播放的问题
- python爬虫 scrapy爬虫框架的基本使用
- Python opencv图像处理基础总结(五) 图像金字塔 图像梯度 Canny算法边缘提取
- python scrapy爬虫练习(1) 爬取豆瓣电影top250信息
- python爬虫 senlenium爬取拉勾网招聘数据
- Python opencv图像处理基础总结(六) 直线检测 圆检测 轮廓发现
- 简单又强大的pandas爬虫 利用pandas库的read_html()方法爬取网页表格型数据
- python pyecharts数据可视化 折线图 箱形图
- Python爬虫 selenium自动化 利用搜狗搜索爬取微信公众号文章信息
- python 办公自动化系列 (1) 从22053条数据中统计断网次数并计算平均断网时间
- Python数据可视化 热力图
- python 中文情感分析 Snownlp库的使用
- Python数据分析实战(1) 成都土地市场分析
- 51单片机学习(1) LED点亮、闪烁以及流水灯实现