·
Reactjs配合Dva在前端开发过程中已经可以实现热加载和接口代理。不过,最近在局域网内部使用safari浏览器打开hot loading的调试页面时,一直报异常的js语法错误(这个问题暂时无解,等待脚手架更新),无奈之下,使用build命令构建出产品环境用的资源文件,然后放到局域网的应用服务器下,直接访问该html进行功能测试。
Windows下安装Nginx
局域网内使用的应用服务器Nginx最简单了,即便是Windows环境部署也非常简单,下载一个压缩包,解压后,双击运行即可。
- 参考链接 http://nginx.org/en/docs/windows.html
- 下载链接 http://nginx.org/en/download.html
- 双击解压后自带的nginx.exe开启服务
- 也可以新建两个方便的批处理:nginx -s reload (修改配置文件后重载)nginx -s quit(退出)
- 把资源放到html目录下即可在局域网内部访问了
数据请求跨域问题
局域网内页面能访问到,此时js文件里数据接口是访问远程的服务器,此时Chrome、Firefox等浏览器都会提示跨域请求的错误,因为网页是以“192.168.0.×”的地址访问的,而数据接口则是“xxx.com/api”。
Nginx代理
用Nginx的代理,来转发数据请求,js是发数据请求给同一域名下的Nginx(解决跨域问题),而Nginx把数据请求转发给远程。代理需要修改配置文件(conf目录下nginx.conf文件)
以上是常见的反向代理的精简版,没有host、x-forward等头部信息,因为我们的远端数据接口也是用nginx做了中转代理的,而且是根据xxx.com域名进行的识别,如果host头部替换掉,远端的nginx代理路由就会失效。
此外,proxy_pass 的值 .com末尾,如果加了‘/’和没有‘/’是有很大区别的
- 没有‘/’,会保留/api这个中缀
- 以‘/’结尾,api/会被省略,只拼接 /api/后面的url内容
参考链接