vue部署到宝塔请求接口报404错误

问题

我将前端vue和后端Spring Boot全部都部署到了宝塔上,后端项目部署成功后直接请求接口成功,运行本地vue项目使用代理服务器访问接口也是成功的,但是部署到vue上的项目访问接口报404错误

解决

经向某位大佬求教后找到了解决办法:需要配置宝塔上的nginx代理才行,解决步骤如下:

  1. 点击nginx的设置(如果没有nginx就在同一页面搜索安装即可)
    在这里插入图片描述
  2. 点击配置修改,鼠标滑动到页面最底部,复制红框里这个路径/www/server/panel/vhost/nginx(配置修改这个文件尽可能不要做改动)
    在这里插入图片描述
  3. 点击文件,复制该路径
    在这里插入图片描述
  4. 在该页面新建一个以.conf为结尾的配置文件,比如:haha.conf
    在这里插入图片描述
  5. 双击haha.conf进行编辑,内容如下:
	server {
	    listen  81; // 监听81端口
	    server_name localhost; // 因为我的后端和前端都部署到了宝塔上,所以server_name可以直接写localhost
	    
	    // 配置代理
	    /* 
	    	第一个代理含义:
	    	  我的网站地址是http://120.77.8.124:81/#/login/passLogin,
	    	  当它看到81后的第一条斜杠时会到`/www/wwwroot/120.77.8.124`路径底下找index.html页面
	    */
	    location / {
	        index index.html;
	        root /www/wwwroot/120.77.8.124;
	    }
	    
	   	/* 
	   		配置接口代理
	   		    我前端的代理服务器代码块下的图所示。
	   		^~/api/:当nginx看到路由中包含/api/会自动将/api/去到,并将/api/前边的部分替换成`http://localhost:15050/`
	    */
	    location ^~/api/ {
	        proxy_pass http://localhost:15050/;
	    }
	}

在这里插入图片描述

经过上边这些步骤就能成功访问接口了

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
THE END
分享
二维码
< <上一篇

)">
下一篇>>