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

• 请不要在回答技术问题时复制粘贴 AI 生成的内容

This topic created in 2280 days ago, the information mentioned may be changed or developed.

用 springboot 写了一个博客后端，nuxt 前端，现在遇到了这么个问题，毫无头绪。我的博客可以登录，登录之后可以查看前端的文章页面，但是一刷新就没有了，前端就显示 Cannot read property 'title' of undefined。
现在排除了一些可能的问题，如果在后端把请求文章详情改成不需要登录，这个问题就没有了，刷新之后还是原来的文章。
百度上搜了一下，但感觉都不是类似的问题，主要是不知道搜什么关键词，我搜过 vue 跨域请求，还有刷新之后没有登陆，还搜过刷新之后数据消失。
我现在就是想搜索也不清楚应该改搜什么关键词，只能来问问了。

nuxt

springboot

刷新

16 replies • 2020-02-23 23:06:34 +08:00

MOONLIGHTT

Feb 23, 2020

大概率后端传输来的数据为空，也就是`data`为空，前端获取`data.title`属性就会出现这样的报错。d

redford42

Feb 23, 2020

打断点看看数据三
打不来就在调接口那 console
然后看看 network 接口返回得数据是不是没有 title

ycpt2121

Feb 23, 2020

“如果在后端把请求文章详情改成不需要登录，这个问题就没有了，刷新之后还是原来的文章。‘这里最后一句什么意思，说清楚点，你可以看看 data.title 是不是必须的，自动动手改改源码

helloworldchao

Feb 23, 2020 via Android

应该是第一次 render 时数据还未获取你直接调用了 title 所属对象，但这个对象还未赋值结果调用了 undefined.title 就报错了。可以在调用 title 的地方对对象先做个判空类似 obj & obj.titile

afuler

Feb 23, 2020

@ycpt2121 前端可以请求后端的文章详情，这个请求需要先登录。这个需要登录是在后端设置的，如果设置成不需要登录，刷新问题就没有了。

sumarker

PRO

Feb 23, 2020

有没有配置 nginx 是不是 nginx 的配置问题

acthtml

Feb 23, 2020

页面和接口 2 个域下不？

acthtml

Feb 23, 2020

我举个例子

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

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

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

解决方案是：

1. 前端登录成功之后将登录凭证保存在页面域下面。
2. 异步请求时，将登录凭证通过 http header 形式传送。

agdhole

Feb 23, 2020 via Android

v-if title,或者用最新 es 的语法糖 :title="title ?? null"

afuler

Feb 23, 2020

判断了，是 undefined，现在就是似乎刷新之后 cookie 没有传到后端。

afuler

Feb 23, 2020

@acthtml 就是这个问题！

afuler

Feb 23, 2020

@acthtml withCredentials: true 这个原来设置了，但是还是不行，是需要自己手动保存 cookie 到页面域下面吗？

afuler

Feb 23, 2020

@acthtml 好像不是这个问题，因为其他页面能请求到跨域的 cookie。

acthtml

Feb 23, 2020

@afuler
你按我说的测一下，因为首次是在服务端运行的，所以要以 nodejs 运行结果为准。

1、在接口开始请求时，打印下登录凭证。比如 console.log('my session id', cookies.get('my session id')).
2、在 nodejs 控制台中查看有没有打印结果。
3、如果没有打印出来 cookie，但事实上你对应的域下有该 cookie，那么就是我描述的问题。

afuler

Feb 23, 2020

@acthtml 我解决了，还是谢谢你！

LinYa

Feb 23, 2020

@afuler 看了下没明白遇到什么问题，解决方案是什么？