概要
Nginx 反向代理
是一种网络服务器配置,它接收来自客户端的请求,并将这些请求转发到其他服务器上,然后将从后端服务器收到的响应返回给客户端。这个过程中,客户端不知道自己实际上是在与后端服务器通信,而不是直接与 Nginx 通信。这种方式可以隐藏后端服务器的真实IP地址
,隐藏后端服务器的真实IP地址可以增加服务器的安全性,降低被攻击的风险,并且增加攻击者获取服务器信息的难度。
Nginx作用
反向代理
:(见上面描述)
负载均衡
:Nginx可以将请求分发到多个后端服务器,以平衡服务器的负载,确保高并发下的稳定性和可靠性。
静态文件服务
:Nginx可以直接提供静态文件(如HTML、CSS、JavaScript、图像等)的访问,减轻动态应用服务器的负担。
防盗链
:Nginx可以限制外部网站对资源的直接访问,防止资源被盗链。
解决跨域问题
:Nginx可以配置跨域资源共享(CORS),使不同域名之间的通信更加灵活。
缓存
:Nginx可以缓存静态资源,提高访问速度。
限流
:Nginx可以限制每秒请求数量,防止恶意请求导致服务器过载。
动静资源分离
:Nginx可以将动态请求和静态资源请求分开处理,提高性能。
前端项目部署到Nginx中
前端项目的打包文件可以放在 Nginx 中进行静态文件服务。通常情况下,前端项目会被打包成静态文件,然后将这些文件部署到 Nginx 服务器上,让 Nginx 直接提供静态文件的访问服务。
在前端项目中,通常会包含与后端服务器进行数据交互的请求
。这些请求可能会经过 Nginx 服务器,然后被转发给后端服务器处理。这种设置可以通过 Nginx 的反向代理功能实现,使得 Nginx 充当前端项目和后端服务器之间的中间层
安装Nginx | 启动Nginx
网上有许多关于安装 Nginx 的教程,自己去找一份。
启动Nginx命令:
Nginx反向代理
worker_processes 1; # 设置工作进程数,这里只使用一个工作进程。
events {
worker_connections 1024; # 定义每个工作进程的最大连接数。
}
http {
include mime.types; # 包含MIME类型的配置文件。
default_type application/octet-stream; # 设置响应的默认MIME类型。
sendfile on; # 开启 sendfile 功能,用于高效传输文件
keepalive_timeout 65; # 客户端与服务器之间的连接保持时间
server {
listen 82; # 在82端口上监听连接。
server_name localhost; # 服务器名称
# 后面详细讲解这个
location /api/ {
proxy_pass http://localhost:8011/api/;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
}
讲解一下配置文件中的重要的地方
重点一:
listen 82;
当你在本地电脑安装了 Nginx,并将静态资源(比如 index.html 文件)放置在 Nginx 软件的安装目录下的 html 文件夹中。通过在浏览器中访问该 Nginx 监听的端口,你就可以访问到你的 HTML 页面【通过访问http://localhost:82/index.html
】
重点二:(最重要)
注意:一个server块中可以有多个
location
location /api/ {
proxy_pass http://localhost:8011/api/;
}
假设前端发送了请求 http://localhost:8011/api/user,Nginx 的 location /api/
规则会拦截这个请求,因为它匹配了以 /api/ 开头的请求路径。当 Nginx 的 location /api/ 规则匹配到请求 http://localhost:8011/api/user 后,Nginx 会从请求路径中去掉匹配到的部分,也就是去掉 /api/,然后将剩余的部分 user 传递给后端服务器,即将user拼接到proxy_pass后面 。
图1
图2
易错:(可以自己模拟一下,拼接有无错误)
例子
准备一个前端资源test.html【向后端取数据】
<!DOCTYPE html>
<html lang="en">
<head>
<!--将 Vue.js 库引入到你的 HTML 页面中-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!--引入这个库 可以快速发送请求-->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<meta charset="UTF-8" />
<title>vue</title>
</head>
<body>
<div id="app">
<button @click="getValues">点击获取数据</button>
<table>
<tr>
<th>username</th>
<th>age</th>
</tr>
<tr v-for="user in users">
<td>{{user.name}}</td>
<!--因为后端传过来的是name 所以不能用user.username取-->
<td>{{user.age}}</td>
</tr>
</table>
</div>
</body>
<script>
new Vue({
el: "#app",
data: {
users: [],
},
methods: {
// 发送get请求
getValues() {
axios
.get("/api/user")
.then((res) => {
this.users = res.data;
})
.catch((err) => {
console.log(err);
});
},
},
});
</script>
</html>
后端代码:
// pojo
@Data
@AllArgsConstructor
public class User {
private String name;
private int age;
}
// Controller层
@RestController
@RequestMapping(value = "/api")
public class TestController {
@GetMapping(value = "/user")
public ArrayList<User> getValue() {
ArrayList<User> users = new ArrayList<>();
for (int i = 1; i <= 5; i++) {
User user = new User("name" + i, 20 + i);
users.add(user);
}
return users;
}
}
可能会遇到跨域请求错误
跨域是什么?
跨域(Cross-Origin)
指的是在 Web 应用中,当一个页面的源(协议、域名、端口号【三个有一个不同就是跨域】)与另一个页面的源不同时,就会发生跨域。
遇到跨域错误,这是因为浏览器的同源策略限制导致的 CORS(跨源资源共享)问题。浏览器默认情况下会阻止从一个源(域名、协议、端口号)向另一个源发起的跨域请求,除非服务器明确允许这样的请求。
要解决这个问题,你可以在后端 Spring Boot 服务的响应中添加 CORS 头部,允许来自前端应用的跨域请求
在 Spring Boot 项目中写一个配置类(一定要加注解@Configuration
):
@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("http://localhost:5173") // 允许的源,这里需要根据你的前端应用地址来设置
.allowedMethods("GET", "POST", "PUT", "DELETE") // 允许的 HTTP 方法
.allowedHeaders("*"); // 允许的请求头
}
}
结果:
当你请求 http://localhost:82/api/user 时,Nginx 将它转发到 http://localhost:8011/api/user
谢谢点赞。欢迎指点~~~