一个最简单的代理例子:index.html中有如下代码

fetch('/api/pub/article/list?pageSize=2').then((data)=>{
return data.json()
}).then((json)=>{
console.log(json)
})

里面访问的是相对地址,但我本地并没有服务器有提供这些api。把以上的路径补全为云服务器上的绝对路径,但是又报CORS错误。

解决办法是配置一个代理。这里通过webpack-dev-server实现,简单的配置文件如下:

module.exports = {
entry: {
bundle:'./main.js',
},
output: {
filename: '[name].js'
},
devServer: {
port: 8889,
host: '127.0.0.1',
proxy: {
'/api/*': {
target: 'http://123.207.95.11:9001'
}
}
}
};

接着运行(以当前目录作为静态文件的根目录):

webpack-dev-server --content-base ./

访问 http://127.0.0.1:8889/index.html ,以上代码可以正常执行了。

对于以上的配置和运行指令,做了如下事情:

  1. 监听 127.0.0.1:8889,以当前目录(content-base参数指令的目录)作为静态文件的根目录
  2. 访问index.html,里面发出的请求是相对地址,也就是访问了这个地址 127.0.0.1:8889/pub/.....
  3. 因为webpack-dev-server读取以上的配置文件,这个请求匹配了 /api/* ,就把这个请求转发到了对应的target处,也就是http://123.207.95.11:9001这个地址下了。也就是请求 浏览器 -> webpack-dev-server -> 127.207.95.11 。
  4. 最后把响应数据传递到浏览器。  也就是 127.207.95.11 -> webpack-dev-server -> 浏览器

webpack-dev-server proxy代理的更多相关文章

  1. 配置Webpack Dev Server 实战操作方法步骤

    本文摘要:配置 Webpack Dev Server 可以解决本地开发前端应用时,手动执行 webpack 命令或 yarn build 命令,再去浏览器中访问 dist/index.html 的麻烦 ...

  2. 笔记:配置 webpack dev server

    笔记:配置 webpack dev server 安装 webpack-dev-server 组件 配置 webpack.config.js 配置 增加 html-webpack-plugin 组件 ...

  3. [Webpack] Access Webpack Dev Server from Mobile Safari on an iPhone

    Testing your sites on mobile devices is a critical part of the development process. Webpack dev serv ...

  4. [webpack]深入理解proxy代理

    1.一个基本的代理 module.exports = { //... devServer: { proxy: { '/api': 'http://localhost:3000' } } }; /api ...

  5. webpack dev server 和 sublime text 配合时需要注意的地方

    参考:https://webpack.js.org/guides/development/ Adjusting Your Text Editor Some text editors have a &q ...

  6. webpack dev server 配置 启动项目报错Error: listen EADDRINUSE

    Error: listen EADDRINUSE 0.0.0.0:5601 它的意思是,端口5601被其他进程占用. 切换端口即可解决问题

  7. webpack 4 & dev server

    webpack 4 & dev server proxy https://webpack.js.org/configuration/dev-server/#devserverproxy htt ...

  8. 解决新版本webpack vue-cli生成文件没有dev.server.js问题

    新版本webpack生成的dev.server.js 在webpack.dev.conf.js中 webpack.dev.conf.js const axios = require('axios') ...

  9. vue-cli脚手架之webpack.dev.conf.js

    webpack.dev.conf.js  开发环境模式配置文件: 'use strict'//js按照严格模式执行 const utils = require('./utils')//导入utils. ...

  10. vue -- 脚手架之webpack.dev.conf.js

    webpack.dev.conf.js  开发环境模式配置文件: 'use strict'//js按照严格模式执行 const utils = require('./utils')//导入utils. ...

随机推荐

  1. ScrollTo:实现平滑滚动到页面指定位置

    ScrollTo:实现平滑滚动到页面指定位置 ScrollTo是一款基于jQuery的滚动插件,当点击页面的链接时,可以平滑地滚动到页面指定的位置.适用在一些页面内容比较多,页面长度有好几屏的场合,本 ...

  2. C#项目中的bin目录和obj目录的区别

    C#项目中的bin目录和obj目录的区别 1.关于bin目录和obj目录 Bin目录用来保存项目生成后程序集,它有Debug和Release两个版本,分别对应的文件夹为bin/Debug和bin/Re ...

  3. python入门之流程控制

    if else 格式: if 条件 command1 command2elif 条件: command3    command4 else: command3 command4 注意条件后和else后 ...

  4. 一些JS基本小内容

    获取select选中内容: 1.获取select表单内容 <select id="sel"> <option value="v1">1& ...

  5. JS排序--快速排序

    用 JavaScript 实现快速排序代码如下: /* * @author liphong * @data 2019/02/24 */ var arr = []; // 需要被排序数组 /* * 分离 ...

  6. mongodb sort

    sort() 方法 要在 MongoDB 中的文档进行排序,需要使用sort()方法. sort() 方法接受一个文档,其中包含的字段列表连同他们的排序顺序.要指定排序顺序1和-1. 1用于升序排列, ...

  7. tar打包压缩命令

    1. tar命令 用法: tar [选项...] [FILE]... GNU ‘tar’将许多文件一起保存至一个单独的磁带或磁盘归档,并能从归档中单独还原所需文件. 示例 tar -cf archiv ...

  8. iOS 自适应高度,改变字体颜色

    #define kMainBoundsWidth ([UIScreen mainScreen].bounds).size.width //屏幕的宽度 #define kFont [UIFont sys ...

  9. Hadoop集群_VSFTP安装配置

    原作者写的太好了,我这个菜鸟不自觉就转载了,原文链接:http://www.cnblogs.com/xia520pi/archive/2012/05/16/2503864.html 如果,您认为阅读这 ...

  10. sublime快捷键mark

    Ctrl+D 选词 (反复按快捷键,即可继续向下同时选中下一个相同的文本进行同时编辑)Ctrl+G 跳转到相应的行Ctrl+J 合并行(已选择需要合并的多行时)Ctrl+L 选择整行(按住-继续选择下 ...