Rainbond 中Vue、React项目如何调用后端接口

Rainbond中怎么部署 Vue 、React 项目请参考 Rainbond部署Vue、React项目

前言

以往我们在部署前端项目后，调用后端接口有以下几种场景：

1. 后端接口没有统一，比较分散，例如：/system/user,/tool/gen 。

   通常我们会在项目的全局配置文件.env.production中直接写入后端ip，例如：

   ENV = 'production'
   VUE_APP_BASE_API = '192.168.6.66:8080'
   

   这样写虽可以正常访问，但会导致产生跨域问题。

2. 后端接口统一，例如：/api/system/user, /api/tool/gen。

   大部分小伙伴也还是同样会直接把IP + 后缀写入到项目全局配置文件，例如：

   ENV = 'production'
   VUE_APP_BASE_API = '192.168.6.66:8080/api'
   

   这样写当然了也会有跨域的问题。

那我们该怎么解决接口不统一或接口统一的跨域问题呢。

​ 答：使用Nginx 反向代理。

​ 大部分小伙伴用nginx都是项目打包完的dist包丢进nginx，配置个 location proxy_pass 反向代理后端，然后在项目全局配置里填写Nginx地址。酱紫还是会跨越哦😋。那究竟该怎么处理呢，请往下看👇

解决跨域对于不同的场景有以下几种方法：

接口没有统一

1. 接口数量较少的话，比如只有几个接口system tool moitor login getmenu等。

   首先需要修改全局配置文件.env.production 的请求api 为**/**，酱紫写前端发起请求的时候会直接转发到nginx。

   ENV = 'production'
   VUE_APP_BASE_API = '/'
   

   其次修改Nginx配置文件，添加多个location，在浏览器请求的时候就会匹配到nginx的location规则，例如：

   ​ 浏览器请求菜单࿱