vite vue+.net发布到iis后，页面404，接口405解决方法

最新推荐文章于 2024-05-10 09:37:03 发布

清水截

最新推荐文章于 2024-05-10 09:37:03 发布

阅读量762

点赞数 23

文章标签： vue 服务器

本文链接：https://blog.csdn.net/qq_42371986/article/details/138524311

版权

1.前端axios不设置baseUrl

这个可以按具体需求调整，看完文章应该能确定是否需要

2.后端和前端打包后，分别放在不同的站点

在这里插入图片描述

3.iis安装URL重写和Application Request Routin Cache模块

URL重写作用：设置前端所有路由全重写至/index.html和Api请求重写至真正后端地址
URL重写安装包下载
在这里插入图片描述
看系统选择x86或者x64，我这是x64

Application Request Routin Cache作用：开放同iis不跨域，应该是不太确定
Application Request Routin Cache安装包下载

安装后关闭IIS再次打开就能看到（快捷开启iis方法：win+r 输入 inetmgr 回车）
在这里插入图片描述

4.前端站点设置Url重写

首先设置前端路由重写

在这里插入图片描述

正则表达式说明：这里填具体需要的正则，比如我前端地址为http://test.com/，我的axios因为没有设置baseUrl,所有api请求的所有基础地址也都是和当前前端地址一样，所以我的api地址为http://test.com/api/login,要是填其他文章说的.，就会把api请求也复写，所以我这里的正则是不匹配路径里有api的路径【^(?!.\bapi\b).*】，
填入后可以测试一下
当填入前端路由时，可以正常匹配
在这里插入图片描述
当填入的是api路径时，匹配失败

这样说明可以达到预期了，既满足前端页面能正常访问，也满足api能正常调用

设置调用api重写

比如现在后端的部署地址为iis的8080端口http://test.com:8080/api，（前端后端都在同一台机子，所以前端也可以通过本机的localhost:8080访问到后端接口），而前端访问的是http://test.com/api 这个端口是80，所以还要配置一个url重写，把请求http://test.com/api 的地址转发为请求http://localhost:8080/api
具体步骤
还是新建一个url重写
在这里插入图片描述
这里的通配符也可以按具体需求修改，比如我的api路径是http://test.com/api/login,通配符就是匹配所有路径里有api的路径，可以测试一下：

可以正常匹配到具体路由为login，所以我们下方的重写URL就可以配置为
在这里插入图片描述
这里的{R:2}其实就对应上方的测试结果里的{R:2},所以重写后的url为http://localhost:8080/api/login,
这样就能正常访问到和前端部署在同一个iis下的后端8080站点的api了。