关键词

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

下面是关于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,用于获取用户信息。

首先,安装http-proxy-middleware模块:

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

然后,在Webpack配置文件中添加proxy配置:

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

其中:

  • /api:对应的代理路径,即Webpack devServer中发起的请求路径;
  • target:需要代理的服务器地址;
  • pathRewrite:对代理的路径进行重写操作,将请求前缀/api替换为空字符串。

然后,我们可以在Webpack应用中,使用如下代码调用该本地API接口:

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

总结

通过Webpack devServer中的proxy,我们可以实现跨域请求,将Webpack devServer中的请求转发到其他服务器上,并接收后端服务器返回的数据。使用该功能可以帮助我们更加方便、快捷地开发Web应用。

本文链接:http://task.lmcjl.com/news/11546.html

展开阅读全文