[편집 및 요약] 프론트엔드가 꼭 알아야 할 몇 가지 실용적인 응답 헤더

이 기사를 읽고 다음을 수행하세요.

• 직장에서 직면하는 문제를 해결하기 위해 몇 가지 매우 실용적이고 실용적인 응답 헤더를 알아보세요.

• 문제를 해결할 뿐만 아니라 백엔드와 운영 및 유지 관리와 충돌할 때 우위를 점할 수 있는 기능도 제공합니다.

응답 헤더를 배우는 것이 중요합니까?

정말 중요해요.

믿을 수 없다면 아래 장면을 살펴보세요. 친숙해 보이죠?

1. 미리보기와 다운로드가 불편합니까?

1.1 시나리오

동료와 그룹 친구들이 이 문제에 대해 두 번 이상 논의하는 것을 들었습니다.

"백엔드는 txt( 또는 pdf/'json' 등) 파일 다운로드 url은 a 태그를 사용하면 열 수 있지만 미리보기가 됩니다. .. 어떻게 해야 하나요? 저장! "

txt(或者 pdf/'json' 等)文件的下载 url，可以当我用 a 标签打开时，却变成了预览……怎么办？救！！！”

此时，就会有人上去推荐 FileSaver.js 或者 “手写读流另存为”。

然后还有人附和...

我：？？？

这是需要写代码才能解决的问题吗？

如果你有了解过 Content-Disposition 这个 Response Header，那你一定知道，只需要响应头上增加一行，问题就能迎刃而解。

1.2 介绍

Content-Disposition：这个响应头可以决定内容是 预览 还是 下载。

它支持三种格式的值：

• Content-Disposition: inline
  此时，消息体会以页面的一部分或者整个页面的形式展示。（预览）

• Content-Disposition: attachment
  消息体应该被下载，默认文件名和 url 格式有关。

• Content-Disposition: attachment; filename="filename.jpg"
  消息体应该被下载，默认文件名可指定。

注：如果需要预览，需要配合适当的 Content-Type 食用；

1.3 示例

为此，我特意写了一个 express 小示例。

大抵是在 express 应用下写了三个路由，如下：

const user = {
  name: "摸鱼的春哥",
  blogUrl: "https://juejin.cn/user/1714893870865303"
}

const contentDispositionInline = async (req, res, next) => {
  res.setHeader('Content-Disposition', 'inline')
  res.send(user)
}

const contentDispositionFilename = async (req, res, next) => {
  res.setHeader('Content-Disposition', 'attachment; filename="chunge.json"')
  res.send(user)
}

const contentDispositionNoFilename = async (req, res, next) => {
  res.setHeader('Content-Disposition', 'attachment')
  res.send(user)
}

然后我分别访问三个路由，效果差异：

二、项目升级了，需要客户 清空缓存 ？

2.1 场景

实施：“客户反馈Bug 还是没修复。”
你：“哥，真修复了，要不你让客户清一下缓存？”
实施：“啊？客户说他不会清……”
……

永远不要期望你的客户会进行 “那些研发才懂” 的操作。也不要把你的问题，归因到 浏览器缓存 上。

浏览器缓存 是被发明出来优化用户体验的，并不是被发明出来阻碍用户的。

因此，理解如何使用 Cache-Control 这个响应头，是前端的必知技能。

2.2 介绍

Cache-Control이때 누군가가 와서 FileSaver.js 또는 "손글씨 읽기 스트림을 다른 이름으로 저장"을 추천할 것입니다.

그때 다른 사람이 울렸는데...Cache-Control나:? ? ?

🎜이 문제를 해결하려면 코드를 작성해야 하나요? 🎜🎜Content-Disposition의 응답 헤더에 대해 알고 계시다면, 응답 헤더에 한 줄만 추가해도 문제가 해결된다는 점을 아셔야 합니다. 🎜

🎜1.2 소개🎜🎜🎜🎜Content-Disposition🎜: 이 응답 헤더는 콘텐츠가 🎜preview🎜 또는 🎜download🎜인지 여부를 결정할 수 있습니다. 🎜🎜3가지 형식의 값을 지원합니다: 🎜🎜🎜🎜Content-Disposition: inline
이때 메시지 본문은 페이지의 일부 또는 전체 페이지로 표시됩니다. (미리보기) 🎜🎜🎜🎜Content-Disposition: attachment
메시지 본문을 다운로드해야 하며 기본 파일 이름은 url 형식과 관련됩니다. 🎜🎜🎜🎜Content-Disposition: attachment; filename="filename.jpg"
메시지 본문을 다운로드해야 하며 기본 파일 이름을 지정할 수 있습니다. 🎜🎜🎜🎜🎜참고: 미리 보려면 적절한 Content-Type을 사용해야 합니다. 🎜🎜

