VUE代理报错404 NGINX配置方法

最新推荐文章于 2025-05-06 18:30:03 发布

原创最新推荐文章于 2025-05-06 18:30:03 发布 · 548 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#nginx #vue.js #前端

本文介绍了使用Vue搭建个人博客时遇到的音乐盒功能问题，即通过Nginx部署后音乐API请求出现404错误的情况。文章详细解释了解决方案，包括如何正确配置Nginx的proxy_pass参数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

错误点不同，解决方法不同，理解后取用

最近在搞个人博客，有个音乐盒的功能，调用了网易云音乐的api。

vue中配置了代理

本地npm run serve毫无问题

但是打包放到NGINX后

代理的api会报404

解决办法：

nginx.config中配置

location /music/ {
        proxy_pass http://39.108.136.207:3000/;
        
	   }

坑点：

proxy_pass 不可直接放ip+端口

需要加 / 或相应方法

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

IYGNOY

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

vue项目nginx部署刷新报错404

知识改变命运，ヾ(◍°∇°◍)ﾉﾞ【求关注】

12-23

611

最近部署VUE项目，刷新后提示404

【报错】nginx部署项目后Echarts折线图无法展示

虎康的博客

10-05

1530

部署之后Echarts折线图无法正常展示，报错信息如下。语法，渲染dom进行绘制echarts时，拿到。元素之后无法进行 init 初始化，因此。原因是在定义div时，使用了。元素进行渲染时，使用原生的。输入 cmd 进入命令行窗口。元素，之后就可正常对。

参与评论您还未登录，请先登录后发表或查看评论

关于nginx配置vue项目页面刷新404

小love容儿的博客

05-24

507

最近项目使用的 "vue":"^2.6.11", vue.config.js module.exports = { publicPath: "./", outputDir: "dist", // 构建时的输出目录 assetsDir: "static", // 放置静态资源的目录 lintOnSave: false, css: { loaderOptions: { scss: { prependData: `@impor...

Nginx 代理Vue 刷新 404

Léon

05-25

4363

Nginx 代理Vue 刷新 404 nginx location / { try_files $uri $uri/ /index.html; }

Vue3路由模式为history，使用nginx部署上线后刷新404的问题

最新发布

一位热爱编程的青年

05-06

917

在使用nginx部署vue3的项目后，发现正常时可以访问的，但是一旦刷新，就是出现404的情况。

nginx代理404

weixin_45447033的博客

06-02

661

404当然是一种路径不正确的错误，常见的解决方案的我就不说了，主要说一下特殊的问题。配置是没有问题的，那么我就要看一下nginx.conf的这个配置文件。 nginx.conf user nginx; 这样的话，虽然已经启动了，但是还是报错，访问http路径的话，报错404. 正确的方式是；创建nginx用户，或者把nginx用户改成root，然后重启nginx ...

nginx问题解决-部署vue单页面应用报404

无名小辈

10-09

829

try_files指令会依次尝试查找请求的文件，如果找不到则将请求转发给index.html进行处理。

vue项目部署到nginx 上刷新页面显示404

qq_30517167的博客

07-25

3179

在Vue项目部署到Nginx服务器上时，遇到刷新页面显示404的问题，通常是因为Nginx无法正确地处理Vue路由（尤其是单页面应用（SPA）中的前端路由）。Vue应用的路由是前端路由，依赖于JavaScript来动态解析URL，当直接访问除根路径外的URL时，Nginx默认会尝试在服务器上找到对应的文件或目录，如果找不到就会返回404错误。为了解决这个问题，你需要配置Nginx，使得所有请求都重定向到Vue应用的入口文件（通常是。（或类似的命令）构建完成，并且所有的构建文件（包括。

Vue中跨域及打包部署到nginx跨域设置方法

10-16

通常，我们会把打包后的文件（位于`/dist`目录）部署到Nginx服务器上，然后在Nginx配置中设置代理。 ### Nginx的跨域配置方法当Vue项目打包后，为了在生产环境中解决跨域问题，我们需要在Nginx中设置相应的代理。...

Vue打包部署到Nginx时,css样式不生效的解决方式

10-15

然而，这并不总是解决问题，特别是在Nginx配置不当的情况下。 Nginx是一个强大的Web服务器，它可以处理静态文件的托管和反向代理。当CSS样式不生效时，问题可能出在Nginx对静态资源的处理上。Nginx需要识别和正确地...

nginx 部署 vue 项目找不到js css文件的解决方法

01-11

很多时候 npm run build 之后， index.html 文件中webpack 自动插入的 js 文件 css 文件的相对目录总是不对，发布到服务器上之后，nginx 找不到文件。 vue-cli@3 在 vue-cli@3 中你需要为你 webpack 插入到 index....

解决VueCil代理本地proxytable无效报错404的问题

01-22

前言因为项目中遇到了这个bug：Vue cil2中配置代理proxytable成功，却无效报错404，在后端和代理都配置无误的情况下，还是报404，先已解决，特记录，希望能帮助到他人；正文 1. 为什么要使用代理？代理的作用是：把请求代理转发到其他服务器的中间件；例如：我们当前主机为http://localhost:8080/，现在我们有一个需求，如果我们请求/api，我们不希望由3000来处理这个请求，而希望由另一台服务器https://www.example.org/api来处理这个请求怎么办？这时候就要使用代理来解决！ 2. 在vue中如何使用多个代理？ module.exp

vue项目通过nginx部署，刷新产生404问题的解决

m0_37630138的博客

10-08

5244

vue项目通过nginx部署，刷新产生404问题的解决

Nginx代理接口访问返回404_nginx 404(1)，带你一起探究Linux运维事件分发机制

m0_60707538的博客

04-06

4950

为了做好运维面试路上的助攻手，特整理了上百道。

nginx配置 vue打包后的项目解决刷新页面404问题|nginx配置多端访问

weixin_34379433的博客

05-14

4906

访问vue页面时，/# 使url看着不美观，使用 H5 history模式可以完美解决这个问题，但需要后端nginx帮助。接下来我们自己配置一下。使用前端路由，但切换新路由时，想要滚动到页面顶部，或者保持原先的滚动位置，就像重新加载页面那样，vue-router 可以让你自定义路由切换页面时如何滚动。当创建Router实例时，可以提供一个 scrollBehavior 方法： const ro...

用Nginx部署vue项目页面404解决

小恶魔的博客

07-06

9988

nginx是一款优秀的web反向代理服务软件。将打包好的dist前端项目，基于nginx完成部署上线。

vue-nginx刷新404问题

z69183787的专栏

08-02

5801

vue项目只有一个组件，路由模式是history，路由中有一个根路径重定向配置，路由配置如下path: '/',},routes})vue项目build之后，使用nginx部署build之后的产物，nginx路由配置如下/home/hfy/dist文件夹中存放的是build产物，包含css、fonts、js文件夹以及favicon.ico、index.html我添加上述规则是想解决刷新页面后404问题。

