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

[yilin12]

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

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

[Garwih]

后端路由，了解一下。

[johnniang]

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

[DT27]

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

[falcon05]

ajax 的请求有一个 header，XMLHttpRequest

[falcon05]

@falcon05 x-requested-with

[mokeyjay]

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

[learnshare]

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

[hardman]

路由响应了解下

[yilin12]

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

[yilin12]

@falcon05 这样的话 fetch 呢？

[qiayue]

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

[yilin12]

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

[yilin12]

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

[crysislinux]

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

[learnshare]

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

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

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

[wizardforcel]

URL 不一样啊。

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

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

[yilin12]

<iframe src="https://onedrive.live.com/embed?resid=9A6C00B49D73A43D%2153912&authkey=!AGXq_8PpKI31dBQ" width="3999" height="2940" frameborder="0" scrolling="no" />

https://sat02pap002files.storage.live.com/y4mVRSlsJcxj0nOmALKLGTjrqZL_9dJx8AjrDGeysCMy_lnOB9HMykmAmIuS9NlyHB6v3kh2E2cBxAd7gXEPK_9fKgan2rCgIqOcL61M0NDYIaWrIt_HFi-ASRM3bVTUEp-9TWWER7wa5R39xKdzhymEKn4vxrW3AXzRa6wbGoh6Wa7uqrlwTWBuf8vHC8gAohp?width=3999&height=2940&cropmode=none

https://onedrive.live.com/embed?resid=9A6C00B49D73A43D%2153912&authkey=!AGXq_8PpKI31dBQ