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反向代理(解决跨域)的更多相关文章

  1. vue反向代理解决跨域

    问题描述 在项目开发的时候,接口联调的时候一般都是同域名下,且不存在跨域的情况下进行接口联调,但是当我们现在使用vue-cli进行项目打包的时候,我们在本地启动服务器后,比如本地开发服务下是 http ...

  2. nginx反向代理解决跨域问题

    跨域:浏览器从一个域名的网页去请求另一个域名的资源时,域名.端口.协议任一不同,都是跨域 . 下表格为前后端分离的域名,技术信息:   域名 服务器 使用技术 前端 http://b.yynf.com ...

  3. windows环境下 nginx+iis 反向代理解决跨域问题

    项目基本完成,是时候花点时间整理一下最近的姿势了 1 什么是跨域? 网上对于跨域的概念会有大篇幅的文章去解释,似乎有点玄乎,初学者很容易对这个概念产生恐惧,跨域其实很简单,其实只要知道一点,无法跨域访 ...

  4. 前端通过Nginx反向代理解决跨域问题

    在前面写的一篇文章SpringMVC 跨域,我们探讨了什么是跨域问题以及SpringMVC怎么解决跨域问题,解决方式主要有如下三种方式: JSONP CORS WebSocket 可是这几种方式都是基 ...

  5. 利用nginx 反向代理解决跨域问题

    说到nginx,不得不说真的很强大,也带来很多便利用于解决一些头疼的难题. 一般来说可以用来做:静态页面的服务器.静态文件缓存服务器.网站反向代理.负载均衡服务器等等,而且实现这一切,基本只需要改改那 ...

  6. Nginx 反向代理解决跨域问题分析

    当你遇到跨域问题,不要立刻就选择复制去尝试.请详细看完这篇文章再处理 .我相信它能帮到你. 分析前准备: 前端网站地址:http://localhost:8080 服务端网址:http://local ...

  7. nginx反向代理解决跨域问题,使本地调试更方便

    我们可能都会遇到一个这样的问题,线上环境是https://...,本地启动了项目,域名是localhost:8000等,本地想要访问线上的接口,直接在本地调试,却提示跨域,这个时候我们可以配置ngin ...

  8. nginx反向代理解决跨域

    nginx作为反向代理服务器,就是把http请求转发到另一个或者一些服务器上.通过把本地一个url前缀映射到要跨域访问的web服务器上,就可以实现跨域访问.对于浏览器来说,访问的就是同源服务器上的一个 ...

  9. webpack-dev-server 设置反向代理解决跨域问题

    一.设置代理的原因 现在对前端开发的要求越来越高,并且随着自动化以及模块化的 诞生,前后端开发模式越来越流行.后端只负责接口,前端负责数据展示.逻辑处理.但是前后端开发模式,有一个重要的问题,就是跨域 ...

  10. wamp2.4.4 如何配置虚拟主机及反向代理(解决跨域问题)

    一.找到安装目录下的httpd.conf文件 1. 删除Include conf/extra/httpd-vhosts.conf前面的#号(开启虚拟主机的配置) 2. 删除LoadModule pro ...

随机推荐

  1. dianFanEditor Web在线编辑器

    个人很喜欢kodexplorer 的在线编辑器.苦于没有加载FTP目录的功能. 索性自己改造了一下,用.NET 做了几个WEB接口,用CEF3做浏览器内核,打包了在线地址做编辑器. 即可加载本地磁盘, ...

  2. Python实现获取IP代码

    代码如下: # -*- coding: utf-8 -*- #!/usr/bin/env python # @Time : 2018/5/30 11:05 # @Desc : 获取ip # @File ...

  3. 小程序的基本概念-生命周期(组件 wxml)

    一.组件生命周期:一个组件从创建开始到使用中最后被销毁的过程 ---onLoad事件:组件(创建成功并且加载完成)触发一次 (1)当此事件触发发送请求获取数据 (2)获取其他组件传递数据(option ...

  4. 微信 AES 解密报错 Illegal key size 三种解决办法

    微信 AES 解密报错 Illegal key size Java 环境 java version "1.8.0_151" Java(TM) SE Runtime Environm ...

  5. windows系统cmd命令行窗口查看端口占用情况

    # 查看所有在用端口 netstat -ano # 查看指定端口 netstat -ano | findstr 8899 # 结束该进程:taskkill /f /t /im javaw.exe:或者 ...

  6. ESP8266 使用AT指令

    ESP8266 使用AT指令 问题:串口调试工具输入AT指令没返回结果 分析板子有两种模式 下载模式(默认) 运行模式 解决办法: 方法一:按下板子上的 RST 键位 方法二:使用 [安信可串口调试工 ...

  7. 2018年航空概论课后作业(PS:部分答案不正确, 综合得分:83.6)

    1 [单选题]航空是指载人或不载人的飞行器在地球____的航行活动. • A.高空• B.大气层内• C.宇宙• D.大气层外我的答案:B 得分: 33.3分 2 [多选题]军用飞机可分为____两大 ...

  8. nyoj 20-吝啬的国度 (DFS)

    20-吝啬的国度 内存限制:64MB 时间限制:1000ms Special Judge: No accepted:12 submit:43 题目描述: 在一个吝啬的国度里有N个城市,这N个城市间只有 ...

  9. hdu 2554 最短路 (dijkstra)

    最短路Time Limit: 5000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submissi ...

  10. 领扣(LeetCode)删除注释 个人题解

    给一个 C++ 程序,删除程序中的注释.这个程序source是一个数组,其中source[i]表示第i行源码. 这表示每行源码由\n分隔. 在 C++ 中有两种注释风格,行内注释和块注释. 字符串// ...