nodejs服务实现反向代理 解决本地开发接口请求跨域问题【图文】

今天爱分享给大家带来nodejs服务实现反向代理 解决本地开发接口请求跨域问题【图文】,希望能够帮助到大家。

前后端分离项目需要解决第一个问题就是,前端本地开发时如何解决通过ajax请求产生的跨域的问题。一般的做法是通过本地配置nginx反向代理进行处理的,除此之外,还可以通过nodejs来进行代理接口。当然,要实现这个前提是,前端开发环境必须运行在nodejs服务中,所幸的是,现在前端的开发自动化工具都是建立在nodejs上的,所以这个前提也不是很重要。

webpack-dev-server配置跨域方案
如果你项目是用webpack作为前端自动化构建工具的话,那么可以引用webpack-dev-server来进行配置跨域方案。webpack-dev-server是一个小型的nodejs服务器,是基于express框架的,用于实时监听和打包编译静态资源。其中里面有一个属性是proxy,是专门来配置代理请求接口的。

举个例子:
比如我现在通过webpack构建了一个本地开发环境,端口号是9000,现在我要在本地去请求(GET) http://jsonplaceholder.typicode.com/users 地址获取数据,如果前端没有设置代理的话,请求会因为跨域请求失败。这时候通过如下配置,就可以正常请求了。

devServer: {
   contentBase: __dirname + "/",
   port: 9000,
   proxy: {
     "/users": {    //需要代理的路径
       target: "http://jsonplaceholder.typicode.com",  //需要代理的域名
       changeOrigin: true  //必须配置为true,才能正确代理
     }
   }
}

通过如上配置,然后在js里面这样请求就可以成功拿到数据了:

//使用fetch获取ajax请求
fetch('/users')  //填写路径即可
  .then(function(response) {
    return response.json()
  }).then(function(json) {
    console.log('parsed json', json)
  }).catch(function(ex) {
    console.log('parsing failed', ex)
  })

这是通过webpack-dev-server配置的代理方案,那如果没有webpack-dev-server服务,要如何配置代理方案呢?比如在gulp和fis环境中,要怎么设置nodejs的代理服务。这时候我们就得来追寻下webpack-dev-server代理的实现机制了。

http-proxy-middleware模块设置代理服务
如果仔细阅读webpack-dev-server的文档,就会发现其实webpack-dev-server的代理方案是引用了http-proxy-middleware模块来设置的。这里要注意的是http-proxy-middleware模块也是运行在nodejs服务,因此前端需要运行一个nodejs服务,这里以express为例子:

var express = require('express');
var proxy = require('http-proxy-middleware');
var app = express();
app.use('/users', proxy({
    target: "http://jsonplaceholder.typicode.com",
    changeOrigin: true
}));
// 省略各种配置  ... ...
app.listen(..., 9000);

如上面代码展示,我们就可以在本地端口9000访问到 http://jsonplaceholder.typicode.com/users 的数据,其请求接口和上面一致。其实这段代码跟webpack-dev-server代理很相似的,应该说一样的,因为本来就是同一个东西的。在这里就不做更多介绍了,如果需要了解更多直接去看官方文档 https://github.com/chimurai/http-proxy-middleware

人已赞赏
前端

js 、css代码自动清除浏览器缓存方法【附代码】超实用

2020-10-29 12:14:24

前端

vue eventbus 报错 Cannot read property ‘apply‘ of undefined【解决办法】

2020-10-29 16:16:21

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