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 ...
随机推荐
- NOIP模拟26
把题解沽了好久了,今天还是不想写,我们靠的B卷其实挺水的,但是我就是想吐槽一下!咋还带题目里面放题解的?题里一点题解的线索都没有,但是玄机竟然在题目里! 我也是醉了,T1就是一个贪心,题目说贪婪,T2 ...
- C#/.Net开发入门篇(1)——开发工具安装
众所周知,工欲善其事必先利其器,要想砍柴快一定得有把好刀,那么要想代码写的有效率.质量高一个趁手的编辑器是必不可少的,写代码不可能就用系统自带的文本编辑器(如果是大佬当我没说),这里我推荐各位使用微软 ...
- python——自行实现sorted函数
仿照内建函数sorted,自行实现一个sort函数,能够为列表进行排序 看下面实例的前提是掌握 0.掌握sorted函数的用法.1.函数基本概念.2.函数是如何传参的.3.掌握三元表达式.4.掌握内建 ...
- [LC]219题 Contains Duplicate II (存在重复元素 II )
①英文题目: Given an array of integers and an integer k, find out whether there are two distinct indices ...
- SpringBoot 源码解析 (五)----- Spring Boot的核心能力 - 自动配置源码解析
在上一篇博客中分析了springBoot启动流程,大体的轮廓只是冰山一角.今天就来看一下springBoot的亮点功能:自动化装配功能. 先从@SpringBootApplication开始.在启动流 ...
- pat 1084 Broken Keyboard(20 分)
1084 Broken Keyboard(20 分) On a broken keyboard, some of the keys are worn out. So when you type som ...
- nyoj 243-交换输出 (swap)
243-交换输出 内存限制:64MB 时间限制:3000ms 特判: No 通过数:16 提交数:39 难度:1 题目描述: 输入n(n<100)个数,找出其中最小的数,将它与最前面的数交换后输 ...
- ArcGIS API For Javascript :如何解决跨网不能正常获取依赖项的问题?
一.前言 政企项目通常会在自组网以及保密网运行,有些单位甚至会有两个物理隔绝的网络存在.通常情况下我们会在两个网络中部署相同的地图服务和依赖项.但是也有其中一个网络密级很高没有服务器资源,不能单独部署 ...
- 命令序列 ; & && ||
; 从左到右依次被执行,返回最后一个命令的执行状态 & 该命令将在后台被执行,即在子bash中执行(或ctrl+z,bg, jobs,bg 命令号)(变量$!.$one.$two.$three ...
- 学习记录:《C++设计模式——李建忠主讲》6.“状态变化”模式
状态变化模式:在组件构建过程中,某些对象的状态经常面临变化,如何对这些变化进行有效的管理?同时又维持高层模块的稳定.状态变化模式为这一问题提供了一种解决方案. 典型模式:状态模式(State).备忘录 ...