Java Web开发中，Servlet是处理HTTP请求的核心技术之一。Servlet提供了一种直接控制HTTP响应的方式，包括设置响应头（Header）。如果你正在使用Servlet API来构建Web应用，了解如何在Servlet中设置HTTP响应Header是非常重要的。下面，我们将详细介绍如何在Servlet中实现这一点，并提供具体的代码示例。

示例代码

考虑一个简单的Servlet，它的任务是在HTTP响应中设置一个自定义的Header，例如X-Custom-Header，其值为my-custom-value。以下是具体的实现代码：

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

public class CustomHeaderServlet extends HttpServlet {

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 设置响应头
        response.setHeader("X-Custom-Header", "my-custom-value");
        
        // 设置响应状态码为200 OK
        response.setStatus(HttpServletResponse.SC_OK);
        
        // 可选：设置响应体
        response.getWriter().println("Hello, this is the response body.");
    }
}

源码解析

1. 继承HttpServlet类：创建一个Servlet，必须继承HttpServlet类。这为我们提供了处理HTTP请求的基本方法。
2. 重写doGet()方法：这是处理HTTP GET请求的方法。你也可以重写doPost()、doPut()等方法来处理其他类型的HTTP请求。
3. 设置HTTP响应Header：使用response.setHeader()方法设置响应头。在这个例子中，我们设置了一个名为X-Custom-Header的Header，其值为my-custom-value。
4. 设置响应状态码：通过response.setStatus()方法设置HTTP响应的状态码。在这个例子中，我们设置为HttpServletResponse.SC_OK，即200 OK，表示请求成功。
5. 设置响应体：虽然不是必须的，但你也可以使用response.getWriter().println()来设置响应体的内容。这将是一个字符串，可以是HTML、JSON或其他任何形式的数据。

总结

通过上述示例，我们展示了如何在Java Servlet中设置HTTP响应Header。这只是一个基本的例子，实际应用中你可能需要处理更复杂的逻辑，例如根据请求参数动态设置Header值，或者设置多个Header。Servlet API提供了足够的灵活性来满足这些需求，使你能够完全控制HTTP响应的各个方面。对于需要深入定制HTTP响应的场景，Servlet无疑是一个强大且灵活的选择。

#头条创作挑战赛#

本使用

使用add_header允许在响应头中添加自定义字段。

官方文档地址：http://nginx.org/en/docs/http/ngx_http_headers_module.html

参考nginx官方文档，添加响应头的方法如下：

举例：在conf文件的server作用域中添加如下响应头：

server {
  listen 80;
  # 其他配置...

  # 允许跨域
  add_header Access-Control-Allow-Origin *;
  add_header Access-Control-Allow-Methods 'GET, POST';
  add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';

	# 其他配置...
}

保存配置，重启nginx服务器，尝试跨域请求nginx目录下的json文件，响应成功。

遇到的坑：反向代理请求报错

由于是在nginx server作用域下设置add_header，会对nginx反向代理的php/tomcat请求生效。

如果php代码中设置了header('Access-Control-Allow-Origin: *');add_header不会覆盖而是追加，响应头会出现Access-Control-Allow-Origin多个定义错误。

解决方法：

在nginx location作用域中设置add_header。一般跨域请求的都是json文件，仅对json文件生效即可。

  location ~ .*\.(json)?$ {
    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Methods 'GET, POST';
    add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
  }

add_header总结

1. add_header 指令用于添加响应头字段，当且仅当状态码为200, 201, 204, 206, 301, 302, 303, 304, 307, 308有效。
2. add_header在其他状态码下也生效，可以加上always，add_header name value always。
3. 当前作用域（http、server、location、location的if）没有设置add_header的话，会继承外层作用域的add_header设置。

文已经过原作者 Shadeed 授权翻译。

在 CSS3 没有普及的时候，创建一个网站 header 是一项既可怕又困难的任务 ?。那时，Flexbox 还是个新东西，我们不得不使用老方法，比如 float和clearfix技术。今天，情况完全不同了，Flexbox 得到了广泛的支持，大大的减少了我们的开发工作，同时也为我们提供了更多的可能性。

有人可能会说，现在 CSS3 这么普及，制作一个网站 header 不是很容易么 ?？并非如此，因为有一些有趣的挑战需要解决,在本文中我们会介绍其中的几种。

简介

首先，这里所说的网站 Header 是用户访问网站时首先看到的内容之一。通常，它包含logo或网站名称以及导航链接，如下所示:

不管 Header 的视觉设计如何，关键元素都是logo 和导航。

Flexbox

当 flexbox 应用于 Header 元素时，它将使所有子项目在同一行中。然后，你所需要做的就是应用justify-content来分配它们之间的间距。

html

<header class="site-header">
  <a href="#" class="brand">Brand</a>
  <nav class="nav"></nav>
</header>

css

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

很简单，对吧?对于这样的用例，是的，可能会比这更复杂。

Header Wrapper

在上面的 lago 和 nav 外没有包含一层 wrapper，这在大屏幕可能会出现问题。

从上可以看到第一个Header太宽了，因为它没有内部 wrapper 相比第一个，第二个看起来好多了。所以，我们可以对 HTML 进行如下调整。

<header class="site-header">
  <div class="wrapper site-header__wrapper">
    <a href="#" class="brand"><img src="logo.svg" alt="brand" /></a>
    <nav class="nav"></nav>
  </div>
</header>

flexbox应该移动到.site-header__wrapper元素中。

.site-header__wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

使用 flex-wrap

当屏幕很小的时候，可以水平滚动。见下图

