一个最简单的代理例子: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. 买票案例 1.synchronize关键字 2.lock锁

  2. sql索引的作用

    转https://www.cnblogs.com/hyd1213126/p/5828937.html (一)深入浅出理解索引结构 实际上,您可以把索引理解为一种特殊的目录.微软的SQL SERVER提 ...

  3. ubuntu dpkg命令总结

    dpkg是Debian系统的后台包管理器,类似RPM.也是Debian包管理系统的中流砥柱,负责安全卸载软件包,配置,以及维护已安装的软件包.由于ubuntu和Debian乃一脉相承,所以很多命令是不 ...

  4. springMVC-接收数据-参数绑定

    接收数据-参数绑定 #Method Arguments概观 Same in Spring WebFlux The table below shows supported controller meth ...

  5. Mvc 多级控制器 路由重写 及 多级Views目录 的寻找视图的规则

    1.那么我们再来看我们需要的访问方式,如下图 如果我们要访问Admin下的TestController里面的Index页面,那么我们输入Test/Index,这个肯定不行的.因为TestControl ...

  6. C# 枚举类型的描述信息获取

    新建一个控制台方法,写好自己的枚举类型: 如图: 在里面添加获取描述的方法: 具体源码: 链接:http://pan.baidu.com/s/1nv4rGkp 密码:byz8

  7. 在Window上用cmd创建.htaccess文件

    Windows 图形下不能直接建立空名字的文件,所以没法直接创建.htaccess文件,不过可以通过命令行创建: cd /path/to/your/dir/ type nul>.htaccess ...

  8. Windwos下安装和使用MongoDB

    1)下载安装包下载路径:https://www.mongodb.com/download-center#community包名称:mongodb-win32-x86_64-3.4.10-signed. ...

  9. POJ 1947 Rebuilding Roads (树形DP)

    题意:给一棵树,在树中删除一些边,使得有一个连通块刚好为p个节点,问最少需要删除多少条边? 思路: 因为任一条边都可能需要被删除,独立出来的具有p个节点的连通块可能在任意一处地方.先从根开始DFS,然 ...

  10. More helpful Cocos2d and Gaming macros

    More helpful Cocos2d and Gaming macros Here are w few macros that i wrote to make the code more read ...