一粗仓、跨域、前后端分離
1.為了展示跨域問題，我們需要建立一個具有 web 功能的 java 項目借浊，了解下面的創(chuàng)建步驟塘淑。
- ① 在
IntelliJ IDEA的工具欄File → New → Module - ② 選擇 Java，然后啥都不選蚂斤，
直接下一步
步驟②圖示
③
輸入項目名字 → 點 Finish 完成④ 剛剛我們創(chuàng)建完成的項目存捺，是一個普通的 Java 的項目，我們希望把它變成一個 web 項目曙蒸。
選中項目 → 右鍵項目→ Add Frameworks Support → 勾選 Web Application
步驟④圖示
- ⑤ 我們希望能在上述創(chuàng)建完成的項目中捌治，編寫 Servlet 的相關(guān)代碼，才能處理網(wǎng)絡請求纽窟。
選中項目 → 點擊右上角的Project Structure → 選中 Dependencies → 選擇+號 → 選擇 Library
步驟⑤圖示
- ⑥
選擇 Library 中的 Tomcat
步驟⑥圖示
⑦ 接下來我們要創(chuàng)建一個用于處理網(wǎng)絡請求的 Servlet肖油。
右鍵 src → New → Java Class → 輸入類名字 com.lsp.UserServlet⑧
讓 UserServlet 繼承自 HttpServlet → @WebServlet("/users") 規(guī)定請求路徑 → 敲出 doGet 和 doPost 方法
步驟⑧圖示
- ⑨
創(chuàng)建一個普通 HTML 文件 → 如下圖布置 Tomcat 配置
步驟⑨圖示
- ⑩
選擇 Deployment 進行項目配置 → 點擊 run tomcat會自動打開index.html至此，配置完畢师倔。??ヽ(°▽°)ノ?
步驟⑩圖示
2. 簡述上述的主要過程？（4 個主要過程）
- ① 創(chuàng)建普通
Java項目 - ② 讓項目具有
Web功能 - ③ 讓項目具有
Servlet功能 - ④ 在
Tomcat上跑起來
3. 繼續(xù)完善上述項目 ①UserServlet 返回一個 Json 串; ②index.html 中使用ajax（異步請求）UserServlet 的數(shù)據(jù)
-
UserServlet.java中doPost的代碼
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("application/json; charset=UTF-8");
StringBuilder sb = new StringBuilder();
/*
[
{"name": "lsp1", "age": "11"},
{"name": "lsp2", "age": "12"},
{"name": "lsp3", "age": "13"},
{"name": "lsp4", "age": "14"}
]
*/
sb.append("[");
sb.append("{\"name\": \"lsp1\", \"age\": \"11\"},");
sb.append("{\"name\": \"lsp2\", \"age\": \"12\"},");
sb.append("{\"name\": \"lsp3\", \"age\": \"13\"},");
sb.append("{\"name\": \"lsp4\", \"age\": \"14\"}");
sb.append("]");
response.getWriter().write(sb.toString());
}
-
index.html中body的代碼
<body>
<button id="load-btn">顯示用戶數(shù)據(jù)</button>
<table>
<tr>
<th>用戶名</th>
<th>年齡</th>
</tr>
</table>
<script src="js/jquery.min.js"></script>
<script>
$('#load-btn').click(() => {
// AJAX請求（異步請求）
$.getJSON('http://localhost:8080/cors/users', (users) => {
const $table = $('table')
for (const user of users) {
const $tr = $('<tr>')
$tr.append($(`<td>${user.name}</td>`))
$tr.append($(`<td>${user.age}</td>`))
$table.append($tr)
}
})
})
</script>
</body>
- 運行項目周蹭，我們能得到如下效果
運行效果圖
4. 上述代碼可以正常拿到數(shù)據(jù)趋艘，也沒有出現(xiàn)跨域訪問。但是在實際開發(fā)中凶朗，大部分情況下項目是 前后端分離的瓷胧，這就導致前端服務器 != 后端服務器，接下來我們造一個前后端分離的項目棚愤。
前后端分離
- 分別啟動客戶端和服務端搓萧，我們會得到如下
跨域錯誤
跨域錯誤
5. 同源策略是誰的？什么是同源策略宛畦？
- 同源策略是：
瀏覽器的 - 它規(guī)定了
①默認情況下瘸洛，AJAX 請求只能發(fā)給同源的 URL - 同源是指 3 個相同：
協(xié)議、域名（IP）次和、端口
同源策略
6. 被同源策略阻止的請求反肋，這個請求有到達服務器嗎？
- 有到達服務器踏施，是從服務器返回數(shù)據(jù)之后石蔗，瀏覽器因為同源策略拋棄了。
7.說幾個不受同源策略約束的標簽畅形？
img养距、audio、video日熬、link棍厌、script、iframe、a
8. 一般情況解決同源是前端解決定铜，還是后端解決阳液？
- 基本上是從后端解決，當然前端也有一些解決跨域的辦法揣炕，但是主流還是從后端解決帘皿。
9. 跨域判斷：主要看請求頭的哪個參數(shù)和相應頭哪個參數(shù)？
- 請求頭的哪個參數(shù)：
Origin發(fā)起來一個針對跨域資源共享的請求 - 響應頭的哪個參數(shù)：
Access-Control-Allow-Origin可以指定哪些網(wǎng)站可參與到跨來源資源共享過程中
10. 服務端如何解決跨域訪問畸陡？
// 服務端設置CORS（允許別人能夠跨域訪問）
response.setHeader("Access-Control-Allow-Origin", "http://localhost:63342");
跨域訪問
二鹰溜、Cookie Session
1. 一般情況下，我們登錄一個（需要登錄的）網(wǎng)站的過程如下
image.png
- 這三次請求是獨立的丁恭，所以
Http也叫做無狀態(tài)請求曹动。
2.如果要做到服務器能知道該用戶是否登錄過，從而做判斷牲览，應該怎么辦墓陈？
- ①給客戶端一個 token
- ②cookie 和 session 的方案
3. 什么是 Cookie？什么是 Session第献？（從存在哪里贡必，誰能控制兩個方面回答）
-
Cookie :存在瀏覽器端，可以由服務端可以返回 Cookie 交給客戶端去存 -
Session :存儲在服務端庸毫，由服務端自己控制
4. 使用 cookie 和 session 技術(shù)標識用戶狀態(tài)的流程
image.png
- cookie 和 session 是用來做會話跟蹤仔拟，可以讓多個獨立的請求之間，建立起聯(lián)系
5.簡述下面代碼做了哪三件事情飒赃？
HttpSession session = request.getSession();
session.setAttribute("username", username);
session.setAttribute("password", password);
- ①獲取 Session 對象（如果沒有會創(chuàng)建）
- ②設置 Session 對象的里面的 username 和 password
- ③在服務端給瀏覽器的返回頭中利花，會自動帶上
response.setHeader("Set-Cookie", "JESESSIONID=666")
6. 默認情況下 Cookie 存在的時間？
- 我們可以給 Cookie 設置過期時間载佳，比如一周炒事。
- 但是默認情況下，瀏覽器關(guān)閉蔫慧， Cookie就消失了羡洛。
