问题背景：

前端通常会有两种架构，一种是无前后端分离的，前端为后端提供渲染模板，这种方式把前后端开发人员绑定到了一起，很不灵活；另一种是前后端分离，也是目前大多数公司在走的路线，通常会使用 node 提供一个中间层，使用 node 层和服务端进行交互。市面上主要有阿里的 egg.js 和百度的 yog2。我们目前采用 yog2，采用 yog2 后面临了两个问题，这两个问题直到今天被策底解决：

问题一：跨域，前端页面直接访问后端接口时，出现跨域问题;

问题二：404，由于前端 node 服务没有部署后端接口服务，访问接口时会 404;

下文的解决方案针对 yog2.

最初方案:

解决这两个问题，最初的方案是在每个 app 中实现了一个 proxy，这个 proxy 负责把访问后端的接口转发到后端服务上:

axios.get('/ns/proxy/sub/userInfo', { });

这样有以下几个缺点:

1、每个接口的path 需要这样写:/namespace/proxy/path，这样将导致请求后端接口时必须要通过 node 转发，但有些接口并不需要用 node 转发，平白无故浪费了流量，增加了 node 集群的负载，尤其对于千万级别的 pv，能节省一点算一点

2、每个模块中需要实现一层 proxy，而且不能保证每位同学都按照/namespace/proxy/path 这种方式进行接口请求，无疑会引入跨域和404问题;

3、这种方式给研发带来了额外处理的成本；

最终方案:

我一直在想这个问题该如何解决，想过在 axios 中做代理，使用 http 代理，后来今天突然开窍了，想到一种可以不增加研发成本的方法。解决这个问题的核心是能保证「不部署后端服务的前提下，使用开发机的域名可以正常访问后端服务，保证访问的方式只是域名的替换」，我举个例子:

这个接口 https://lefex.gitee.io/user/info 是部署在后端服务上的，在你的开发机 http://wsy.dev.com:8086/user/info上是不可能访问到这个接口的，因为在开发机上只有 node 的运行环境，压根没有部署后端服务。

到目前，核心解决一个问题：能够通过自己的开发机器正常访问后端服务，即可，也就是说，使用 https://lefex.gitee.io 可以访问某个接口，也可以使用开 发机 http://wsy.dev.com:8086 访问这个接口。只要解决这个问题，跨域和 404 问题就迎刃而解。

在使用 yog2 时，当访问一个页面的时候，需要把模块名带上:http://wsy.dev.com:8086/ndsuyan (这里的模块名是 ndsuyan)，但是在接口访问时不能带这个模块名，才能达到我们的预期。为做到这个，我做了两件事:

第一：为保证不影响线上的逻辑，不增加研发额外的工作量，我新建了一个模块 nodeProxyDev，专门用来做代理，把请求转发到后端服务上;

第二：需要修改 yog-base 模块的 dispatcher.js，使它能够遇到后端的接口请求转发到 nodeProxyDev 这个模块中;

这里有个问题需要注意，如何才能够区分开路由是要到 node 模块的还是后端服务呢?

我采用的是模块名进行区分，因为 node 和后端服务的模块名不同，我把所有的 odp 模块映射成了路由，这样当请求后端接口时就会转发到nodeProxyDev 这个模块，进行代理。

到此其实已经解决了跨域与 404 问题，但有个问题需要整个前端研发团队注意，在写接口请求时同源的情况下不要写域名，否则就不能进行转发。也就是要这样写:

axios.get('/user/info', {})

而不是这样：

axios.get('https://lefex.gitee.io/user/info', {})

如何用

以上主要说了整个原理，防止出现问题后能够及时解决。使用也非常简单:

1、下载 nodeProxyDev 这个模块，把它部署到你的研发机器上就行;

2、如果是自己的研发机器，记得使用最新的 base;

总之，很少的改动即可解决 404 和跨域问题，做到真正的前后端分离，node 项目无需再申请后端环境。以上，是我能想到的，你们肯定会有一些好的想法， 欢迎讨论。

长按关注

素燕《前端小课》

帮助 10W 人入门并进阶前端

官网：https://lefex.gitee.ioand /