前端DEF部署和BUC接入的“跨域”坑_大前端_闲鱼技术



 写点什么

背景

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

null

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

null

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

跨域遇到的坑

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

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

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

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

null

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

null

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

null

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

null

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

null

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

null

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

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

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

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