🎜1.3 예 🎜🎜🎜 이를 위해 특별히 express의 작은 예제를 작성했습니다. 🎜🎜아마 express 애플리케이션에서 다음과 같이 세 가지 경로를 작성했을 것입니다. 🎜rrreee🎜그런 다음 세 경로에 각각 액세스했는데 효과가 달랐습니다. 🎜🎜🎜

🎜 2. 프로젝트가 업그레이드되었으며 고객이 캐시를 지워야 합니까? 🎜🎜

🎜2.1 시나리오 🎜🎜🎜구현: "고객 피드백 버그가 아직 수정되지 않았습니다."
당신: "형님, 정말 그렇군요. , 고객에게 캐시를 삭제하라고 요청하는 것이 어때요?"
구현: "어? 고객이 캐시를 삭제할 수 없다고 하더군요..."
...🎜🎜절대 고객이 🎜"연구 및 개발은 이해만 하는" 작업을 수행할 것이라고 기대하지 마세요🎜 . 문제를 🎜브라우저 캐시🎜 탓으로 돌리지 마세요. 🎜🎜🎜브라우저 캐시🎜는 사용자를 방해하는 것이 아니라 사용자 경험을 최적화하기 위해 발명되었습니다. 🎜🎜그러므로 이 응답헤더의 사용법🎜 이해는 프론트엔드에서 꼭 알아야 할 스킬입니다. 🎜

🎜2.2 소개🎜🎜🎜🎜🎜🎜: 캐싱 메커니즘을 지정하는 데 사용됩니다. 🎜🎜캐싱은 프론트엔드 8부작 에세이를 위해 꼭 알아야 할 지식으로 누구나 익숙하리라 믿습니다. 일반적인 🎜🎜🎜 속성은 다음과 같습니다. 🎜

응답 헤더 속성	value	meaning
cache-control	no-store	캐싱이 없습니다. 이렇게 하면 클라이언트나 서버 모두 캐시되지 않으며 그렇게 할 필요가 없습니다. 강력한 캐시라고 하며 캐시를 협상합니다.
cache-control	public	은 일반적으로 캐시할 수 없는 콘텐츠에 대해서도 누구나(요청하는 클라이언트, 프록시 서버 등 포함) 응답을 캐시할 수 있음을 나타냅니다. (예: 1. 이 응답에는 max-age 지시어 또는 Expires 헤더가 없습니다. 2. 이 응답에 해당하는 요청 방법은 POST입니다.)
cache-control	private	은 응답이 다음을 수행할 수 있음을 나타냅니다. 단일 사용자만 캐시할 수 있습니다. 공유로 캐시할 수 없습니다(즉, 프록시 서버가 캐시할 수 없음). 개인 캐시는 예를 들어 사용자의 로컬 브라우저에 해당하는 응답 콘텐츠를 캐시할 수 있습니다.
cache-control	max-age=	캐시가 만료된 것으로 간주되는 최대 캐시 저장 기간(초)을 설정합니다. 만료와 달리 시간은 요청 시간을 기준으로 합니다.

• 캐싱 없음
  캐싱 없음은 모든 요청이 캐싱 없이 서버에서 다시 가져오는 것을 이해하기 가장 쉽습니다.
  이 전략에는 Cache-Control: no-store 응답 헤더만 제공하면 됩니다.
Cache-Control: no-store 响应头即可。
• 强缓存
  有些资源文件，几乎不会发生变化（比如已经 hash化命名的文件），则可以直接从本地缓存获取，这就是所谓的 强缓存 ;
  通过 cache-control: public/private 或者 cache-control: max-age= 都可以指定机制为强缓存。
• 协商缓存
  这是一种更为复杂缓存机制，无法再通过响应头 简单粗暴地 指定实现，而是需要前后端协作配合。
  简单来说，每次请求资源前前端会写代前一次的响应 hash，问询服务端 资源是否发生过变化，从而达到准确缓存的效果。
  本文不赘述，如果有兴趣，可以参考此文：juejin.cn/post/703078…

2.3 实际生产如何运用？

• 凡是名称带有 hash 值的资源，一律可以强缓存。
  （毕竟内容一旦有变化，名称的hash 也跟着变了）
• 凡是通过 cdn 引入的第三方库，均建议携带版本信息，这样也可以强缓存。
  （比如 /xx/xx/jquery.min.js 切换为 jquery@3.6.0/dist/jquery.min.js）
• 凡是 html、ico 这类命名固定的文件，建议一律 不缓存 或者 协商缓存。

三、我的 Cookie 不可能这么可爱！

3.1 场景

