Windows使用Nginx将文件转发成http协议的文件-通常用于图片转http

目录

前言

本人研究该方法出错多次,经过长达一个半小时才成功排除所有问题成功达成目标,下面出现的问题我将会列出来

解决的问题

将文件资源转成http协议的文件,特别是图片资源,在vue项目中想使用http形式的图片资源可以采用此解决方案

Windows下载和安装nginx不做说明,请参考其他教程下载

配置nginx

这部分最为重要,经常出错

  • 在nginx目录下找到conf文件夹中的nginx.conf配置文件,打开,圈红部分就是该聚焦的修改
  • 稍微解释一下该配置
  • 如此添加配置后保存,启动nginx服务器
  • 访问ip+端口+location指定的请求/picture/+alias指定的目录下的文件 即可访问到目标文件,如下
    • 系统中的文件
    • 浏览器请求

      如此就可访问到

访问失败常见问题

每次配置完都在nginx目录下运行指令重启服务器确保配置生效

nginx -s reload

配置拼错

这就没什么好讲的,检查仔细,不要马虎

alias中路径最后少个斜杠,和路径问题

  • 路径问题

    首先直接复制的路径是反斜杠,所以需要做些修改,学过编程语言的都知道反斜杠会被解析成转义字符,所以有两种选择,1.使用斜杆 / 2.使用双反斜杠 \

  • 少斜杆问题

    这个斜杆必须加上,这个问题我根据nginx目录下的log/error.log错误日志查看出来的

错误信息:2024/06/06 22:28:37 [error] 6184#29300: *4 CreateFile() "D:/Assignment/picturebackground.png" failed (2: The system cannot find the file specified), client: 127.0.0.1, server: localhost, request: "GET /picture/background.png HTTP/1.1", host: "localhost:90"

可以从最后看出来由于我没加斜杆,如下图

所以它解析成/picture/background.png,使得路径错误

用户权限问题

我们要确保nginx对应的用户有权限读取目标文件

  • 在任务管理器详细中查看nginx,所对应的用户在目标文件中是否有读取权限

最后

如果问题为解决,可以在评论留言,我看到将做回复

此篇在配置处不够详细,目前没什么时间完善博客,过几天慢慢完善

相关推荐
engchina10 分钟前
@media 的常用场景与示例
css·media
林的快手29 分钟前
CSS列表属性
前端·javascript·css·ajax·firefox·html5·safari
菜鸟单飞2 小时前
介绍一款非常实用的PDF阅读软件!
windows·pdf·电脑
计算机-秋大田2 小时前
基于Spring Boot的兴顺物流管理系统设计与实现(LW+源码+讲解)
java·vue.js·spring boot·后端·spring·课程设计
禾苗种树3 小时前
在 Vue 3 中使用 ECharts 制作多 Y 轴折线图时,若希望 **Y 轴颜色自动匹配折线颜色**且无需手动干预,可以通过以下步骤实现:
前端·vue.js·echarts
哑巴语天雨4 小时前
前端面试-网络协议篇
websocket·网络协议·http·面试·https
小盼江4 小时前
水果生鲜农产品推荐系统 协同过滤余弦函数推荐水果生鲜农产品 Springboot Vue Element-UI前后端分离 代码+开发文档+视频教程
vue.js·spring boot·ui
初遇你时动了情5 小时前
react module.scss 避免全局冲突类似vue中scoped
vue.js·react.js·scss
烂蜻蜓6 小时前
Uniapp 设计思路全分享
前端·css·vue.js·uni-app·html
流星白龙6 小时前
【Linux】35.封装 UdpSocket(2)
linux·运维·windows