前端DEF部署和BUC接入的“跨域”坑

背景

第一次尝试react框架，在本地调试前端npm start，调用后端接口采用设置host 127.0.0.1 local-fishci2.alibaba.net，前端代码配置如下可完美解决本地跨域问题。

因为是自建平台且只需要部署daily环境，通过def部署前端工程后，遇到了HTTP和HTTPS协议不匹配，因为def部署后是https的，而我的服务端工程部署在daily环境默认都是http的。一开始以为是协议问题，但也没打算部署到线上环境，那样成本太大。最后发现是因为跨域了。于是“坑”就由此开始了.....

截止目前还是有个巨坑，对一只好无前端专业功底的小菜鸡的我来说太难了，希望能有同学能帮忙答疑解决一下。

跨域遇到的坑

坑一：This request has been blocked：the content must be served over HTTPS.

问了开发，告诉我如果解决跨域也就自然解决该问题了，这样的block是浏览器行为，无法提供服务端设置Access-Control-Allow-Origin解决问题。

解决方案：把页面拷贝到后端工程。

一开始以为迁移那么多页面和资源任务非常繁重，最后发现不需要。因为react pc代码多为单页面应用，只需要拷贝以下代码放到后端的template的目录index.html里。

后台Controller加一个页面跳转即可：

坑二：跳转到的不是页面，是个字符串

于是尝试了加静态资源的路径配置：spring.resources.static-locations=classpath:/templates/,依然保持原样

再次尝试修改addResourceHandlers方法，依然没用

解决方案：需要增加这种thymeleaf模板类型的依赖，就能跳转到index页面了。

3、坑三：因为是服务端公用的，不想占用index路径，想前面增加一层目录/fyapp/，切换到已有的FyAppController类中增加了跳转，又变成“index”字符串了。

找了很多资料和原因，尝试了各种解决方案，一直怀疑是目录层级多了一层的关系，最终找到了一个巨坑：**@RestController注解**

解决方案：去掉@RestController注解改成@Controller

之前没注意到这个注解，因为接口返回json都使用习惯了，但是**@RestController是@ResponseBody和@Controller的结合体。（坑二那边是因为新建的Controller没有使用这个注解）** ** 这下相当于页面和资源都融合在服务端代码里了，访问服务端的域名就顺利访问了！这样一通操作下来，前端还是可以用之前的host域名来调试，访问的是本地静态资源，服务端页面引用的是cdn上的资源，也没有太大关系。

BUC接入再遇跨域问题

尝试接入了集团的buc，这样一来再使用前端的host绑定域名就直接报错：

看接口返回应该是从HTTPS到HTTP发生了安全降级，尝试了很多方法都无解。

最后只能通过服务端的域名进行本地调试，但是服务端引用的是cdn上的资源，本地改了前端代码，不能生效，这对于本地调试来说是阻塞性的问题。

临时解决方案：

（1）在服务端判断域名，来路由本地或cdn上的资源

index.html引用资源一定要加上“crossorigin”，即允许前端资源被跨域访问，否则localhost无法访问local-fish2.alibaba.net。

（2）安装chrome插件：Switcheroo Redirector，配置host映射。（效果等同于（1））

遗留问题：

前端react工程是lazy懒加载机制打包的，这样可以减少上传时候的包体积，于是有些资源是动态生成不可控制，依然存在动态生成的静态资源如8.css，8.js路径是服务端域名，本地无法访问。

导致页面报错：

笨办法：

备份一个路由文件，本地调试的时候选用去掉懒加载的方案，上传到def进行部署时，切换回来。但是每次这样来回改文件名也非常痛苦。

感想

• 没有真正意义上的“前后端分离”。要么就是资源和页面都在服务端，要不就是页面在服务端，资源在cdn上。

• “跨域”无处不在。前端访问后端会遇到，后端调前端资源也会遇到，问题展现的形式真是多种多样啊~ 希望有牛人能帮忙指点或一起参与讨论。