proxy代理配置及解析
1.vue-cli 2 是在路径为config/index.js的文件下proxyTable里配置的,该文件是整个项目的主要配置入口
// node自带路径工具.
var path = require('path')
// 分为两种环境,dev和production
module.exports = {dev: {// 配置好后一定要关闭原来的server,重新npm run dev启动项目。不然无效。proxyTable: { // 需要代理的接口,可以跨域// 用‘/api’开头,代理所有请求到目标服务器'/api': {target: 'http:xxx.com', // 目标接口域名changeOrigin: true, // 是否启用跨域pathRewrite: { //这里要理解成用'/api'代替target里面的地址,后面的组件中我们调用接口的时候直接用api代替,比如我要调用'http://40.00.100:3002/user/add',直接写成'/api/user/add'即可'^/api': '' // 即/api相当于http://40.00.100:3002}}}}
}
注意: ‘/api’ 为匹配项,因为在 ajax 的 url 中加了前缀 ‘/api’,而原本的接口是没有这个前缀的,所以需要通过 pathRewrite 来重写地址,将前缀 ‘/api’ 转为 ‘/’。如果本身的接口地址就有 ‘/api’ 这种通用前缀,就可以把 pathRewrite 删掉。
2.vue-cli 3 是自己在根目录下新建vue.config.js文件,在devServer.proxy对象里配置(当然也有其他方式),配置后会和隐藏的配置自动进行整合
module.exports = {// cli3 代理是从指定的target后面开始匹配的,不是任意位置;配置pathRewrite可以做替换devServer: {proxy: {'/yourapi': { //代理api,/yourapi的意义在于,声明axios中url已/api开头的请求都适用于该规则,注意是以/yourapi开头,即:axios.post({url: '/yourapi/xxx/xxx'})target: 'yourserver', //服务器真实api地址,即需要请求的目标接口,此处target的意义在于:造成跨域是因为访问的host与我们的请求头里的origin不一致,所以我们要设置成一致,这个具体请看下文changeOrigin: true, //是否跨域,true为开启代理:在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题ws: true, // 是否启用websockets,根据实际情况看是否需要配置该项pathRewrite: { '^/yourapi': 'https://我是服务器/api' //重写路径// 此处是大部分文章都不会明说的的地方,// 既然我们设置了代理,则所有请求url都已写成/yourapi/xxx/xxx,那请求如何知道我们到底请求的是哪个服务器的数据呢// 因此这里的意义在于, 以 /yourapi开头的url请求,代理都会知道实际上应该请求那里,// ‘我是服务器/yourapi’,后面的/api根据实际请求地址决定,即我的请求url:/yourapi/test/test,被代理后请求的则是// https://我是服务器/yourapi/test/test} }}}}
特别注意:yourapi 就是请求后台域名后的相同部分,我理解vue实现是key-value方式,此处如果是 "/test/api/": { },那么请求的时候 /test/api/getUserInfo,就是地址 target + /test/api/getUserInfo,若请求key对应不上则代理就会无效了。
代理成功的例子
如图,可以看到Request URL中的host 和 请求头中的 origin已经一致了,这就是为什么配置代理可以解决跨域的问题,造成跨域是因为request url的host与我们的origin不一致,也就是常说的,非同源,通过配置代理,我的请求变成了从
192.168.1.109:8080(这是我本地的ip,解释一下)向192.168.1.109:8080请求数据,则解决了非同源的问题。
即代理服务器代替我们请求了服务器的数据返回给了我本机,我本机向我本机请求代理替我拿到的数据,因此我不再需要考虑跨域了。
补充:vue-cli3的设计原则是“0配置”,移除(隐藏)配置文件build和config等目录,同时vue-cli3移除了static文件夹,新增了public文件夹,并且将index.html移动到public中。
proxy代理配置及解析相关推荐
- vue-cli、脚手架创建、eslint、alias别名配置、proxy代理配置、axios、scoped、穿透、媒体查询、12栅格、动态rem、1px边框、移动端事件、300ms延迟问题(六)
vue-cli的使用 现在使用前端工程化开发项目是主流的趋势,也就是说,我们需要使用一些工具来搭建vue的开发环境.一般情况下我们都会选择使用webpack进行项目的构建,在这里我们直接使用vue官方 ...
- webpack的proxy代理配置
webpack的proxy代理配置 在实际项目中不可避免会遇到跨越问题,webpack中的proxy就是解决前端跨域的方法之一. 跨越问题:协议.域名.端口 三者只要有一个与服务端的不一致,就会报跨域 ...
- axios请求与proxy代理配置
如果是不考虑跨域问题,那么请求后台数据使用的就是该路径.但是根据同源策略,3000端口(前端页面端口)无法访问5000端口(后台数据端口),此时就需要使用proxy代理配置了. /** * 获取所有的 ...
- vue-cli 3.0之跨域请求devServer proxy代理配置
vue-cli 3.0之跨域请求devServer proxy代理配置 当我们的前端服务和后端服务不同源即协议不同,端口不同,域名不同时,就会出现跨域的问题. 通过配置devServer.proxy就 ...
- proxy代理配置 goproxy 代理配置
1 百度上搜索 goproxy 2 下载 proxy-linux-amd64.tar.gz 2.1 直接下载地址: 该版本 不限制默认数量 调整默认的每秒最大连接数,由默认20改为 ...
- proxy代理的使用(解决跨域,配置多个代理)
proxy代理的使用(解决跨域,配置多个代理) 一.什么是代理 字面意思就是类似中间商,开启代理,原理就是在本地创建一个虚拟服务器,发送请求数据,同时接受请求的数据, 利用服务器与服务器间,交互,不会 ...
- vue.config.js配置proxy代理解决跨越;proxy代理报404;
像我们本地的vue项目运行起来,访问的地址一般是localhost,这个时候请求后台的接口,端口号也不一致,肯定就会存在跨域问题,所以我们要是想正常访问接口的话,就需要解决掉跨域问题. 本文我们是在v ...
- Nginx http和反向代理配置实例介绍
Nginx 是一个高性能的 HTTP 和反向代理服务器,本节以实际实例介绍如何实现Nginx 反向代理. 1. 安装Nginx 安装Nginx之前,首先安装相关模块的依赖库: 这里安装Pcre和O ...
- Android平台Chromium net中的代理配置信息获取
在计算机网络中,代理服务器 扮演着发起请求的客户端与服务器之间的中间人的角色.客户端连接到代理服务器,请求一些服务,比如文件,网页,或其它可以从服务器获得的资源,代理服务器以简化和控制复杂度的形式获取 ...
- Nginx实现HTTP反向代理配置
Nginx实现HTTP反向代理配置 无意中发现了一个巨牛的人工智能教程,忍不住分享一下给大家.教程不仅是零基础,通俗易懂,而且非常风趣幽默,像看小说一样!觉得太牛了,所以分享给大家.点这里可以跳转到教 ...
最新文章
- [Bash Shell] Shell学习笔记
- VirtualBox下Ubuntu利用桥接方式上网
- [jQuery] jQuery是通过哪个方法和Sizzle选择器结合的?
- zoj 1088 System Overload
- 一个农民矿工的悲情遗书
- 左耳朵耗子的时间管理法则
- 华为光猫HG8120C的一些配置文件
- mysql gitd 数据结构同步失败_MySQL案例-GTID同步失败:master has purged binary logs
- 图片中添加箭头【使用PPT实现】
- 基于MATLAB的计算机视觉和图像处理代码
- 大话西游手游服务器维护要多久,大话西游手游7月22日维护及解读
- 关于模拟信号和数字信号的储存
- 微信公众平台测试账号申请
- 衡水二中2021清华北大高考成绩查询,衡水二中:把5分钟利用成2小时,清北再录取101人!...
- action的编写方式
- javascript思维导图大全
- 【统计学】【2015.09】基于状态空间模型的时间序列预测与插值
- 五款经典GPRS无线上网卡比拼
- 数据库系统概念 引言(一)
- Dijkstra算法和Floyd算法对比分析
热门文章
- Morphia DAOs
- 卫星导航系统的发展历史
- WordPress如何添加canonical标签
- 聊聊世界编程语言排行榜的事
- Ecshop主要文件功能介绍,Ecshop文件详细说明
- 加州大学伯克利分校计算机科学硕士,加州大学伯克利分校计算机硕士申请条件是什么?...
- DSP TMS320C5509A 控制DDS AD9854芯片进行AM-MSK调制
- iPhone内存比Android手机小,为什么iPhone内存1G、2G比安卓内存4G运行更快?
- tomcat启动异常之信The APR based Apache Tomcat Native library which allows optimal performance in produ
- JavaCV 制作字符画