vue反向代理(解决跨域)
1,vue中有提供反向代理的接口,就是config/index.js
中的proxyTable,我的脚手架版本是2.9.6,proxyTable配置初始为空,如下图。
2,将proxyTable配置如下:
proxyTable: {
'/api': { //需要代理的接口
target:'http://39.97.33.178', //目标服务器
changeOrigin: true, //是否跨域
pathRewrite: {
'^/api': '/api' //重定向
}
}
},
例如:我需要访问的接口是:http://39.97.33.178/api/cityList,第一行 ‘/api‘ 是一个标识,告诉它只代理接口里面有/api这个字段的接口,我的目标服务器就是http://39.97.33.178,即target定义的,pathRewrite重定向 '^/api': '/api' 就是在代理是时候使用/api 代理 http://39.97.33.178/api,使用的时候就可以直接这样使用:
this.$axios.get('/api/cityList').then((res)=>{
console.log(res)
})
重定向也可以为空 '^/api': ' ',使用的时候就需要多加一层:
this.$axios.get('/api/api/cityList').then((res)=>{
console.log(res)
})
第一个/api 相当于 路径代理到 http://39.97.33.178 ,第二个/api/cityList才是接口里面的路径
vue反向代理(解决跨域)的更多相关文章
- vue反向代理解决跨域
问题描述 在项目开发的时候,接口联调的时候一般都是同域名下,且不存在跨域的情况下进行接口联调,但是当我们现在使用vue-cli进行项目打包的时候,我们在本地启动服务器后,比如本地开发服务下是 http ...
- nginx反向代理解决跨域问题
跨域:浏览器从一个域名的网页去请求另一个域名的资源时,域名.端口.协议任一不同,都是跨域 . 下表格为前后端分离的域名,技术信息: 域名 服务器 使用技术 前端 http://b.yynf.com ...
- windows环境下 nginx+iis 反向代理解决跨域问题
项目基本完成,是时候花点时间整理一下最近的姿势了 1 什么是跨域? 网上对于跨域的概念会有大篇幅的文章去解释,似乎有点玄乎,初学者很容易对这个概念产生恐惧,跨域其实很简单,其实只要知道一点,无法跨域访 ...
- 前端通过Nginx反向代理解决跨域问题
在前面写的一篇文章SpringMVC 跨域,我们探讨了什么是跨域问题以及SpringMVC怎么解决跨域问题,解决方式主要有如下三种方式: JSONP CORS WebSocket 可是这几种方式都是基 ...
- 利用nginx 反向代理解决跨域问题
说到nginx,不得不说真的很强大,也带来很多便利用于解决一些头疼的难题. 一般来说可以用来做:静态页面的服务器.静态文件缓存服务器.网站反向代理.负载均衡服务器等等,而且实现这一切,基本只需要改改那 ...
- Nginx 反向代理解决跨域问题分析
当你遇到跨域问题,不要立刻就选择复制去尝试.请详细看完这篇文章再处理 .我相信它能帮到你. 分析前准备: 前端网站地址:http://localhost:8080 服务端网址:http://local ...
- nginx反向代理解决跨域问题,使本地调试更方便
我们可能都会遇到一个这样的问题,线上环境是https://...,本地启动了项目,域名是localhost:8000等,本地想要访问线上的接口,直接在本地调试,却提示跨域,这个时候我们可以配置ngin ...
- nginx反向代理解决跨域
nginx作为反向代理服务器,就是把http请求转发到另一个或者一些服务器上.通过把本地一个url前缀映射到要跨域访问的web服务器上,就可以实现跨域访问.对于浏览器来说,访问的就是同源服务器上的一个 ...
- webpack-dev-server 设置反向代理解决跨域问题
一.设置代理的原因 现在对前端开发的要求越来越高,并且随着自动化以及模块化的 诞生,前后端开发模式越来越流行.后端只负责接口,前端负责数据展示.逻辑处理.但是前后端开发模式,有一个重要的问题,就是跨域 ...
- wamp2.4.4 如何配置虚拟主机及反向代理(解决跨域问题)
一.找到安装目录下的httpd.conf文件 1. 删除Include conf/extra/httpd-vhosts.conf前面的#号(开启虚拟主机的配置) 2. 删除LoadModule pro ...
随机推荐
- 浅谈OI中的底层优化!
众所周知,OI中其实就是算法竞赛,所以时间复杂度非常重要,一个是否优秀的算法或许就决定了人生,而在大多数情况下,我们想出的算法或许并不那么尽如人意,所以这时候就需要一中神奇的的东西,就是底层优化: 其 ...
- Python3.x安装教程及环境变量配置
python3.x安装 1.直接到官网https://www.python.org/下载,安装就可以了. 2.安装比较简单,点exe文件一直下一步就可以了(注意:安装的时候有个选择是否添加环境变量,这 ...
- Python 基础之re 模块
Python 基础之大话 re 在使用re模块中主要会用到一下几个方法: re.match() #从头匹配一个字符串 re.search() #浏览全部字符串,匹配第一个符合规则的字符串 re.fin ...
- C++对象模型结论
C++对象模型 1.C++对象模型探讨的是对象成员存储问题. 2.结论: (1) .类内部的函数(静态成员函数,非静态成员函数)都不在对象内部 ,不占用对象大小. (2) 类内部的静态变量不占用对象大 ...
- C++中对C的扩展学习新增语法——作用域运算符::
作用域运算符用来告诉编译器在哪个作用域范围搜索符号,一般分为以下3种: 全局作用域: 命名空间作用域: 类作用域:
- 腾讯Techo开发者大会PPT分享
腾讯云年度的开发者大会已经落幕,大会包括1场前沿技术主峰会,18个技术专场,150位海内外技术专家,28个互动展区,8场动手实验室,23小时小程序云开发极限编程,1场数据库诊断大赛. 内容上涵盖了最新 ...
- Linux运维利器之ClusterShell
一.简介 实验室机房有大概百台的服务器需要管理,加上需要搭建Hadoop以及Spark集群等,因此,一个轻量级的集群管理软件就显得非常有必要了.经过一段时间的了解以及尝试,最终选择了clustersh ...
- 力扣(LeetCode)验证回文字符串II 个人题解
给定一个非空字符串 s,最多删除一个字符.判断是否能成为回文字符串. 示例 1: 输入: "aba" 输出: True 示例 2: 输入: "abca" 输出: ...
- 如何在后台封装el-tree所需要的数据格式
背景 最近遇到了一个分层级展示指标的需求,前端使用el-tree树形组件,要求按官方文档的格式提供数据. 数据格式: id: 1, label: '一级 1', children: id: 4, la ...
- 模块-time模块
time模块 time翻译过来就是时间,这个模块是与时间相关的模块,那么言外之意,如果我们在工作中遇到了对时间的需求(比如获取当前时间,获取时间戳等等)就要先想到time模块. time模块中对于时 ...