一个最简单的代理例子: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. JavaScript 中的面向对象编程

    使用JSON 来定义一个对象: <script type="text/javascript">var xiaoming = { name : 'xiaoming', a ...

  2. PAT甲级——1131 Subway Map (30 分)

    可以转到我的CSDN查看同样的文章https://blog.csdn.net/weixin_44385565/article/details/89003683 1131 Subway Map (30  ...

  3. linux安装odbc for mysql

    1 安装驱动包 yum install unixODBC-devel -y yum install -y mysql-connector-odbc 2 配置数据源 [root@omserver-11 ...

  4. BZOJ1218(线段树+扫描线)

    1.扫描线扫描x轴,线段树维护y轴. 2.坐标+1,线段树是从1开始维护.然后让边长--,这样就能包含边上的点了. 3.为了保证点在正方形内:在x轴上利用差分的思想,在x出Add(val),在x+r( ...

  5. ZOJ3329(数学推导+期望递推)

    要点: 1.期望的套路,要求n以上的期望,则设dp[i]为i分距离终点的期望步数,则终点dp值为0,答案是dp[0]. 2.此题主要在于数学推导,一方面是要写出dp[i] = 什么,虽然一大串但是思维 ...

  6. 利用HttpClient4访问网页

    一.HttpClient介绍 虽然在 JDK 的 java.net 包中已经提供了访问 HTTP 协议的基本功能,但是它没有提供足够的灵活性和其他应用程序需要的功能.HttpClient 是 Apac ...

  7. 通过configmap更新k8s里的mysql配置文件

    背景: 环境注意:在用rancher搭建的k8s里,mysql是起了一个pod,镜像是网上的mysql:5.7 开发人员提出了一个报错“查询时的ONLY_FULL_GROUP_BY错误”,让我改sql ...

  8. Mysql 事务隔离级别(图文详解)

    本文由 SnailClimb 和 BugSpeak 共同完成. 事务隔离级别(图文详解) 什么是事务? 事物的特性(ACID) 并发事务带来的问题 事务隔离级别 实际情况演示 脏读(读未提交) 避免脏 ...

  9. QlikView入门

    1.windows x64下载地址: http://d1cf4w4kkla6tb.cloudfront.net/qlikview/11.20/11718/_MSI/QlikViewDesktop_x6 ...

  10. Enum 枚举类

    目录 Enum 枚举类 基础 定义与用途 基本方法 示例 进阶 实现原理 枚举与Class对象 自定义枚举类和构造方法及toString() Enum中使用抽象方法来实现枚举实例的多态性 Enum与接 ...