介紹
在前後端分離的開發場景下，不可避免的會有前後端聯調。在聯調階段，經常會遇到各式各樣的問題，比如亂碼問題、前端傳的資料（字串、陣列、Json物件）後端無法正常解析等問題。
本文希望從源頭著手，理清問題的根本原因，快速定位出現問題的位置，讓前後端聯調得心應手,讓甩鍋不再那麼容易......
HTTP協議
之所以這裡會介紹一下HTTP協議，是因為前後端聯調離不開HTTP。瞭解了HTTP協議，有助於更好的理解資料傳輸的流程，以及更好的分析出到底是在哪個環節出了問題，方便排查。
1. 簡介
首先，http是一個無狀態的協議，即每次客戶端和服務端互動都是無狀態的，通常使用cookie來保持狀態。
下圖為http請求與響應的大致結構（本部分配圖均來自於《HTTP權威指南》）：
說明：
從上圖中可以看出，HTTP請求大致分為三個部分：起始行、首部、主體。在請求起始行裡，表面了請求方法、請求地址以及http協議的版本。另外，首部即是我們常說的http header。
2. HTTP method
下面是常用的HTTP請求方法以及介紹：
說明：
- 我們常用的一般為get於post。
- 是否包含主體的意思為請求內容是否帶主體。例如，在get方式下由於不帶主體，只能使用url的方式傳參。
3. Content-type
HTTP傳輸的內容型別與編碼是由Content-Type來控制的，客戶端與服務端通過它來識別與解析傳輸內容。
常見的Content-Type：
| 型別 | 說明 |
|---|---|
| text/html | html型別 |
| text/css | css檔案 |
| text/javascript | js檔案 |
| text/plain | 文字檔案 |
| application/json | json型別 |
| application/xml | xml型別 |
| application/x-www-form-urlencoded | 表單，表單提交時的預設型別 |
| multipart/form-data | 附件型別，一般為表單檔案上傳 |
前面六個為常見的檔案型別，後面兩個為表單資料提交時型別。我們ajax提交資料時一般為Content-Type:application/x-www-form-urlencoded;charset=utf-8,以此宣告瞭本次請求的資料格式與資料編碼方式。需要額外說明的是，application/x-www-form-urlencoded此種型別比較特殊，資料傳送時會把表單資料拼接成類似於a=1&b=2&c=3的格式，如果資料中存在空格或特殊字元，會進行轉換，標準文件在這裡，更詳細的在[RFC1738]可見。
相關資料：
- Content-type對照表：tool.oschina.net/commons
- Form content types：www.w3.org/TR/html4/in…
- 字元解碼時加號解碼為空格問題探究：muchstudy.com/2017/12/06/…
- 理解HTTP之Content-Type：homeway.me/2015/07/19/…
4. 字符集與編碼
前後端聯調之所以需要了解這部分，是因為在前後端的資料互動中，經常會碰到亂碼的問題，瞭解了這塊內容，對於解決亂碼問題就手到擒來了。
一圖勝千言：
在圖中，charset的值為iso-8859-6，詳細介紹了一個文字從編碼到解碼，再到顯示的完整過程。
相關資料：
- 字符集列表：www.iana.org/assignments…
- 字元編碼詳解:muchstudy.com/2016/08/26/…
前端部分
前端部分負責發起HTTP請求，前端常用的HTTP請求工具類有jquery、axios、fetch。實際上jquery與axios的底層都是使用XMLHttpRequest來發起http請求的，fetch屬於瀏覽器內建的發起http請求方法。
前端ajax請求樣例：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qs/6.5.1/qs.min.js"></script>
<title>前端發起HTTP請求樣例</title>
</head>
<body>
<h2>使用XMLHttpRequest</h2>
<button onclick="xhrGet()">XHR Get</button>
<button onclick="xhrPost()">XHR Post</button>
<h2>使用axios</h2>
<button onclick="axiosGet()">Axios Get</button>
<button onclick="axiosPost()">Axios Post</button>
<h2>使用fetch</h2>
<button onclick="fetchGet()">Fetch Get</button>
<button onclick="fetchPost()">Fetch Post</button>
<script>
// 封裝XMLHttpRequest發起ajax請求
let Axios = function({url, method, data}) {
return new Promise((resolve, reject) => {
var xhr = new XMLHttpRequest();
xhr.open(method, url, true);
xhr.onreadystatechange = function() {
// readyState == 4說明請求已完成
if (xhr.readyState == 4 && xhr.status == 200) {
// 從伺服器獲得資料
resolve(xhr.responseText)
}
};
if(data){
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded;charset=utf-8');
xhr.send(Qs.stringify(data));
//xhr.send("a=1&b=2");
//xhr.send(JSON.stringify(data));
}else{
xhr.send();
}
})
}
// 需要post提交的資料
let postData = {
firstName: 'Fred',
lastName: 'Flintstone',
fullName: '姓 名',
arr:[1,2,3]
}
// 請求地址
let url = 'DemoServlet';
function xhrGet(){
Axios({
url: url+'?a=1',
method: 'GET'
}).then(function (response) {
console.log(response);
})
}
function xhrPost(){
Axios({
url: url,
method: 'POST',
data: postData
}).then(function (response) {
console.log(response);
})
}
function axiosGet(){
// 預設Content-Type = null
axios.get(url, {
params: {
ID: '12345'
}
}).then(function (response) {
console.log(response);
}).catch(function (error) {
console.log(error);
});
}
function axiosPost(){
// 預設Content-Type = application/json;charset=UTF-8
axios.post(url, postData).then(function (response) {
console.log(response);
}).catch(function (error) {
console.log(error);
});
// 預設Content-Type = application/x-www-form-urlencoded
axios({
method: 'post',
url: url,
data: Qs.stringify(postData)
}).then(function (response) {
console.log(response);
});
}
function fetchGet(){
fetch(url+'?id=1').then(res => res.text()).then(data => {
console.log(data)
})
}
function fetchPost(){
fetch(url, {
method: 'post',
body: postData
})
.then(res => res.text())
.then(function (data) {
console.log(data);
})
.catch(function (error) {
console.log('Request failed', error);
});
}
</script>
</body>
</html>
複製程式碼相關資料:
- XMLHttpRequest Standard：xhr.spec.whatwg.org/
- Fetch Standard：fetch.spec.whatwg.org/
- XMLHttpRequest介紹：developer.mozilla.org/zh-CN/docs/…
- fetch介紹：developers.google.com/web/updates…
- fetch 簡介: 新一代 Ajax API： juejin.im/entry/57451…
- axios原始碼：github.com/axios/axios
後端部分
這裡使用Java平臺為樣例來介紹後端是如何接收HTTP請求的。在J2EE體系下，資料的接收與返回實際上都是通過Servlet來完成的。
Servlet接收與返回資料樣例：
package com.demo.servlet;
import java.io.BufferedReader;
import java.io.IOException;
import java.util.Enumeration;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class DemoServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public DemoServlet() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
System.out.println("-----------------start----------------");
System.out.println("Content-Type:" + request.getContentType());
// 列印請求引數
System.out.println("=========請求引數========");
Enumeration<String> em = request.getParameterNames();
while (em.hasMoreElements()) {
String name = (String) em.nextElement();
String value = request.getParameter(name);
System.out.println(name + " = " + value);
response.getWriter().append(name + " = " + value);
}
// 從inputStream中獲取
System.out.println("===========inputStream===========");
StringBuffer sb = new StringBuffer();
String line = null;
try {
BufferedReader reader = request.getReader();
while ((line = reader.readLine()) != null)
sb.append(line);
} catch (Exception e) {
/* report an error */
}
System.out.println(sb.toString());
System.out.println("-----------------end----------------");
response.getWriter().append(sb.toString());
}
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
}
複製程式碼相關資料：
- servlet的本質是什麼，它是如何工作的？：www.zhihu.com/question/21…
- tomcat是如何處理http請求的？：blog.csdn.net/qq_38182963…
結果彙總
| 請求方式 | method | 請求Content-Type | 資料格式 | 後端收到的Content-Type | 能否通過getParameter獲取資料 | 能否通過inputStream獲取資料 | 後端接收型別 |
|---|---|---|---|---|---|---|---|
| XHR | Get | 未設定 | url傳參 | null | 能 | 否 | 鍵值對 |
| XHR | Post | 未設定 | json字串 | text/plain;charset=UTF-8 | 否 | 能 | 字串 |
| XHR | Post | 未設定 | a=1&b=2格式字串 | text/plain;charset=UTF-8 | 否 | 能 | 字串 |
| XHR | Post | application/x-www-form-urlencoded | a=1&b=2格式字串 | application/x-www-form-urlencoded | 能 | 否 | 後端收到key為a和b，值為1和2的鍵值對 |
| XHR | Post | application/x-www-form-urlencoded | json字串 | application/x-www-form-urlencoded | 能 | 否 | 後端收到一個key為json資料，值為空的鍵值對 |
| axios | Get | 未設定 | url傳參 | null | 能 | 否 | 鍵值對 |
| axios | Post | 未設定 | json物件 | application/json;charset=UTF-8 | 否 | 能 | json字串 |
| axios | Post | 未設定 | 陣列 | application/json;charset=UTF-8 | 否 | 能 | 陣列字串 |
| axios | Post | 未設定 | a=1&b=2格式字串 | application/x-www-form-urlencoded | 能 | 否 | 鍵值對 |
| fetch | Get | 未設定 | url傳參 | null | 能 | 否 | 鍵值對 |
| fetch | Post | 未設定 | a=1&b=2格式字串 | text/plain;charset=UTF-8 | 否 | 能 | a=1&b=2字串 |
| fetch | Post | 未設定 | json物件 | text/plain;charset=UTF-8 | 否 | 能 | 後端收到[object Object]字串 |
| fetch | Post | application/x-www-form-urlencoded;charset=UTF-8 | a=1&b=2格式字串 | application/x-www-form-urlencoded;charset=UTF-8 | 能 | 否 | 鍵值對 |
通過上面的表格內容可以發現，凡是使用get或者content-type為application/x-www-form-urlencoded傳送資料，在後端servlet都會預設把資料轉換為鍵值對。否則，需要從輸入流中獲取前端傳送過來的字串資料，再使用fastJSON等後端工具類轉換為Java實體類或集合物件。
聯調工具Postman
可以在chrome的應用商店中下載Postman外掛，在瀏覽器中模擬HTTP請求。Postman的介面如下：
說明：
- 傳送get請求直接在url上帶上引數，接著點選send即可
- 傳送post請求，資料有三種傳輸方式；
form-data、x-www-form-urlencoded、raw（未經加工的）
| 型別 | Content-Type | 說明 |
|---|---|---|
| form-data | Content-Type: multipart/form-data | form表單的附件提交方式 |
| x-www-form-urlencoded | Content-Type: application/x-www-form-urlencoded | form表單的post提交方式 |
| raw | Content-Type: text/plain;charset=UTF-8 | 文字的提交方式 |
原文地址：HTTP協議與前後端聯調