"春哥春哥，为啥我登录成功了，请求还是 401 ？"

"春哥春哥，为啥我存进 cookie 的值取不到？"

"春哥春哥，这破 cookie 是不是坏了，浏览器里看明明有值，为啥我访问不了？"

我：“兄弟，你有了解过一个叫 set-cookie 的响应头吗？”

是它！是它！就是它！关于 cookie 的各种异常，全靠它!

3.2 介绍

Cookie 曾经是 Web 开发无法绕开的一道门槛，而现在它的存在感越来越弱，但海量的存量项目并不会因为技术的趋势而消失，它们依然很有价值，依然需要维护。

而 set-cookie 响应头正是 Cookie 体系中最为核心的 第一主角。

Set-Cookie: 是一个响应头，服务端赋值，让浏览器端产生 Cookie，并限定 Cookie강력한 캐싱

일부 리소스 파일(예: 해시 이름이 지정된 파일)은 거의 변경되지 않으며, 이를 로컬 캐시에서 직접 얻을 수 있습니다. 강력한 캐싱 ;

cache-control: public/private 또는 cache-control: max-age=을 통해 메커니즘을 강력한 캐싱으로 지정할 수 있습니다. .

협상 캐싱🎜이것은 더 복잡한 캐싱 메커니즘으로 더 이상 응답 헤더를 통해 단순하고 대략적으로 지정할 수 없지만 프런트엔드 및 백엔드 공동 작업이 필요합니다. 🎜간단히 말하면, 리소스에 대한 각 요청 전에 프런트 엔드는 이전 응답 해시를 작성하고 리소스가 변경되었는지 서버에 묻습니다. 정확한 캐싱 효과를 얻습니다. 🎜이 기사에서는 자세히 다루지 않겠습니다. 관심이 있으시면 다음 기사를 참조하세요. juejin .cn/post/703078…

2.3 적용 방법 실제 생산?

🎜🎜이름에 해시 값이 포함된 모든 리소스는 강력하게 캐시될 수 있습니다. 🎜(결국 내용이 변경되면 이름의 해시도 변경됩니다.)🎜cdn을 통해 소개된 타사 라이브러리는 모두 휴대하는 것이 좋습니다. 버전 정보를 제공합니다. 이를 통해 강력한 캐싱도 가능해집니다. 🎜(예를 들어 /xx/xx/jquery.min.js는 jquery@3.6.0/dist/jquery.min.js로 전환됩니다.)🎜 모든 html 및 ico와 같은 고정된 이름을 가진 파일의 경우 캐시하지 않거나 캐시를 협상하는 것이 좋습니다.

3. 내 쿠키가 이렇게 귀여울 수가 없어요!

3.1 시나리오

🎜"전 형제님, 천 형제님, 제가 왜 로그인에 성공했을까요? ? 요청이 여전히 401인가요? "🎜

🎜"천 형제님, 제가 cookie에 저장한 값을 왜 가져올 수 없나요?

🎜"천 형제님, 천 형제님, 이 쿠키가 깨졌나요? 브라우저에서 확실히 중요한데 왜 액세스할 수 없나요?"🎜

🎜나: "형제 , set-cookie라는 응답 헤더에 대해 들어보신 적이 있나요?" 🎜

🎜🎜바로 그거예요! 그게 다야! 그게 다야! 쿠키에 관한 모든 종류의 예외가 여기에 달려 있습니다!🎜

3.2 소개

🎜쿠키 / code>는 예전에는 <code>웹 개발에서 우회할 수 없는 문턱이었는데, 지금은 그 존재감이 점점 약해지고 있지만, 기술 동향 때문에 대규모 스톡 프로젝트가 사라지지는 않을 것입니다. important 중요 가치가 있지만 여전히 유지 관리가 필요합니다. 🎜🎜set-cookie 응답 헤더는 쿠키 시스템의 핵심 첫 번째 주인공입니다. 🎜🎜Set-Cookie: 서버에서 할당한 응답 헤더로, 브라우저가 쿠키를 생성하고 쿠키를 제한할 수 있습니다. . 🎜🎜이러한 기능은 다음과 같습니다.🎜<ul> <li>만료 시간 제한; <code>Expires=<date></date>Expires=<date></date>

存活周期；Max-Age=<number></number>
在 cookie 失效之前需要经过的秒数。0 或 -1 直接失效；此属性的优先级高于 Expires。

域名；Domain=<domain-value></domain-value>
指定 cookie 只能在什么域下生成；（允许通配，这个属性主要出于安全性）

路径；Path=<path-value></path-value>
比 Domain 更为细致的控制策略，甚至指定了 xx 路径下才能发送 Cookie。

