HackWeek踩坑记(6) - 前后端跨域问题与反向代理的解决方案

作为一个“前端打字员”,最烦人的莫过于前后端交互过程中的跨域问题了。

由于浏览器的同源策略,不同域下的数据是不能互相调用的,如果有这种需求,必须

  • 在响应头中加上对应的允许跨域的头;
  • 直接给一个回调函数的接口,然后在前端执行函数拿到参数,当做XHR的响应数据。

但以上两种方法并不能解决前端真正面临的问题

在我们组实际项目开发的过程中,API的地址经常会发生变动(主要是更换不同的服务器,甚至在本机的TCP 3000端口跑Flask),可是前端代码中有很多个API请求,不可能每次API迁移都在前端代码中修改对应的IP地址,否则我就真成前端打字员了。

在开发过程中的解决方案

所以经过查阅资料,发现Webpack中支持反向代理的功能,支持路径绑定到其他域名。经过一番学习,配置完成之后的config/index.js的proxy部分如下:

http://lenconda.top/images/17121604.png

这样的话,前端只需要写api/XXX这样的路径,就能完美避免所有的麻烦。

在部署时的解决方案

根据类比推理,可以推测在服务器部署项目时可以使用Nginx强大的反向代理功能,将原本监听TCP 3000端口的Flask Docker映射到/api下,此处感谢显林叔提供的配置文件参考:

http://lenconda.top/images/17121605.jpg

根据显林叔提供的参考范例,我在部署项目时完成的配置文件如下:

http://lenconda.top/images/17121606.png

其中有个小问题:我们的后端API路径都是从/开始的,如果location字段只有/api {},前端在请求例如/api/test时,其实是等价于请求http://127.0.0.1:3000/api/test,而不是请求http://127.0.0.1:3000/test,这就会带来致命的错误,导致前后端无法对接,所以我才在Nginx的配置文件中写入了这么多的路径。

今天请教了卢江虎学长,他建议后端在开发RESTful API时在所有路径前都加上/api。这样理论上应该可以解决问题,但是我还没有实践过,不便妄下结论。

将最新的文章发送到你的邮箱

展示评论