vue开发环境、生产环境配置与nginx配置后端代理转发跨域

server/2024/10/20 6:02:20/

一、配置步骤

在Vue项目中,通常会在项目的环境配置文件中设置不同环境下的API接口地址。对于生产环境,你可以使用Nginx作为反向代理来处理后端地址的转发。

1.在Vue项目中的env文件夹下,找到env.production文件,并设置生产环境下的API接口地址:

module.exports = {NODE_ENV: '"production"',API_HOST: '"/api/"' // 注意这里不是实际的URL,而是Nginx会处理的路径
}

2.配置Nginx服务器。在Nginx配置文件中(通常是nginx.conf或者单独的站点配置文件),添加一个location块来处理对/api/路径的请求,并将其转发到实际的后端服务器:

server {listen 80;server_name your-domain.com;location / root /path/to/your/vue/app;try_files $uri $uri/ /index.html;}location /api/ {proxy_pass http://backend-server-url; # 实际后端API服务器地址proxy_http_version 1.1;proxy_set_header Upgrade $http_upgrade;proxy_set_header Connection 'upgrade';proxy_set_header Host $host;proxy_cache_bypass $http_upgrade;}
}

在这个配置中,当Nginx服务器接收到对http://your-domain.com/api/的请求时,它会将请求转发到http://backend-server-url。这样,你的Vue前端应用可以使用相对路径向Nginx请求API,而Nginx则负责将请求转发到实际的后端服务。

后端提供的请求接口完整地址示例:https://www.bai


http://www.ppmy.cn/server/133262.html

相关文章

题目 3161: 蓝桥杯2023年第十四届省赛真题-子矩阵

题目 代码 #include <bits/stdc.h> using namespace std; typedef long long ll; const int N 1010, mod 998244353; int g[N][N]; int rmin[N][N], rmax[N][N]; ll mmin[N][N], mmax[N][N]; int q[N * N]; int hh, tt; int n, m, a, b; int main() {cin >> n &…

Java基础-IO基础

IO是指input/output&#xff0c;即输入和输出。输入和输出是以内存为中心的&#xff1a; input 从外部往内存输入数据&#xff0c;比如硬盘中的数据写入内存等。 output 从内存往外输出数据&#xff0c;比如内存数据写入硬盘等。 File File类表示一个文件或者一个目录。使用F…

iOS--NSURLSession Alamofire流程源码解析(万字详解版)

一、NSURLSession NSURLSession的主要功能是发起网络请求获取网络数据&#xff0c;是Apple的网络请求原生库之一。Alamofire就是对NSURLSession的封装&#xff0c;如果对NSURLSession不熟悉的话&#xff0c;那么Alamofire源码看起来会比较费劲的。因此我们先简单学习下NSURLSe…

wpf grid 的用法

WPF中的Grid是一种布局控件&#xff0c;可用于将子控件按照行和列的方式排列。 以下是Grid控件的用法&#xff1a; 在XAML文件中&#xff0c;添加一个Grid控件&#xff1a; <Grid> </Grid>在Grid控件中&#xff0c;添加行和列定义&#xff1a; <Grid><…

ue5 扇形射线检测和鼠标拖拽物体

这里的NumTrace是要发射几根射线&#xff0c;Degrees Per Trace是每根射线之间的角度&#xff0c; 例如 要在角色面前实现一个180度的扇形射线检测&#xff0c;就需这两个变量乘起来等于180 TraceLength是射线的长度 下面是鼠标拖动物体逻辑&#xff0c;很简单 这里的Floor和…

HTML(五)列表详解

在HTML中&#xff0c;列表可以分为两种&#xff0c;一种为有序列表。另一种为无序列表 今天就来详细讲解一下这两种列表如何实现&#xff0c;效果如何 1.有序列表 有序列表的标准格式如下&#xff1a; <ol><li>列表项一</li><li>列表项二</li>…

Ubuntu22.04中安装英伟达驱动并部署Pytorch深度学习环境

安装英伟达驱动 本文基于windows10ubuntu22.04双系统&#xff0c;给ubuntu22.04安装英伟达驱动。 安装必要。依赖 sudo apt update # 获取最新的软件包信息 sudo apt upgrade # 升级软件包 sudo apt install g sudo apt install gcc sudo apt install make禁用ubuntu默认驱动…

Vue3工程基本创建模板

创建vue工程 执行这两个绿色的命令 输入 code . 打开vscode 安装依赖 Element - plus npm install element-plus --save 在vscode的 main.js 换这个代码 // main.ts import { createApp } from vue import ElementPlus from element-plus import element-plus/dist/inde…