Nginx反向代理

一口酥Hac

已于 2024-04-29 11:35:06 修改

阅读量1.8k

点赞数 39

分类专栏： java 前端文章标签： nginx 运维

于 2024-04-28 19:40:53 首次发布

本文链接：https://blog.csdn.net/m0_64289188/article/details/138287257

版权

java 同时被 2 个专栏收录

33 篇文章 0 订阅

订阅专栏

前端

3 篇文章 0 订阅

订阅专栏

文章目录

概要

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

谢谢点赞。欢迎指点~~~

一口酥Hac

关注

39
点赞
踩
30

收藏

觉得还不错? 一键收藏
1
评论
Nginx反向代理

当 Nginx 的 location /api/ 规则匹配到请求 http://localhost:8011/api/user 后，Nginx 会从请求路径中去掉匹配到的部分，也就是去掉 /api/，然后将剩余的部分 /user 传递给后端服务器，即将/user拼接到proxy_pass。通常情况下，前端项目会被打包成静态文件（如 HTML、CSS、JavaScript、图像等），然后将这些文件部署到 Nginx 服务器上，让 Nginx 直接提供静态文件的访问服务。
复制链接

扫一扫

专栏目录