如何在Java中使用Servlet設(shè)置HTTP響應(yīng)的Header

Java Web開(kāi)發(fā)中，Servlet是處理HTTP請(qǐng)求的核心技術(shù)之一。Servlet提供了一種直接控制HTTP響應(yīng)的方式，包括設(shè)置響應(yīng)頭（Header）。如果你正在使用Servlet API來(lái)構(gòu)建Web應(yīng)用，了解如何在Servlet中設(shè)置HTTP響應(yīng)Header是非常重要的。下面，我們將詳細(xì)介紹如何在Servlet中實(shí)現(xiàn)這一點(diǎn)，并提供具體的代碼示例。

示例代碼

考慮一個(gè)簡(jiǎn)單的Servlet，它的任務(wù)是在HTTP響應(yīng)中設(shè)置一個(gè)自定義的Header，例如X-Custom-Header，其值為my-custom-value。以下是具體的實(shí)現(xiàn)代碼：

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 {
        // 設(shè)置響應(yīng)頭
        response.setHeader("X-Custom-Header", "my-custom-value");
        
        // 設(shè)置響應(yīng)狀態(tài)碼為200 OK
        response.setStatus(HttpServletResponse.SC_OK);
        
        // 可選：設(shè)置響應(yīng)體
        response.getWriter().println("Hello, this is the response body.");
    }
}

源碼解析

繼承HttpServlet類：創(chuàng)建一個(gè)Servlet，必須繼承HttpServlet類。這為我們提供了處理HTTP請(qǐng)求的基本方法。
重寫doGet()方法：這是處理HTTP GET請(qǐng)求的方法。你也可以重寫doPost()、doPut()等方法來(lái)處理其他類型的HTTP請(qǐng)求。
設(shè)置HTTP響應(yīng)Header：使用response.setHeader()方法設(shè)置響應(yīng)頭。在這個(gè)例子中，我們?cè)O(shè)置了一個(gè)名為X-Custom-Header的Header，其值為my-custom-value。
設(shè)置響應(yīng)狀態(tài)碼：通過(guò)response.setStatus()方法設(shè)置HTTP響應(yīng)的狀態(tài)碼。在這個(gè)例子中，我們?cè)O(shè)置為HttpServletResponse.SC_OK，即200 OK，表示請(qǐng)求成功。
設(shè)置響應(yīng)體：雖然不是必須的，但你也可以使用response.getWriter().println()來(lái)設(shè)置響應(yīng)體的內(nèi)容。這將是一個(gè)字符串，可以是HTML、JSON或其他任何形式的數(shù)據(jù)。

總結(jié)

通過(guò)上述示例，我們展示了如何在Java Servlet中設(shè)置HTTP響應(yīng)Header。這只是一個(gè)基本的例子，實(shí)際應(yīng)用中你可能需要處理更復(fù)雜的邏輯，例如根據(jù)請(qǐng)求參數(shù)動(dòng)態(tài)設(shè)置Header值，或者設(shè)置多個(gè)Header。Servlet API提供了足夠的靈活性來(lái)滿足這些需求，使你能夠完全控制HTTP響應(yīng)的各個(gè)方面。對(duì)于需要深入定制HTTP響應(yīng)的場(chǎng)景，Servlet無(wú)疑是一個(gè)強(qiáng)大且靈活的選擇。

#頭條創(chuàng)作挑戰(zhàn)賽#

本使用

使用add_header允許在響應(yīng)頭中添加自定義字段。

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

參考nginx官方文檔，添加響應(yīng)頭的方法如下：

舉例：在conf文件的server作用域中添加如下響應(yīng)頭：

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服務(wù)器，嘗試跨域請(qǐng)求nginx目錄下的json文件，響應(yīng)成功。

遇到的坑：反向代理請(qǐng)求報(bào)錯(cuò)

由于是在nginx server作用域下設(shè)置add_header，會(huì)對(duì)nginx反向代理的php/tomcat請(qǐng)求生效。

如果php代碼中設(shè)置了header('Access-Control-Allow-Origin: *');add_header不會(huì)覆蓋而是追加，響應(yīng)頭會(huì)出現(xiàn)Access-Control-Allow-Origin多個(gè)定義錯(cuò)誤。

解決方法：

在nginx location作用域中設(shè)置add_header。一般跨域請(qǐng)求的都是json文件，僅對(duì)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總結(jié)

