回到主页

Nginx代理解决本地调试接口跨域问题

跨域数据请求,nginx反向代理

· 前端开发,Nginx

Reactjs配合Dva在前端开发过程中已经可以实现热加载和接口代理。不过,最近在局域网内部使用safari浏览器打开hot loading的调试页面时,一直报异常的js语法错误(这个问题暂时无解,等待脚手架更新),无奈之下,使用build命令构建出产品环境用的资源文件,然后放到局域网的应用服务器下,直接访问该html进行功能测试。

Windows下安装Nginx

局域网内使用的应用服务器Nginx最简单了,即便是Windows环境部署也非常简单,下载一个压缩包,解压后,双击运行即可。

数据请求跨域问题

局域网内页面能访问到,此时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内容

参考链接