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 ...
随机推荐
- 创建windows系统下的虚拟机
创建新的虚拟机 添加映像(windows系统下必须先添加映像) 选择相应的镜像文件:网上查找密钥输入:版本按要求选择:单击 下一步:设置虚拟机名称 位置 :下一步 默认的磁盘大小(不用管)——下一 ...
- 008.Kubernetes二进制部署Nginx实现高可用
一 Nginx代理实现kube-apiserver高可用 1.1 Nginx实现高可用 基于 nginx 代理的 kube-apiserver 高可用方案. 控制节点的 kube-controller ...
- 装上linux后的准备工作
A.修改对应网卡的IP地址的配置文件 1 2 3 4 5 6 7 8 # vi /etc/sysconfig/network-scripts/ifcfg-eth0 IPV6INIT=no #关闭 ...
- CSS如何修改tr边框属性
有很多时候,我们都要自定义为表格合并边框,这个只要 table{ border-collapse:collapse; } 就可以了 参数: separate 默认值.边框会被分开.不会忽略border ...
- jenkins手把手教你从入门到放弃03-安装Jenkins时web界面出现该jenkins实例似乎已离线
简介 很久没有安装jenkins了,因为之前用的的服务器一直正常使用,令人郁闷的是,之前用jenkins一直没出过这个问题. 令人更郁闷的是,我尝试了好多个历史版本和最新版本,甚至从之前的服务器把je ...
- hdu 4337 King Arthur's Knights (Hamilton)
King Arthur's KnightsTime Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Oth ...
- fastjason常用方法
背景 fastjson爆出重大漏洞,攻击者可使整个业务瘫痪 漏洞描述 常用JSON组件FastJson存在远程代码执行漏洞,攻击者可通过精心构建的json报文对目标服务器执行任意命令,从而获得服务器权 ...
- 领扣(LeetCode)单词模式 个人题解
给定一种 pattern(模式) 和一个字符串 str ,判断 str 是否遵循相同的模式. 这里的遵循指完全匹配,例如, pattern 里的每个字母和字符串 str 中的每个非空单词之间存在着双向 ...
- 《JAVA 程序员面试宝典(第四版)》之传递与引用篇
废话开场白 这个周末突然很想创业,为什么呢?原因很简单,我周围的同学或者说玩的比较好的朋友都发达了,前一个月和一个两年前还睡在一张床上的朋友,他现在已经在深圳买房买车了,没错是在深圳买 ...
- sqlcipher的php扩展运行在fast-cgi:php-fpm下工作不正常
今天发现了这样的问题,php-fpm运行sqlcipher时,有些数据库工作正常,有些却不正常. 不正常的,都在日志上报错,也就是php处理异常了. 这个报错发生在执行sql语句时,通常就是sqlci ...