问大家一个关于前后端分离的问题, Springboot + nuxt.js

2020-02-23 09:38:30 +08:00
 afuler
用 springboot 写了一个博客后端,nuxt 前端,现在遇到了这么个问题,毫无头绪。我的博客可以登录,登录之后可以查看前端的文章页面,但是一刷新就没有了,前端就显示 Cannot read property 'title' of undefined。
现在排除了一些可能的问题,如果在后端把请求文章详情改成不需要登录,这个问题就没有了,刷新之后还是原来的文章。
百度上搜了一下,但感觉都不是类似的问题,主要是不知道搜什么关键词,我搜过 vue 跨域请求,还有刷新之后没有登陆,还搜过刷新之后数据消失。
我现在就是想搜索也不清楚应该改搜什么关键词,只能来问问了。
3542 次点击
所在节点    程序员
16 条回复
MOONLIGHTT
2020-02-23 09:52:56 +08:00
大概率后端传输来的数据为空,也就是`data`为空,前端获取`data.title`属性就会出现这样的报错。d
redford42
2020-02-23 10:00:11 +08:00
打断点看看数据三
打不来就在调接口那 console
然后看看 network 接口返回得数据是不是没有 title
ycpt2121
2020-02-23 10:06:36 +08:00
“如果在后端把请求文章详情改成不需要登录,这个问题就没有了,刷新之后还是原来的文章。‘这里最后一句什么意思,说清楚点,你可以看看 data.title 是不是必须的,自动动手改改源码
helloworldchao
2020-02-23 10:07:34 +08:00
应该是第一次 render 时数据还未获取你直接调用了 title 所属对象,但这个对象还未赋值结果调用了 undefined.title 就报错了。可以在调用 title 的地方对对象先做个判空类似 obj & obj.titile
afuler
2020-02-23 10:22:27 +08:00
@ycpt2121 前端可以请求后端的文章详情,这个请求需要先登录。这个需要登录是在后端设置的,如果设置成不需要登录,刷新问题就没有了。
sumarker
2020-02-23 10:27:02 +08:00
有没有配置 nginx 是不是 nginx 的配置问题
acthtml
2020-02-23 10:31:06 +08:00
页面和接口 2 个域下不?
acthtml
2020-02-23 10:31:36 +08:00
我举个例子

1. 页面和接口在不同域下,比如页面 example.com ,接口 api.example.com
2. 登录凭证以 cookie 来保存,存放在接口域下 api.example.com

那么,页面刷新时,服务端渲染会有这个过程:

1. 整个服务请求是在域 example.com 下面的。
2. 服务端渲染时所有异步请求拿到的是 example.com 下的 cookie,也就是拿不到登录凭证。

解决方案是:

1. 前端登录成功之后将登录凭证保存在页面域下面。
2. 异步请求时,将登录凭证通过 http header 形式传送。
agdhole
2020-02-23 10:35:57 +08:00
v-if title,或者用最新 es 的语法糖 :title="title ?? null"
afuler
2020-02-23 11:17:43 +08:00
判断了,是 undefined,现在就是似乎刷新之后 cookie 没有传到后端。
afuler
2020-02-23 11:18:58 +08:00
@acthtml 就是这个问题!
afuler
2020-02-23 11:40:48 +08:00
@acthtml withCredentials: true 这个原来设置了,但是还是不行,是需要自己手动保存 cookie 到页面域下面吗?
afuler
2020-02-23 12:43:36 +08:00
@acthtml 好像不是这个问题,因为其他页面能请求到跨域的 cookie。
acthtml
2020-02-23 14:59:26 +08:00
@afuler
你按我说的测一下,因为首次是在服务端运行的,所以要以 nodejs 运行结果为准。

1、在接口开始请求时,打印下登录凭证。比如 console.log('my session id', cookies.get('my session id')).
2、在 nodejs 控制台中查看有没有打印结果。
3、如果没有打印出来 cookie,但事实上你对应的域下有该 cookie,那么就是我描述的问题。
afuler
2020-02-23 19:35:07 +08:00
@acthtml 我解决了,还是谢谢你!
LinYa
2020-02-23 23:06:34 +08:00
@afuler 看了下没明白遇到什么问题,解决方案是什么?

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/646739

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX