Nginx发布Vue（ElementPlus），与.NETCore对接（腾讯云）

案例资料链接：https://download.csdn.net/download/ly1h1/90745660

1.逻辑说明

1.1 逻辑示意图

# 前端请求处理逻辑图浏览器请求流程:
1. 浏览器发起请求├─ 开发环境(DEV)│  ├─ 请求URL: http://192.168.0.102:3000/api/xxx│  └─ 被Vite代理处理└─ 生产环境├─ 请求URL: /api/xxx└─ 被Nginx处理Vite代理处理(开发环境):
1. 接收 /api 开头的请求
2. 转发到 target: http://43.162.118.209:7127
3. 保留原始 /api 前缀
4. 添加 changeOrigin 和 secure:false 配置Nginx处理(生产环境):
1. 监听 8061 端口
2. 路由匹配:├─ / → 静态资源│  ├─ root: C:/nginx/dist3│  └─ 返回 index.html└─ /api → 反向代理├─ 转发到 http://43.162.118.209:7127├─ 设置 Host 头└─ 添加CORS头:├─ Access-Control-Allow-Origin: http://43.162.118.209:8061└─ Access-Control-Allow-Methods: GET,POST,OPTIONS后端服务:
1. 运行在 http://43.162.118.209:7127
2. 接收来自:├─ 开发环境: Vite代理的请求└─ 生产环境: Nginx代理的请求

1.2 时序图

1.3 架构拓扑图

2.前端

2.1 vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'export default defineConfig({plugins: [vue()],server: {host: '192.168.0.102', // 允许通过IP访问port: 3000,            // 默认端口（可自定义）proxy: {'/api': {target: 'http://43.162.118.209:7127',changeOrigin: true,secure: false,rewrite: (path) => path.replace(/^\/api/, '/api') // 关键修改：保留/api前缀}}}
})

host：是前端开发环境下的启动地址

port：是前端开发环境下的启动端口

proxy：属于用来做跨域转换的

2.2 request.js(接口请求的方法，独立出来了)