add_header 指令用于添加響應(yīng)頭字段，當(dāng)且僅當(dāng)狀態(tài)碼為200, 201, 204, 206, 301, 302, 303, 304, 307, 308有效。
add_header在其他狀態(tài)碼下也生效，可以加上always，add_header name value always。
當(dāng)前作用域（http、server、location、location的if）沒(méi)有設(shè)置add_header的話，會(huì)繼承外層作用域的add_header設(shè)置。

文已經(jīng)過(guò)原作者 Shadeed 授權(quán)翻譯。

在 CSS3 沒(méi)有普及的時(shí)候，創(chuàng)建一個(gè)網(wǎng)站 header 是一項(xiàng)既可怕又困難的任務(wù) ?。那時(shí)，F(xiàn)lexbox 還是個(gè)新東西，我們不得不使用老方法，比如 float和clearfix技術(shù)。今天，情況完全不同了，F(xiàn)lexbox 得到了廣泛的支持，大大的減少了我們的開(kāi)發(fā)工作，同時(shí)也為我們提供了更多的可能性。

有人可能會(huì)說(shuō)，現(xiàn)在 CSS3 這么普及，制作一個(gè)網(wǎng)站 header 不是很容易么 ?？并非如此，因?yàn)橛幸恍┯腥さ奶魬?zhàn)需要解決,在本文中我們會(huì)介紹其中的幾種。

簡(jiǎn)介

首先，這里所說(shuō)的網(wǎng)站 Header 是用戶訪問(wèn)網(wǎng)站時(shí)首先看到的內(nèi)容之一。通常，它包含logo或網(wǎng)站名稱以及導(dǎo)航鏈接，如下所示:

不管 Header 的視覺(jué)設(shè)計(jì)如何，關(guān)鍵元素都是logo 和導(dǎo)航。

Flexbox

當(dāng) flexbox 應(yīng)用于 Header 元素時(shí)，它將使所有子項(xiàng)目在同一行中。然后，你所需要做的就是應(yīng)用justify-content來(lái)分配它們之間的間距。

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;
}

很簡(jiǎn)單，對(duì)吧?對(duì)于這樣的用例，是的，可能會(huì)比這更復(fù)雜。

Header Wrapper

在上面的 lago 和 nav 外沒(méi)有包含一層 wrapper，這在大屏幕可能會(huì)出現(xiàn)問(wèn)題。

從上可以看到第一個(gè)Header太寬了，因?yàn)樗鼪](méi)有內(nèi)部 wrapper 相比第一個(gè)，第二個(gè)看起來(lái)好多了。所以，我們可以對(duì) HTML 進(jìn)行如下調(diào)整。

<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應(yīng)該移動(dòng)到.site-header__wrapper元素中。

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

使用 flex-wrap

當(dāng)屏幕很小的時(shí)候，可以水平滾動(dòng)。見(jiàn)下圖

