一、跨域、前后端分离
1.为了展示跨域问题，我们需要建立一个具有 web 功能的 java 项目，了解下面的创建步骤。
- ① 在
IntelliJ IDEA的工具栏File → New → Module - ② 选择 Java，然后啥都不选，
直接下一步
步骤②图示
-
③
输入项目名字 → 点 Finish 完成 -
④ 刚刚我们创建完成的项目，是一个普通的 Java 的项目，我们希望把它变成一个 web 项目。
选中项目 → 右键项目→ Add Frameworks Support → 勾选 Web Application
步骤④图示
- ⑤ 我们希望能在上述创建完成的项目中，编写 Servlet 的相关代码，才能处理网络请求。
选中项目 → 点击右上角的Project Structure → 选中 Dependencies → 选择+号 → 选择 Library
步骤⑤图示
- ⑥
选择 Library 中的 Tomcat
步骤⑥图示
-
⑦ 接下来我们要创建一个用于处理网络请求的 Servlet。
右键 src → New → Java Class → 输入类名字 com.lsp.UserServlet -
⑧
让 UserServlet 继承自 HttpServlet → @WebServlet("/users") 规定请求路径 → 敲出 doGet 和 doPost 方法
步骤⑧图示
- ⑨
创建一个普通 HTML 文件 → 如下图布置 Tomcat 配置
步骤⑨图示
- ⑩
选择 Deployment 进行项目配置 → 点击 run tomcat会自动打开index.html至此，配置完毕。✿✿ヽ(°▽°)ノ✿
步骤⑩图示
2. 简述上述的主要过程？（4 个主要过程）
- ① 创建普通
Java项目 - ② 让项目具有
Web功能 - ③ 让项目具有
Servlet功能 - ④ 在
Tomcat上跑起来
3. 继续完善上述项目 ①UserServlet 返回一个 Json 串; ②index.html 中使用ajax（异步请求）UserServlet 的数据
-
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">显示用户数据</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. 上述代码可以正常拿到数据，也没有出现跨域访问。但是在实际开发中，大部分情况下项目是 前后端分离的，这就导致前端服务器 != 后端服务器，接下来我们造一个前后端分离的项目。
前后端分离
- 分别启动客户端和服务端，我们会得到如下
跨域错误
跨域错误
5. 同源策略是谁的？什么是同源策略？
- 同源策略是：
浏览器的 - 它规定了
①默认情况下，AJAX 请求只能发给同源的 URL - 同源是指 3 个相同：
协议、域名（IP）、端口
同源策略
6. 被同源策略阻止的请求，这个请求有到达服务器吗？
- 有到达服务器，是从服务器返回数据之后，浏览器因为同源策略抛弃了。
7.说几个不受同源策略约束的标签？
img、audio、video、link、script、iframe、a
8. 一般情况解决同源是前端解决，还是后端解决？
- 基本上是从后端解决，当然前端也有一些解决跨域的办法，但是主流还是从后端解决。
9. 跨域判断：主要看请求头的哪个参数和相应头哪个参数？
- 请求头的哪个参数：
Origin发起来一个针对跨域资源共享的请求 - 响应头的哪个参数：
Access-Control-Allow-Origin可以指定哪些网站可参与到跨来源资源共享过程中
10. 服务端如何解决跨域访问？
// 服务端设置CORS（允许别人能够跨域访问）
response.setHeader("Access-Control-Allow-Origin", "http://localhost:63342");
跨域访问
二、Cookie Session
1. 一般情况下，我们登录一个（需要登录的）网站的过程如下
image.png
- 这三次请求是独立的，所以
Http也叫做无状态请求。
2.如果要做到服务器能知道该用户是否登录过，从而做判断，应该怎么办？
- ①给客户端一个 token
- ②cookie 和 session 的方案
3. 什么是 Cookie？什么是 Session？（从存在哪里，谁能控制两个方面回答）
-
Cookie :存在浏览器端，可以由服务端可以返回 Cookie 交给客户端去存 -
Session :存储在服务端，由服务端自己控制
4. 使用 cookie 和 session 技术标识用户状态的流程
image.png
- cookie 和 session 是用来做会话跟踪，可以让多个独立的请求之间，建立起联系
5.简述下面代码做了哪三件事情？
HttpSession session = request.getSession();
session.setAttribute("username", username);
session.setAttribute("password", password);
- ①获取 Session 对象（如果没有会创建）
- ②设置 Session 对象的里面的 username 和 password
- ③在服务端给浏览器的返回头中，会自动带上
response.setHeader("Set-Cookie", "JESESSIONID=666")
6. 默认情况下 Cookie 存在的时间？
- 我们可以给 Cookie 设置过期时间，比如一周。
- 但是默认情况下，浏览器关闭， Cookie就消失了。
网友评论