如果没有设置flex-wrap: wrap，当屏幕过小的时候就会出现水平滚动，如果不想这样，可以加上 flex-wrap: wrap` ?。

Header 的多种形式

我喜欢使用flexbox的原因是它可以很容易地处理 header 设计的多种变化。基于前面的 header 设计，我扩展了 header 元素的一些选项，如添加按钮、搜索输入和更改子项目的顺序。

Header 变化 1

假设我想要在导航链接旁边添加了一个按钮。这应该如何处理?我们应该把它作为链接添加到导航栏中吗?还是应该和导航分开?我更喜欢这样做。

<header class="site-header">
  <div class="wrapper site-header__wrapper">
    <a href="#" class="brand"><img src="logo.svg" alt="brand" /></a>
    <nav class="nav"></nav>
    <a href="/track-shipment" class="button">Track</a>
  </div>
</header>

这种情况下，我们不能在用 justify-content: space-between来处理间隙，相反，我会在 nav 元素上使用 margin-left: auto，

这样，它就会自动向右靠齐。

将导航和 track 按钮分开对于移动设备非常有用，因为我们需要保留该按钮并在其旁边显示一个移动切换按钮。

Header 变化 2

与第一个变化类似，这个变化增加了一个搜索输入，占用了剩余的可用空间。对于flexbox，这可以通过使用flex属性来实现。

html

<header class="site-header">
  <div class="wrapper site-header__wrapper">
    <a href="#" class="brand"><img src="logo.svg" alt="brand" /></a>
    <div class="search"></div>
    <nav class="nav"></nav>
    <a href="/track-shipment" class="button">Track</a>
  </div>
</header>

css

.search {
  flex: 1;
}

现在，搜索输入将填充 brand 和nav 之间的可用空间。但是，这有一些限制。在较小的视口上，header 将如下所示:

搜索输入宽度不应小于此宽度，因为这样很难输入和查看全文。下面有两种解决方案：

我更喜欢第二种解决方案，因为它不会过早隐藏导航。一般来说，如果元素不影响布局，我会尽量避免隐藏它。

Header 变化 3

对于这个示例，HTML标记是相同的，但是 header 里的元素顺序是不同的。我们如何才能做到这一点? 你可能想到用 order 属性来解决这个问题 ?

html

<header class="site-header">
  <div class="wrapper site-header__wrapper">
    <a href="#" class="brand"><img src="logo.svg" alt="brand" /></a>
    <nav class="nav"></nav>
    <a href="/track-shipment" class="button">Track</a>
  </div>
</header>

css

.site-header {
  display: flex;
  justify-content: space-between;
}

.nav {
  order: -1;
}

这样有个问题，间隔空间不会使 logo 居中，它只是分散项目之间的空间。

解决方案是给每个子项一个flex: 1，这将在它们之间分配可用空间。

.brand,
.nav,
.button {
  flex: 1;
}

这样，由于flex: 1，按钮元素变宽了， 解决此问题的唯一方法是将其包裹到另一个元素中。

HTML

<header class="site-header">
  <div class="wrapper site-header__wrapper">
    <a href="#" class="brand"><img src="logo.svg" alt="brand" /></a>
    <nav class="nav"></nav>
    <div class="button-wrapper">
      <a href="/track-shipment" class="button">Track</a>
    </div>
  </div>
</header>

这样，我们就可以将下面的logo和按钮居中。

.logo {
  text-align: center;
}

/* 不要介意这里的命名，这只是出于演示*/
.button-wrapper {
  text-align: end; /* end 等同于LTR语言中的right */
}

但是，如果添加了更多导航链接，这种方法很容易失败。我们需要确保导航链接的数量不会超过特定的限制。下面一个logo偏离中心的例子 ?:

正如在上图中看到的，logo没有居中。所以要记住这一点，以避免这种意想不到的问题 ?。

使用 Flexbox 构建 Header 的有用技巧

flex-basis

如果某个元素需要在移动设备上占据整个宽度（不能隐藏的重要导航），我会使用flex-basis: 100% ?。

从上面的模型看，做起来可能很简单。实际上不是。通常，header 可能有一个内部间距（padding），当我们强制某项占据全部宽度时，除非清除padding ，否则它不会生效。但是，删除padding不切实际，因为它将影响设计中的其他元素 ?。

下面解决此问题的一种解决方法 ?：

1. 将flex: 1 0 100%添加到导航元素。
2. 如有需要，请更改其order。有时，可能还有其他元素，我们想确保导航是最后一个。
3. 加上一个等于宽度等于 padding 的负 margin，这也会让导航占据整个宽度。
4. 在导航中添加 padding，这会增加一些适当的空间。
5. 最后，使用了justify-content: center将导航项居中（不重要）

.nav {
  flex: 1 0 100%; /* [1] */
  order: 2; /* [2] */
  margin: 1rem -1rem -1rem -1rem; /* [3] */
  padding: 1rem; /* [4] */
  display: flex; /* [5] */
  justify-content: center; /* [5] */
}

间距

着 Chrome 和 Firefox 支持flex gap属性，现在在flex项目之间添加间距比以往任何时候都容易。考虑以下标题

要做到上图的高亮间距，只需将gap: 1rem添加到flex父节点。没有了gap，我们还是需要用旧的方式来间隔 ?。

/* 老的方式 */
.brand {
  margin-right: 1rem;
}

.sign-in {
  margin-right: 1rem;
}

/* 新的方式 */
.site-header {
  /* Other flexbox styles */
  gap: 1rem;
}

作者：Shadeed 译者：前端小智 来源：ishadeed

原文：https://ishadeed.com/article/website-headers-flexbox/