import axios from 'axios'
import { ElMessage } from 'element-plus'const service = axios.create({baseURL: import.meta.env.DEV? 'http://192.168.0.102:3000/api'  // 开发环境走Vite代理: '/api',                          // 生产环境走Nginx代理timeout: 10000
})// 请求拦截器
service.interceptors.request.use(config => {// 可在此添加token等全局headers// const token = localStorage.getItem('token')// if (token) config.headers.Authorization = `Bearer ${token}`return config},error => {console.error('Request Error:', error)return Promise.reject(error)}
)// 响应拦截器
service.interceptors.response.use(response => {// 根据后端数据结构调整const res = response.dataif (res.code && res.code !== 200) {ElMessage.error(res.message || '请求失败')return Promise.reject(res)}return res},error => {console.error('Response Error:', error)ElMessage.error(error.message || '服务异常')return Promise.reject(error)}
)/*** 封装GET请求* @param {string} url * @param {object} params * @returns */
export function get(url, params = {}) {return service({ url, method: 'GET', params })
}/*** 封装POST请求* @param {string} url * @param {object} data * @returns */
export function post(url, data = {}) {return service({ url, method: 'POST', data })
}export function getValues() {return service.get('/Values') // 明确使用GET
}export default service

重点讲解

const service = axios.create({baseURL: import.meta.env.DEV? 'http://192.168.0.102:3000/api'  // 开发环境走Vite代理: '/api',                          // 生产环境走Nginx代理timeout: 10000
})

这段代码创建了一个配置化的 Axios 实例，主要实现了：

  • 环境区分：通过 import.meta.env.DEV 判断当前是开发环境还是生产环境

  • 动态 baseURL：

    • 开发环境：http://192.168.0.102:3000/api

    • 生产环境：/api（对接前面vite.config.js的配置）

  • 全局超时设置：10秒（timeout: 10000）

2.3 App.Vue

实现业务应用，接口请求获取数据，呈现在el-table控件

<template><div><el-button type="primary" @click="fetchData">获取API数据</el-button><el-table :data="tableData" v-loading="loading"><el-table-column prop="aaa" label="AAA" /><el-table-column prop="baa" label="BAA" /><el-table-column prop="caa" label="CAA" /><el-table-column prop="daa" label="DAA" /></el-table></div>
</template><script>import { get } from './api/request'export default {data() {return {tableData: [],loading: false}},methods: {async fetchData() {try {this.loading = trueconst response = await get('/Values')  // 使用封装的get方法this.tableData = response.data || response  // 根据实际返回结构调整} catch (error) {console.error('获取数据失败:', error)} finally {this.loading = false}}}
}
</script>

3.后端

3.1 Program.cs

using Microsoft.Extensions.Options;var builder = WebApplication.CreateBuilder(args);// 添加必要服务（修正版）
builder.Services.AddControllers();// 正确配置Swagger（需要先安装NuGet包）
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen(c =>
{c.SwaggerDoc("v1", new() { Title = "My API", Version = "v1" });
});// 配置CORS
builder.Services.AddCors(options =>
{options.AddPolicy("VueFrontend", policy =>{policy.AllowAnyOrigin().AllowAnyHeader().AllowAnyMethod();});
});var app = builder.Build();// 中间件顺序非常重要！
app.UseRouting();
app.UseCors("VueFrontend");// 开发环境配置
if (app.Environment.IsDevelopment())
{app.UseSwagger();app.UseSwaggerUI(c =>{c.SwaggerEndpoint("/swagger/v1/swagger.json", "My API V1");});
}app.UseAuthorization();
app.MapControllers();app.Run("http://0.0.0.0:7127");

是一个典型的 ASP.NET Core Web API 的启动配置，主要包含以下核心功能：

1. 基础服务配置

  • AddControllers()：启用 MVC 控制器，用于处理 HTTP 请求（REST API）。

  • AddEndpointsApiExplorer() + AddSwaggerGen()：集成 Swagger/OpenAPI，自动生成 API 文档（需安装 Swashbuckle.AspNetCore NuGet 包）。

    • 访问方式（开发环境）：/swagger 或 /swagger/v1/swagger.json。

2. CORS（跨域资源共享）配置

  • AddCors() 定义了一个名为 "VueFrontend" 的策略，允许：

    • 任意来源（AllowAnyOrigin）

    • 任意 HTTP 方法（AllowAnyMethod）

    • 任意请求头（AllowAnyHeader）

  • UseCors("VueFrontend") 启用该策略，确保前端（如 Vue.js/React）可以跨域访问 API。

3. 中间件（Middleware）顺序

ASP.NET Core 的中间件顺序非常重要，此代码按推荐顺序配置：

  1. UseRouting()：路由匹配。

  2. UseCors()：必须在路由之后、授权之前启用 CORS。

  3. UseAuthorization()：身份认证（如 JWT）。

  4. MapControllers()：映射控制器路由。

4. 开发环境优化

  • UseSwagger() + UseSwaggerUI()：仅在开发环境启用 Swagger，方便调试 API。

5. 自定义运行地址

  • app.Run("http://0.0.0.0:7127")：

    • 监听所有网络接口（0.0.0.0），而不仅仅是 localhost。

    • 端口 7127，可通过 builder.Configuration 或环境变量动态配置。

3.2 接口代码

ValuesController.cs

using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using System.Collections.Generic;namespace WebApplication9.Controllers
{[Route("api/[controller]")][ApiController]public class ValuesController : ControllerBase{[HttpGet]public List<ClassModel> Get() {List < ClassModel > classes = new List<ClassModel> ();for (int A = 0; A < 5; A++){ClassModel classModel = new ClassModel(){AAA = "a" + A.ToString(),BAA = "b" + A.ToString(),CAA = "c" + A.ToString(),DAA = "d" + A.ToString(),};classes.Add(classModel);}return classes;}}
}
-----------------------------
namespace WebApplication9
{public class ClassModel{public string AAA {  get; set; }public string BAA { get; set; }public string CAA { get; set; }public string DAA { get; set; }}
}

4.Nginx配置

4.1 Nginx.conf

worker_processes  1;events {worker_connections  1024;
}http {include       mime.types;default_type  application/octet-stream;server {listen       8061;server_name  43.162.118.209;location / {root C:/nginx/dist3;try_files $uri $uri/ /index.html;}location /api {# proxy_pass http://localhost:7127/api;#proxy_set_header Host $host;#proxy_set_header X-Real-IP $remote_addr;# proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;# proxy_cookie_flags ~ secure samesite=none;proxy_pass http://43.162.118.209:7127;proxy_set_header Host $host;# CORS头（与后端保持一致）add_header 'Access-Control-Allow-Origin' 'http://43.162.118.209:8061';add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS';}}
}

1. 核心配置概述

  • 工作进程：worker_processes 1;

    • 仅启用 1 个 Worker 进程，适合低负载场景，生产环境建议设为 CPU 核心数。

  • 事件模块：worker_connections 1024;

    • 每个 Worker 进程支持 1024 个并发连接。

2. HTTP 服务配置

全局配置

  • include mime.types;

    • 引入 MIME 类型文件，用于正确识别文件类型（如 .html、.js）。

  • default_type application/octet-stream;

    • 默认响应类型为二进制流（若未匹配到 MIME 类型）。

Server 块

  • 监听端口：8061，绑定到 IP 43.162.118.209。

  • 静态资源服务：

    nginx

    复制

    下载

    location / {root C:/nginx/dist3;try_files $uri $uri/ /index.html;
}

    • 根目录：C:/nginx/dist3（前端项目部署路径）。

    • 路由回退：try_files 确保前端路由（如 Vue/React）直接访问子路径时返回 index.html，避免 404。

API 代理配置

nginx

复制

下载

location /api {proxy_pass http://43.162.118.209:7127;proxy_set_header Host $host;add_header 'Access-Control-Allow-Origin' 'http://43.162.118.209:8061';add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS';
}

  • 反向代理：将 /api 请求转发到后端服务 http://43.162.118.209:7127。

  • 请求头设置：

    • Host 头传递客户端原始域名。

  • CORS 支持：

    • 允许来自 http://43.162.118.209:8061 的跨域请求，仅开放 GET/POST/OPTIONS 方法。

5.配置安全组和入站规则

6.运行效果

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/bicheng/79490.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

解析机器人 2.0.2 | 支持超过50种短视频平台的链接解析，无水印提取，多功能下载工具

解析机器人 2.0.2 | 支持超过50种短视频平台的链接解析，无水印提取，多功能下载工具

解析机器人是一款功能强大的工具软件&#xff0c;登录即可解锁会员特权。它支持超过50种短视频平台的链接解析&#xff0c;包括抖音、快手、西瓜、bilibili等&#xff0c;并能实现无水印提取。此外&#xff0c;还提供P2P下载、磁力链等多种下载方式&#xff0c;确保用户能够快速…
阅读更多...
C++ - 数据容器之 forward_list（创建与初始化、元素访问、容量判断、元素遍历、添加元素、删除元素）

C++ - 数据容器之 forward_list（创建与初始化、元素访问、容量判断、元素遍历、添加元素、删除元素）

一、创建与初始化 引入 <forward_list> 并使用 std 命名空间 #include <forward_list>using namespace std;创建一个空 forward_list forward_list<int> fl;创建一个包含 5 个元素&#xff0c;每个元素初始化为 0 的 forward_list forward_list<int&g…
阅读更多...
Python爬虫实战：获取企信网指定公司基本工商数据并分析，为客户选择公司做参考

Python爬虫实战：获取企信网指定公司基本工商数据并分析，为客户选择公司做参考

一、引言 在商业决策、市场调研等众多领域，企业的基本工商信息是至关重要的参考依据。企信网作为权威的企业信息查询平台，汇聚了海量企业的详细信息。借助 Python 的爬虫技术，能够自动从企信网获取指定公司的工商信息，再运用数据分析和机器学习方法对这些信息进行深入挖掘…
阅读更多...
STM32部分：2-1、STM32CubeMX介绍

STM32部分：2-1、STM32CubeMX介绍

飞书文档https://x509p6c8to.feishu.cn/wiki/BTv4wW3O7ita1dkQGkrcBb9rnXg 资料手册 英文手册 https://www.stmcu.com.cn/Designresource/detail/user_manual/711316 中文手册 https://www.stmcu.com.cn/Designresource/detail/localization_document/710583 界面说明 首…
阅读更多...
SVM实战：从理论到鸢尾花数据集的分类可视化

SVM实战：从理论到鸢尾花数据集的分类可视化

SVM实战&#xff1a;从理论到鸢尾花数据集的分类可视化 在机器学习的广阔领域中&#xff0c;支持向量机&#xff08;Support Vector Machine&#xff0c;SVM&#xff09;作为一种经典且强大的分类算法&#xff0c;备受瞩目。它凭借独特的思想和卓越的性能&#xff0c;在模式识…
阅读更多...
陶瓷陶器缺陷检测VOC+YOLO格式938张2类别

陶瓷陶器缺陷检测VOC+YOLO格式938张2类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;938 标注数量(xml文件个数)&#xff1a;938 标注数量(txt文件个数)&#xff1a;938 标注…
阅读更多...
通过Docker部署Prometheus + Grafana搭建监控平台【超详细版】

通过Docker部署Prometheus + Grafana搭建监控平台【超详细版】

文章目录 前言一、Prometheus、Grafana1.1 Prometheus简介1.2 Grafana简介1.3 Prometheus的核心组件1.4 Prometheus优点1.5 Prometheus缺点 二、部署Docker三、主节点部署PrometheusGrafana3.1 部署Prometheus3.2 防火墙开放端口3.3 访问服务3.4 安装Grafana3.5 防火墙开放端口…
阅读更多...
华为云Flexus+DeepSeek征文｜DeepSeek-V3商用服务开通教程

华为云Flexus+DeepSeek征文｜DeepSeek-V3商用服务开通教程

目录 DeepSeek-V3/R1商用服务开通使用感受 DeepSeek-V3/R1商用服务开通 1、首先需要访问ModelArts Studio_MaaS_大模型即服务_华为云 2、在网站右上角登陆自己的华为云账号&#xff0c;如果没有华为云账号的话&#xff0c;则需要自己先注册一个。 3、接着点击ModelArts Stu…
阅读更多...
ubuntu20.04修改默认网卡名称为eth*

ubuntu20.04修改默认网卡名称为eth*

在Ubuntu 20.04.6中&#xff0c;遵循可预测网络接口设备命名规则&#xff0c;网卡名称默认可能是以"enp*"、"ens*"等开头的格式&#xff0c;但是实际使用过程中&#xff0c;某些应用只能读取eth*的网卡&#xff0c;需要修改。 查看网卡名称 ip link show …
阅读更多...
linux下抓包工具--tcpdump介绍

linux下抓包工具--tcpdump介绍

文章目录 1. 前言2. 命令介绍3. 常见选项3.1. 接口与基本控制3.2 输出控制3.3 文件操作3.4 高级调试 4. 过滤表达式4.1 协议类型4.2 方向与地址4.3 逻辑运算符 5. 典型使用场景5.1 网络故障排查5.2 安全分析与入侵检测5.3 性能分析与优化 linux下抓包工具--tcpdump介绍 1. 前言…
阅读更多...
AI大模型-RAG到底能做些什么？

AI大模型-RAG到底能做些什么？

RAG常见的应用场景&#xff0c;有以下几个方面&#xff1a; 1.智能客服系统&#xff1a;比如电商领域&#xff0c;对客户提出的常见问题&#xff0c;进行自动回复。减少人力成本。 2.人力资源管理&#xff1a;一个新的员工&#xff0c;入职一家大型公司&#xff0c;公司中有各…
阅读更多...
C++ unordered_set unordered_map

C++ unordered_set unordered_map

上篇文章我们讲解了哈希表的实现&#xff0c;这节尝试使用哈希表来封装unordered_set/map 1. unordered_set/map的框架 封装的过程实际上与set/map类似&#xff0c;在unordered_set/map层传递一个仿函数&#xff0c;用于取出key值 由于我们平常使用的都是unordered_set/map&…
阅读更多...
REST API、FastAPI与Flask API的对比分析

REST API、FastAPI与Flask API的对比分析

以下是关于REST API、FastAPI与Flask API的对比分析&#xff0c;涵盖架构设计、性能表现、开发效率等核心维度&#xff1a; 一、核心定位与架构差异 REST API 本质&#xff1a;一种基于HTTP协议的架构风格&#xff0c;强调资源化操作&#xff08;通过URI定位资源&#xff09;、…
阅读更多...
实战交易策略 篇二十二：情绪流龙头交易策略

实战交易策略 篇二十二：情绪流龙头交易策略

文章目录 系列文章理论基础股市的本质资金与情绪题材龙头股龙头战法实战技法情绪流技术分析择时实操情绪流龙头战法要诀六大步骤九大术法买卖点量化标准系列文章 实战交易策略 篇一：奥利弗瓦莱士短线交易策略 实战交易策略 篇二：杰西利弗莫尔股票大作手操盘术策略 实战交易策…
阅读更多...
用VNA进行天线阻抗匹配的实例大图

用VNA进行天线阻抗匹配的实例大图

比如我这天线&#xff0c;在7Mhz时不谐振&#xff0c;我进行匹配 天线的阻抗很高&#xff0c;大约是在500-1400欧&#xff0c;而等效电容电感很小。 所以我考虑使用阻抗变压器降低阻抗。 1。测试天线阻抗&#xff0c;电阻相当高&#xff0c;等效电容很小。 2。通过磁环匹配到…
阅读更多...
一个读写excel的简单程序(golang)

一个读写excel的简单程序(golang)

最近总有一些临时统计的需求&#xff0c;比如其他团队生产的一批数据&#xff0c;需要确认这批数据是否入到数仓&#xff0c;提供的列表就是一个excel&#xff0c;我们就需要读取excel中的所有数据&#xff0c;之后查询数仓数据库确认这批数据是否存在&#xff0c;并分别将存在…
阅读更多...
【AI面试准备】AI误判案例知识库优化方案

【AI面试准备】AI误判案例知识库优化方案

面试题&#xff1a;建立内部知识库&#xff1a;收集AI误判案例训练领域专属模型。 在回答关于“建立内部知识库收集AI误判案例训练领域专属模型”的面试问题时&#xff0c;建议从以下结构化框架展开&#xff0c;既能体现专业性&#xff0c;又能展现解决问题的系统性和实际落地…
阅读更多...
Ocelot\Consul\.NetCore的微服务应用案例

Ocelot\Consul\.NetCore的微服务应用案例

案例资料链接&#xff1a;https://download.csdn.net/download/ly1h1/90733765 1.效果 实现两个微服务ServerAPI1和ServerAPI2的负载均衡以及高可用。具体原理&#xff0c;看以下示意图。 2.部署条件 1、腾讯云的轻量化服务器 2、WindowServer2016 3、.NETCore7.0 4、Negut …
阅读更多...
中小企业MES系统需求文档

中小企业MES系统需求文档

适用对象&#xff1a;中小型离散制造企业&#xff08;年产值1-5亿&#xff0c;员工200-800人&#xff09; 版本&#xff1a;V1.0 日期&#xff1a;2025年5月2日 一、业务背景与目标 1.1 现状痛点 生产黑箱化&#xff1a;车间进度依赖人工汇报&#xff0c;异常响应延迟>2小…
阅读更多...
OpenAI最新发布的GPT-4.1系列模型，性能体验如何？

OpenAI最新发布的GPT-4.1系列模型，性能体验如何？

简单来说，这次GPT-4.1的核心思路就是：更实用、更懂开发者、更便宜！OpenAI这次没搞太多花里胡哨的概念，而是实实在在地提升了大家最关心的几个点：写代码、听指令、处理超长文本，而且知识库也更新到了2024年6月。 写代码。要说这次GPT-4.1最亮眼的地方，可能就是写代码这块…
阅读更多...
最新文章

Copyright @ 2022~2023