单页应用中服务端是如何响应的？

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

作为一个前端很少去思考后端响应的问题，这个图就让我陷入了疑问，SPA 初始加载的时候服务端是返回一个 html 页面和所需的脚本、样式表，然后导航到其他页面时客户端发送 ajax 请求服务端返回 json 格式的数据来更新页面，那么服务端是如何判断什么时候返回 html 页面什么时候返回 json 格式的数据的？

vue-router 里讲实现单页路由需要后端配置，如 nginx 设置
location / {
try_files $uri $uri/ /index.html;
}
意思是当 URL 匹配不到任何静态资源时都返回同一个 index.html。那么是否是不管 SPA 初始加载和导航到其他页面时都要返回的这一个 html 页面？可是这又和上面的说法相悖了，所以 SPA 初始加载和导航到其他页面时服务端是如何响应的？？？

页面

HTML

SPA

17 replies • 2022-11-08 10:24:18 +08:00

Garwih

Mar 13, 2018

后端路由，了解一下。

johnniang

Mar 13, 2018 via Android

只需要返回 index.html 就可以了，剩下的路由由 vue-router 自己处理就好了

naver1

Mar 13, 2018

后端根据前端请求来返回内容啊。。。
需要返回 json 的时候，前端请求都带参数的。。。

GG668v26Fd55CP5W

Mar 13, 2018 via iPhone

ajax 的请求有一个 header，XMLHttpRequest

GG668v26Fd55CP5W

Mar 13, 2018 via iPhone

@falcon05 x-requested-with

mokeyjay

Mar 13, 2018

ajax 请求跟普通的 GET、POST 请求是有区别的，后端可以识别出来

learnshare

Mar 13, 2018

页面请求和 API 请求都有对应的 URL/path，以及 GET/POST 方法，和各种 HTTP 参数

hardman

Mar 13, 2018 via Android

路由响应了解下

yilin12

Mar 13, 2018

@Garwih
@johnniang
@DT27
@learnshare
所以是匹配到后端路由的 ajax 请求返回 json 数据，前端路由导航到对应页面，未匹配后端路由返回 index.html 这样嘛？

yilin12

Mar 13, 2018

@falcon05 这样的话 fetch 呢？

qiayue

PRO

Mar 13, 2018

书读得太少，想得太多
都不知道该怎么回答你

yilin12

Mar 13, 2018

@mokeyjay 你让我费解到了 😂 get 和 post 不是 ajax 请求的方法吗？额你的意思是请求静态资源和 ajax 请求是不一样的吗？话说是怎么请求静态资源的，css js 这些。。。

yilin12

Mar 13, 2018

@qiayue 我也不知道该怎么回答你，问一个技术问题不知道有什么值得你 diss 的地方

crysislinux

Mar 13, 2018 via Android

只要不是 /api/xxx 的，全部当静态资源请求，静态 404 了就 index.html

learnshare

Mar 13, 2018

@yilin12 不论请求页面还是 API，后端得到的信息结构都一致（ request ）
后端解析 request 的内容，再决定返回什么（ response ）

response 跟前端路由没有任何关系，只跟 request 有关系

返回的是页面（ html ） js/css，或者 API （ JSON ），取决于 response[content-type] 是什么

wizardforcel

Mar 13, 2018

URL 不一样啊。

/index.html，/static/js/，/static/css/ 和 /api/ 能一样么。

还有上面那些大神，你们家 controller 是写在一起，然后拿 Content-Type 来判断返回值？？还是多写几个 controller 比较舒服吧。。。

yilin12

Nov 8, 2022