详解webpack-dev-server使用http-proxy解决跨域问题

Webpack-dev-server 是 webpack 中提供的一个开发服务器,使我们可以在开发环境中快速开发,通过 webpack-dev-server 实现的 HMR(hot module replacement)功能,可以很方便的在不刷新浏览器页面的情况下实现模块热替换,极大地提升了开发效率。

在开发过程中,我们经常需要和服务器端进行 API 接口的交互,但是由于浏览器的同源策略限制,不同域的页面之间不能直接访问对方的数据,会导致跨域访问的问题,为了解决这个问题,webpack-dev-server 提供了 http-proxy 中间件,可以帮我们实现跨域访问。

以下是详解 webpack-dev-server 使用 http-proxy 解决跨域问题的完整攻略:

步骤一:安装http-proxy-middleware

在 webpack-dev-server 中集成http-proxy-middleware,首先需要安装http-proxy-middleware依赖:

npm install http-proxy-middleware --save-dev

步骤二:配置webpack-dev-server

在 webpack.config.js 配置文件中添加devServer选项:

 devServer: {
    contentBase: './dist',
    port: 8080,
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/mock' 
        }
      }
    }
 }
  • contentBase:设置静态资源文件所在目录
  • port:设置开发服务器端口号
  • proxy:配置跨域代理

代理配置项:

  • /api:要代理的url前缀,例如:/api/getData
  • target:代理目标地址,例如:http://localhost:3000/getData
  • changeOrigin:设置为true时,本地会虚拟一个服务器接收你的请求并代替你发送请求。因为设置了代理转发到index.js上,所以需要设置为true,否则接口访问不到
  • pathRewrite:路径重写,把/api替换为空,比如接口跨域地址是http://xxxx.com/api/test,我们只需要将/api去掉,那么请求地址变成了http://xxxx.com/test,pathRewrite就是用来做这个事情的。

步骤三:启动 webpack-dev-server

在命令行中运行以下命令,启动webpack-dev-server:

webpack-dev-server --open

示例一:指定代理路径的情况

以create-react-app脚手架工具为例,假设我们在开发过程中需要访问/api/getData接口,但是该接口是在另外一台服务器上,我们可以通过如下配置来解决跨域问题:

 devServer: {
    contentBase: './dist',
    port: 3000,
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        pathRewrite: {
          '^/api': '/mock'
        }
      }
    }
 }

这里代理的路径是/api,target是我们要代理到的服务器地址,这是指定代理路径的情况。

示例二:通配符代理的情况

在实际开发中,我们可能需要很多请求代理到同一个后端服务上,这时候我们可以使用通配符代理来实现。假设我们有以下两个后端服务地址:

  • http://localhost:8080/service1
  • http://localhost:8080/service2

我们可以使用通配符代理来代理这两个地址:

 devServer: {
    contentBase: './dist',
    port: 3000,
    proxy: {
      '/service*': {
        target: 'http://localhost:8080',
        pathRewrite: (path, req) => ({
          '/service1': '/mock1',
          '/service2': '/mock2'
        }[path.replace(/^\/service/, '')])
      }
    }
 }

这里通配符代理的路径是/service*,代理目标地址是http://localhost:8080。使用pathRewrite配置选项,将匹配到的路径根据自己的需求重写成另一个路径,这是通配符代理的情况。

这就是使用 webpack-dev-server 和 http-proxy-middleware 来解决跨域问题的完整攻略,希望对你有所帮助!

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:详解webpack-dev-server使用http-proxy解决跨域问题 - Python技术站

(0)
上一篇 2023年6月11日
下一篇 2023年6月11日

相关文章

  • JS倒计时两种实现方式代码实例

    下面我来详细讲解一下“JS倒计时两种实现方式代码实例”的完整攻略。 1. 倒计时实现方式一 1.1 基本思路 通过设定一个起始时间和一个截止时间,计算它们之间的时间差,并将时间差转化为时、分、秒显示在页面上,同时在每隔一秒钟更新一次时间。 1.2 代码实例 //定义起始时间、截止时间变量 var startTime = new Date(‘2021/10/1…

    JavaScript 2023年5月27日
    00
  • javascript高级程序设计(第三版)学习笔记(一) 正则表达式整理

    首先,需要解释一下该学习笔记的主题——正则表达式。 正则表达式 正则表达式,又称为“正则式”、“规则表达式”、“正规表达式”,是一种针对某种模式(字符串)进行匹配的工具。它通常被应用于字符串搜索、替换和拆分等场景。 正则表达式语法 正则表达式有自己独特的语法和规则,以下是一些常见的语法以及它们的意义: /pattern/:表示一个正则表达式模式,将被用于字符…

    JavaScript 2023年5月28日
    00
  • javascript中Date format(js日期格式化)方法小结

    下面我将详细讲解“javascript中Date format(js日期格式化)方法小结”。 简介 Date对象是Javascript同日期相关的对象,它提供了很多方便易用的日期时间操作方法。其中format方法就是在Date对象中提供的一种日期格式化的方法。 语法 Date.format(formatStr) formatStr为日期格式化字符串。常用的格…

    JavaScript 2023年5月27日
    00
  • 原生JS写Ajax的请求函数功能

    这里将详细讲解如何使用原生JS编写Ajax请求函数,具体过程包括:创建XMLHttpRequest对象、设置请求方式、设置请求体、发送请求、获取响应数据,下面我们一步一步来看。 创建XMLHttpRequest对象 在使用Ajax向服务器发送请求之前,需要创建一个XMLHttpRequest对象,它是浏览器提供的用于在后台与服务器进行通信的对象。创建方式如下…

    JavaScript 2023年6月11日
    00
  • JavaScript iframe数据共享接口实现方法

    JavaScript iframe数据共享接口实现方法可以通过以下步骤实现: Step 1: 跨域嵌入iframe 首先,需要在父页面中嵌入一个iframe来承载子页面,例如: <iframe src="http://子页面链接" id="myIframe"></iframe> 需要注意的是,子…

    JavaScript 2023年6月11日
    00
  • 用Ajax来控制书签和回退按钮的代码

    控制浏览器的书签和后退按钮,在Ajax请求过程中很有用。以下是一个使用JavaScript和jQuery实现的例子: Step 1:监听浏览器的前进/后退事件 在使用Ajax加载页面的过程中,我们需要监听浏览器的前进/后退事件。我们可以使用window.onpopstate事件来监听这些事件。 window.onpopstate = function(eve…

    JavaScript 2023年6月10日
    00
  • JS前向后瞻正则表达式定义与用法示例

    下面是JS前向后瞻正则表达式定义与用法示例的完整攻略: 定义 正则表达式是指一些用来匹配和处理文本的模式,前向后瞻正则表达式(Lookahead)是其中的一种类型。它是一种零宽度断言模式,它用于匹配紧接着某个子表达式(即“前提条件”)的位置,而不匹配该子表达式本身。 前向后瞻正则表达式由(?=或(?<=开头,后面跟着一个子表达式和一个右圆括号),这个子…

    JavaScript 2023年5月28日
    00
  • 微信内置浏览器私有接口WeixinJSBridge介绍

    微信内置浏览器私有接口 WeixinJSBridge 介绍 WeixinJSBridge 是微信内置浏览器为 H5 页面提供的一组原生 JavaScript 接口。它可以帮助开发者在微信浏览器中实现更多的功能,比如分享、支付等。 接口使用流程 本地 JS 调用 WeixinJSBridge 等待桥接完成后发送数据,WeixinJSBridge 接收到数据后会…

    JavaScript 2023年6月11日
    00
合作推广
合作推广
分享本页
返回顶部