Webpack devServer中的 proxy 实现跨域的解决

2023年6月11日上午10:06 • JavaScript

下面是关于Webpack devServer中的proxy实现跨域的详细攻略。

什么是跨域

跨域是指在浏览器中运行的脚本（通常指JavaScript脚本）试图访问一个不同源（协议、域名、端口号不同）的页面所产生的限制。由于同源策略的限制，JavaScript通常只能访问与包含它的页面位于同一域名下的资源。

解决跨域的方法

通常情况下，跨域的解决方法可以归纳为以下几种：

JSONP：利用script标签的src属性可以获取跨域数据，通过回调函数的形式将数据传递到本地，常见于应用中调用第三方API时使用；
CORS：服务端允许跨域，通过设置响应头（Access-Control-Allow-Origin）允许其他域名的访问；
代理：通过在自己的服务器上进行中转，在请求时将跨域请求发送到自己的服务器上，自己的服务器去请求其它域名的数据并返回，从而避免浏览器的同源策略的限制。

本篇文章主要讲解Webpack devServer中的proxy实现跨域的解决方法。

Webpack devServer中的proxy

Webpack devServer是Webpack提供的开发中服务器，可以为我们快速启动一个开发环境。在实际开发中，我们常常需要访问不同的后端API接口，但是这些API接口可能由于跨域的限制无法直接访问。这时，我们可以利用Webpack devServer中的proxy功能实现跨域请求。

在Webpack配置文件中，我们可以为Webpack devServer配置一个proxy选项，用于将我们在Webpack devServer开发服务器中的接口请求转发到其他的服务器上，并接收后端服务器返回的数据。

实现步骤

下面是实现Webpack devServer中的proxy的步骤：

第一步：安装http-proxy-middleware

首先需要安装http-proxy-middleware模块，该模块可以帮助我们将Webpack devServer中的接口请求转发到其他的服务器上。

可以使用npm安装：

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

第二步：配置proxy

在Webpack配置文件中的devServer对象中新增proxy字段，配置需要代理的服务器信息。

例如，我们需要将Webpack devServer中的/api请求转发到http://localhost:3000/api上。可以新增如下配置：

devServer: {
  proxy: {
    '/api': {
      target: 'http://localhost:3000',
      pathRewrite: {'^/api' : ''}
    }
  }
}

其中：

proxy：配置需要代理的服务器信息；
'/api'：对应的代理路径，即Webpack devServer中发起的请求路径；
target：需要代理的服务器地址；
pathRewrite：对代理的路径进行重写操作，将请求前缀/api替换为空字符串。

示例说明

下面给出两个简单的示例说明。

示例一：代理远程API

在Webpack应用中，我们需要调用第三方API接口，例如豆瓣的电影接口（https://api.douban.com/v2/movie/top250）。我们需要获取电影TOP250的数据。

但是由于跨域的限制，我们无法直接访问该接口，此时可以使用Webpack devServer中的proxy将请求转发到本地服务器，并返回数据。

首先，安装http-proxy-middleware模块：

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

然后，在Webpack配置文件中添加proxy配置：

devServer: {
  proxy: {
    '/api': {
      target: 'https://api.douban.com',
      changeOrigin: true,
      pathRewrite: {
        '/api': '/v2/movie/top250'
      }
    }
  }
},

其中：

/api：对应的代理路径，即Webpack devServer中发起的请求路径；
target：需要代理的服务器地址；
changeOrigin：代理服务器是否修改原始主机头为目标URL，如果设置为true，则请求头中的Host值将设置为目标URL中的主机名；
pathRewrite：对代理的路径进行重写操作，将请求前缀/api替换为目标URL的地址/v2/movie/top250。

然后，我们可以在Webpack应用中，使用如下代码调用该API接口：

fetch('/api')
  .then(response => {
    console.log(response)
  })
  .catch(error => {
    console.log(error)
  })

示例二：代理本地API

在Webpack应用中，我们也可以使用代理功能将Webpack devServer中的请求转发到本地API接口上。例如，我们有一个本地API接口，地址为http://localhost:3000/api/users，用于获取用户信息。