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

作为一个“前端打字员”,最烦人的莫过于前后端交互过程中的跨域问题了。 由于浏览器的同源策略,不同域下的数据是不能互相调用的,如果有这种需求,必须 在响应头中加上对应的允许跨域的头; 直接给一个回调函数的接口,然后在前端执行函数拿到参数,当做XHR的响应数据。 但以上两种方法并不能解决前端真正面临的问题 在我们组实际项目开发的过程中,API的地址经常会发生变动(主要是更换不同的服务器,甚至在本机的TCP 3000端口跑Flask),可是前端代码中有很多个API请求,不可能每次API迁移都在前端代码中修改对应的IP地址,否则我就真成前端打字员了。 在开发过程中的解决方案 所以经过查阅资料,发现Webpack中支持反向代理的功能,支持路径绑定到其他域名。经过一番学习,配置完成之后的config/index.js的proxy部分如下: 这样的话,前端只需要写api/XXX这样的路径,就能完美避免所有的麻烦。 在部署时的解决方案 根据类比推理,可以推测在服务器部署项目时可以使用Nginx强大的反向代理功能,将原本监听TCP 3000端口的Flask Docker映射到/api下,此处感谢显林叔提供的配置文件参考: 根据显林叔提供的参考范例,我在部署项目时完成的配置文件如下: 其中有个小问题:我们的后端API路径都是从/开始的,如果location字段只有/api {},前端在请求例如/api/test时,…