如果沒(méi)有設(shè)置flex-wrap: wrap，當(dāng)屏幕過(guò)小的時(shí)候就會(huì)出現(xiàn)水平滾動(dòng)，如果不想這樣，可以加上 flex-wrap: wrap` ?。

Header 的多種形式

我喜歡使用flexbox的原因是它可以很容易地處理 header 設(shè)計(jì)的多種變化。基于前面的 header 設(shè)計(jì)，我擴(kuò)展了 header 元素的一些選項(xiàng)，如添加按鈕、搜索輸入和更改子項(xiàng)目的順序。

Header 變化 1

假設(shè)我想要在導(dǎo)航鏈接旁邊添加了一個(gè)按鈕。這應(yīng)該如何處理?我們應(yīng)該把它作為鏈接添加到導(dǎo)航欄中嗎?還是應(yīng)該和導(dǎo)航分開(kāi)?我更喜歡這樣做。

<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來(lái)處理間隙，相反，我會(huì)在 nav 元素上使用 margin-left: auto，

這樣，它就會(huì)自動(dòng)向右靠齊。

將導(dǎo)航和 track 按鈕分開(kāi)對(duì)于移動(dòng)設(shè)備非常有用，因?yàn)槲覀冃枰Ａ粼摪粹o并在其旁邊顯示一個(gè)移動(dòng)切換按鈕。

Header 變化 2

與第一個(gè)變化類似，這個(gè)變化增加了一個(gè)搜索輸入，占用了剩余的可用空間。對(duì)于flexbox，這可以通過(guò)使用flex屬性來(lái)實(shí)現(xiàn)。

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;
}

現(xiàn)在，搜索輸入將填充 brand 和nav 之間的可用空間。但是，這有一些限制。在較小的視口上，header 將如下所示:

搜索輸入寬度不應(yīng)小于此寬度，因?yàn)檫@樣很難輸入和查看全文。下面有兩種解決方案：

我更喜歡第二種解決方案，因?yàn)樗粫?huì)過(guò)早隱藏導(dǎo)航。一般來(lái)說(shuō)，如果元素不影響布局，我會(huì)盡量避免隱藏它。

Header 變化 3

對(duì)于這個(gè)示例，HTML標(biāo)記是相同的，但是 header 里的元素順序是不同的。我們?nèi)绾尾拍茏龅竭@一點(diǎn)? 你可能想到用 order 屬性來(lái)解決這個(gè)問(wèn)題 ?

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;
}

這樣有個(gè)問(wèn)題，間隔空間不會(huì)使 logo 居中，它只是分散項(xiàng)目之間的空間。

解決方案是給每個(gè)子項(xiàng)一個(gè)flex: 1，這將在它們之間分配可用空間。

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

這樣，由于flex: 1，按鈕元素變寬了，解決此問(wèn)題的唯一方法是將其包裹到另一個(gè)元素中。

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語(yǔ)言中的right */
}

但是，如果添加了更多導(dǎo)航鏈接，這種方法很容易失敗。我們需要確保導(dǎo)航鏈接的數(shù)量不會(huì)超過(guò)特定的限制。下面一個(gè)logo偏離中心的例子 ?:

正如在上圖中看到的，logo沒(méi)有居中。所以要記住這一點(diǎn)，以避免這種意想不到的問(wèn)題 ?。

使用 Flexbox 構(gòu)建 Header 的有用技巧

flex-basis

如果某個(gè)元素需要在移動(dòng)設(shè)備上占據(jù)整個(gè)寬度（不能隱藏的重要導(dǎo)航），我會(huì)使用flex-basis: 100% ?。

從上面的模型看，做起來(lái)可能很簡(jiǎn)單。實(shí)際上不是。通常，header 可能有一個(gè)內(nèi)部間距（padding），當(dāng)我們強(qiáng)制某項(xiàng)占據(jù)全部寬度時(shí)，除非清除padding ，否則它不會(huì)生效。但是，刪除padding不切實(shí)際，因?yàn)樗鼘⒂绊懺O(shè)計(jì)中的其他元素 ?。

下面解決此問(wèn)題的一種解決方法 ?：

將flex: 1 0 100%添加到導(dǎo)航元素。
如有需要，請(qǐng)更改其order。有時(shí)，可能還有其他元素，我們想確保導(dǎo)航是最后一個(gè)。
加上一個(gè)等于寬度等于 padding 的負(fù) margin，這也會(huì)讓導(dǎo)航占據(jù)整個(gè)寬度。
在導(dǎo)航中添加 padding，這會(huì)增加一些適當(dāng)?shù)目臻g。
最后，使用了justify-content: center將導(dǎo)航項(xiàng)居中（不重要）

.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屬性，現(xiàn)在在flex項(xiàng)目之間添加間距比以往任何時(shí)候都容易。考慮以下標(biāo)題

要做到上圖的高亮間距，只需將gap: 1rem添加到flex父節(jié)點(diǎn)。沒(méi)有了gap，我們還是需要用舊的方式來(lái)間隔 ?。

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

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

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

作者：Shadeed 譯者：前端小智來(lái)源：ishadeed

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

在線咨詢

上一篇：多媒體播放神器PotPlayer下載和使用
下一篇：html5頁(yè)面阻止遮罩層后頁(yè)面滾動(dòng)

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

如何在Java中使用Servlet設(shè)置HTTP響應(yīng)的Header

示例代碼

源碼解析

總結(jié)

本使用

遇到的坑：反向代理請(qǐng)求報(bào)錯(cuò)

add_header總結(jié)

簡(jiǎn)介

Flexbox

Header Wrapper

使用 flex-wrap

Header 的多種形式

Header 變化 1

Header 變化 2

Header 變化 3

使用 Flexbox 構(gòu)建 Header 的有用技巧

flex-basis

間距

您的項(xiàng)目需求