nginx代理静态资源返回404问题解决过程

热门推荐

weixin_45087884的博客

06-21

1万+

nginx server_name匹配规则

Nginx反向代理404问题已解决

Cayden666的博客

07-09

7844

Nginx反向代理访问时，访问不到并且报404（问题已解决） Nginx在启动时会读取配置文件，当读取server块时，对于同一个监听的端口号只会读取第一次出现的server块的，而后面的是读取不到的，因此只需要把前面的server块所监听的端口号改掉就可以了：...

vue项目报错403

01-12

### 解决 Vue 项目中的 403 错误当遇到 HTTP 403 Forbidden 错误时，这通常意味着服务器理解请求但拒绝执行它。对于 Vue 项目而言，这类错误可能由多种原因引起，包括但不限于权限设置不当、CORS 配置问题或是代理配置不正确。 #### 权限设置如果前端应用尝试访问受保护资源，则需确认 API 或静态文件的访问权限已正确授予给客户端应用程序。确保部署环境下的 Web 服务器（如 Nginx、Apache）或云服务提供商的安全组规则允许来自特定 IP 地址范围内的流量通过[^1]。 #### CORS (跨源资源共享) 设置为了防止浏览器出于安全考虑阻止跨站请求伪造攻击(CSRF)，开发者应适当调整后端接口所在服务器上的 CORS 策略，使其能够接受来自指定域名的请求。可以通过修改 Express.js 应用程序中间件来实现这一点： ```javascript const cors = require('cors'); app.use(cors({ origin: 'http://example.com', // 替换成实际的前端地址 })); ``` #### 使用代理解决开发期间的问题在本地开发环境中，可通过 `vue.config.js` 文件配置反向代理以绕过同源策略限制： ```javascript module.exports = { devServer: { proxy: { '/api': { target: 'https://backend.example.com', changeOrigin: true, pathRewrite: {'^/api' : ''} } } } }; ``` 以上方法适用于处理因前后端分离而导致的不同源之间的通信障碍，在生产环境下则建议采用更正式的服务端解决方案，比如上述提到的 CORS 政策优化或者直接在同一主机上托管前后端代码[^3]。