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. Java设计模式之模板方法模式(Template)

    前言: 我们在开发中有很多固定的流程,这些流程有很多步凑是固定的,比如JDBC中获取连接,关闭连接这些流程是固定不变的,变动的只有设置参数,解析结果集这些是根据不同的实体对象“来做调整”,针对这种拥有 ...

  2. 【SQL SERVER】2017 Developer 安装教程

    官网下载地址:https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 1.下载之后双击exe文件,选择基本 自定义都行 2.选择 ...

  3. Spring Boot2 系列教程(二十四)Spring Boot 整合 Jpa

    Spring Boot 中的数据持久化方案前面给大伙介绍了两种了,一个是 JdbcTemplate,还有一个 MyBatis,JdbcTemplate 配置简单,使用也简单,但是功能也非常有限,MyB ...

  4. lqb 基础练习 特殊回文数

    基础练习 特殊回文数 时间限制:1.0s   内存限制:512.0MB     问题描述 123321是一个非常特殊的数,它从左边读和从右边读是一样的. 输入一个正整数n, 编程求所有这样的五位和六位 ...

  5. nyoj 65-另一种阶乘问题 (Java 高精度)

    65-另一种阶乘问题 内存限制:64MB 时间限制:3000ms 特判: No 通过数:16 提交数:18 难度:1 题目描述: 大家都知道阶乘这个概念,举个简单的例子:5!=1*2*3*4*5.现在 ...

  6. SpringBoot 源码解析 (七)----- Spring Boot的核心能力 - 自定义Servlet、Filter、Listener是如何注册到Tomcat容器中的?(SpringBoot实现SpringMvc的原理)

    上一篇我们讲了SpringBoot中Tomcat的启动过程,本篇我们接着讲在SpringBoot中如何向Tomcat中添加Servlet.Filter.Listener 自定义Servlet.Filt ...

  7. 附010.Kubernetes永久存储之GlusterFS超融合部署

    一 前期准备 1.1 基础知识 在Kubernetes中,使用GlusterFS文件系统,操作步骤通常是: 创建brick-->创建volume-->创建PV-->创建PVC--&g ...

  8. href=”javascript:void(0);

    href=”javascript:void(0);”这个的含义是,让超链接去执行一个js函数,而不是去跳转到一个地址,而void(0)表示一个空的方法,也就是不执行js函数. 为什么要使用href=” ...

  9. ES6的基础知识(一)

    1.ECMAScript 6.0(以下简称ES6). 2.ECMAScript 和 JavaScript 的关系是,前者是后者的规格,后者是前者的其中一种实现. 3.对ES6支持的浏览器:超过 90% ...

  10. 前端的构建化工具Webpack

    经常看到如jquery-3.0.0.js和jquery-3.0.0-min.js等两相似的文件名. 其实以上两个文件名的内容是一样的,不过带min代表的是占用最小的空间,为项目提高性能.压缩的部分如换 ...