只在 Https 产生；Secure
如果 set-cookie 头中有 Secure 属性，那么浏览器只会在 Https 环境产生和发送 Cookie。

禁用 js 操作 API；HttpOnly
如果 set-cookie 头中有 HttpOnly 属性，那么 Cookie 属性的生成、读写、发送就只能由浏览器通过 "响应头" 控制了，不在允许前端通过 js 操作 Cookie。

是否允许跨域携带；SameSite=<samesite-value></samesite-value>
支持属性包括 Strict、Lax、None，分别表示：

• Strict: 完全不能跨域携带；
• Lax: 只允许从外站导航到源站时携带 Cookie
• None：跨域也行，不限制。

3.3 开发常见问题分析

• 为啥你登录成功了，请求还是 401？

  早期非常多的项目，使用 Cookie 作为用户身份识别的手段，比如 Spring MVC 项目就是通过给 Cookie 一个 JSeesionId 的值作为识别，判断你是否出于当前会话。

  而 "登录了，却还 401" 这个现象，如果服务端没有问题的话，多半是 浏览器其实并未存储Cookie。

  换个说法，你每次发起请求，服务端都认为你是一次 新的会话，和上一次 登录的你 并非同一人。

  如果你正处于 http 环境，那你可能需要暂时移除 Secure 属性。

• 存不进、取不出？
  先确认 是否有域的限制、是否有路径的限制、是否有 HttpOnlyLifetime; Max-Age=<number></number>
  쿠키가 지나야 하는 시간(초) 만료됩니다. 0 또는 -1은 직접적으로 유효하지 않습니다. 이 속성은 Expires보다 우선순위가 높습니다.

도메인 이름; Domain=<domain-value></domain-value>

쿠키만 생성할 수 있는 도메인을 지정하세요. 와일드카드는 주로 보안을 위한 것입니다. )

Path; Path=<path-value></path-value>Domain보다 더 자세한 제어 전략, xx 경로를 쿠키

. 🎜Https에서만 생성됩니다. Secure🎜set-cookie 헤더에 Secure 속성이 있는 경우 브라우저 쿠키는 Https 환경에서만 생성되고 전송됩니다. 🎜🎜js 작업 API를 비활성화합니다. HttpOnly🎜set-cookieHttpOnly가 있는 경우 /code> 헤더 code> 속성을 ​​사용하면 쿠키 속성의 생성, 읽기, 쓰기 및 전송은 "응답 헤더"를 통해서만 브라우저에서만 제어할 수 있으며 프런트 엔드는 더 이상 js >쿠키를 통해 를 운용할 수 있습니다. 🎜🎜도메인 간 이식성이 허용되는지 여부; SameSite=<samesite-value></samesite-value>🎜지원되는 속성에는 Strict, Lax, 가 포함됩니다. 없음, 각각: 🎜🎜<code>엄격: 도메인 간에 전혀 전달될 수 없습니다. 🎜🎜Lax: 다음에서 탐색할 때만 쿠키가 전달되도록 허용합니다. 원본 사이트에 대한 외부 사이트 🎜🎜없음: 교차 도메인도 허용되며 제한이 없습니다. 🎜🎜🎜🎜

3.3 개발 FAQ 분석🎜

🎜🎜🎜성공한 후에도 요청이 여전히 401인 이유는 무엇입니까? 로그인했나요? 🎜🎜많은 초기 프로젝트에서는 사용자 식별 수단으로 Cookie를 사용했습니다. 예를 들어 Spring MVC 프로젝트에서는 Cookie에 값을 부여했습니다. JSeesionId는 현재 세션에 있는지 확인하기 위한 식별로 사용됩니다. 🎜🎜로그인했는데 여전히 401' 현상이 발생하는 경우, 서버 측에 문제가 없다면 브라우저가 실제로 쿠키를 저장하지 않기 때문일 가능성이 높습니다🎜. 🎜🎜즉, 요청을 할 때마다 서버는 귀하를 새로운 세션🎜으로 간주하며, 귀하는 마지막 로그인🎜과 동일한 사람이 아닙니다. 🎜🎜http 환경에 있는 경우 Secure 속성을 ​​일시적으로 제거해야 할 수도 있습니다. 🎜🎜🎜🎜입출금이 안되나요? 🎜먼저 도메인 제한이 있는지🎜, 경로 제한이 있는지🎜, HttpOnly🎜가 있는지 확인하세요.🎜 하나씩 확인하면 문제가 해결됩니다. 어렵지 않게 해결하세요. 🎜🎜🎜🎜 (학습 영상 공유: 🎜웹 프론트엔드🎜)🎜

위 내용은 [편집 및 요약] 프론트엔드가 꼭 알아야 할 몇 가지 실용적인 응답 헤더의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!