前端项目通过‘URL 重写’部署在 IIS 中,访问 WebAPI 接口

前端,项目,通过,url,重写,部署,iis,访问,webapi,接口 · 浏览次数 : 749

小编点评

## URL重写模块安装、配置与解决问题 **一、安装“URL重写”功能模块** * 检查 IIS 中是否有“Web 平台安装程序”。 * 按照官方说明安装“ARRv3_0.exe”。 * 配置“Enable Proxy”后,重新启动 IIS。 **二、配置“URL重写”规则** * 在 IIS 主目录中添加规则: * 格式:>空白规则 * 正则表达式:^(.*?)apitest/(.*)$ * 重写地址:http://localhost:55046/api/{R:2} * 测试模式:可用于测试正则表达式是否准确 **三、解决报错处理问题** * 出现HTTP 400.605错误时,检查入站规则的配置,确保正确匹配请求路径。 * 如果规则不正确,请检查正则表达式是否准确。 **四、部署后刷新页面时出现 404 在根目录下添加文件 web.config 的原因** * 在部署过程中,可能存在设置错误导致添加文件 web.config 的行为。 * 确保在部署完成后,所有必要的配置项都已正确设置。 **五、其他建议** * 在配置“URL重写”之前,建议测试规则是否正常工作。 * 可通过“URL重写”规则配置静态资源的访问路径。 * 在生产环境中,建议使用 Nginx 或 Apache 等其他反向代理工具进行 URL 重写。

正文

〇、前言

在前端项目开发时,我们可以通过配置代理 proxy 来访问本地或者是远程接口,但是部署后代理就失效了。如果项目部署在 IIS 上,就没法去对应到指定接口,此时就需要 IIS 中的‘URL重写’功能,来对应要访问的目标地址。

本文将简单介绍下‘URL重写’功能模块的安装、配置,以及日常遇到的问题解决方案。

一、安装‘URL重写’功能模块

如下图标,IIS 中是默认不安装的,需要用户手动安装。安装步骤参考以下三步:

  

1/3 首先是检查 IIS 中是否有‘Web 平台安装程序’,图标如下图:(用来确认和安装 ARR)

  

  若没有需要去官网下载安装包,直接安装即可。官网地址: ARRv3_0.exe 下载地址

  安装成功后,需要重新打开 IIS。

2/3 然后打开‘Web 平台安装程序’,输入‘arr’搜索:

  

  搜索结果,默认情况下,ARR 安装完成后,会如下所示,已经安装了 2.5 版本:

  

  如果没有默认安装需要手动安装,先添加,再安装,最后推荐下载自行安装,直接系统安装也是可以的,如果没成功,就多是两次。

  

3/3 最后需要配置下 ARR,如下图中的步骤:最后需勾选 Enable Proxy。  

  

此时,再重新打开一下 IIS,即可看到久违的‘URL重写’了。

二、通过‘URL重写’配置入站规则

注意:需要点选 IIS 主目录,来配置‘URL重写’。

添加规则->空白规则,如下:

  

编辑对应的值:

  

  正则表达式:^(.*?)apitest/(.*)$

    可以通过‘测试模式’功能,来测试正则表达式是否准确。

  重写地址:http://localhost:55046/api/{R:2}

    {R:2} 代表匹配成功的字符串后边的全部内容,并允许附加查询字符串。

  举个栗子:

    若请求地址为:http://xxxxxxx:1001/apitest/testcontrallor/testmethod?para=10

    经重写后的地址:http://localhost:55046/api/testcontrallor/testmethod?para=10

三、报错处理:HTTP 400.605

根据错误页面的提示信息,可以看出是 ARR(ApplicationRequestRouting) 模块的报错。

  

其中一个原因就是,入站规则配置有问题,导致请求无限循环,比如规则是拦截‘/api/’,重写地址中也包含了‘/api/’就会引起无限循环,导致请求无法命中。

四、部署完成后刷新页面时出现 404

在根目录下添加文件 web.config,并将如下 HTML 代码填入并保存。

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <rewrite>
            <rules>
                <rule name="CHRoutes" stopProcessing="true">
                    <match url=".*" />
                    <conditions logicalGrouping="MatchAll">
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                    </conditions>
                    <action type="Rewrite" url="/index.html" />
                </rule>
            </rules>
        </rewrite>
        <handlers>
            <add name="SSL-html" path="*.html" verb="*" modules="ServerSideIncludeModule" resourceType="File" />
        </handlers>
    </system.webServer>
</configuration>

  参考:前后端分离-IIS部署Vue前端项目在IIS和Nginx上通过代理部署基于ant-design-pro前端框架开发的应用

五、项目主页莫名变成加载 index.html 文件的内容

其中一个原因就是:在“HTTP 响应头”中加了这个配置:content-type : application/json。

解决:删除此项,即可恢复。

  

与前端项目通过‘URL 重写’部署在 IIS 中,访问 WebAPI 接口相似的内容:

前端项目通过‘URL 重写’部署在 IIS 中,访问 WebAPI 接口

本文将简单介绍前端项目在 IIS 中部署,以及‘URL重写’功能模块的安装、配置,最后是日常遇到的问题解决方案。

在Vue3+TypeScript 前端项目中使用事件总线Mitt

事件总线Mitt使用非常简单,本篇随笔介绍在Vue3+TypeScript 前端项目中使用的一些场景和思路。我们在Vue 的项目中,经常会通过emits 触发事件来通知组件或者页面进行相应的处理,不过我们使用事件总线Mitt来操作一些事件的处理,也是非常方便的。

微前端项目部署方案

本文旨在通过部署微前端项目的实践过程中沉淀出一套部署方案,针对项目分别部署在不同的服务器上的场景,就一些重点步骤、碰到的问题做了一些总结。

如何将微前端项目部署在同一台服务器同一个端口下

本文旨在通过部署微前端项目的实践过程中沉淀出一套部署方案,现就一些重点步骤、碰到的问题做了一些总结。

通过局域网访问连接 vite 或 Django 之类的项目

博客地址:https://www.cnblogs.com/zylyehuo/ step1 将 vite 或 Django 类的项目启动 ip 设置为 0.0.0.0:端口 step2 查询本机电脑在当前局域网下的 ip step3 将跳转路径改为查询到的本机 ip,再加上第一步中设置的前端端口

前端如何实现将多页数据合并导出到Excel单Sheet页解决方案|内附代码

本文由葡萄城技术团队于博客园原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。 前端与数据展示 前后端分离是当前比较盛行的开发模式,它使项目的分工更加明确,后端负责处理、存储数据;前端负责显示数据.前端和后端开发人员通过接口进行数据的交换。因此前端

提高工作效率的神器:基于前端表格实现Chrome Excel扩展插件

Chrome插件,官方名称extensions(扩展程序);为了方便理解,以下都称为插件。 我们开发的插件需要在浏览器里面运行,打开浏览器,通过右上角的三个点(自定义及控制)-更多工具-拓展程序-打开开发者模式。点击"加载已解压的拓展程序,选择项目文件夹,就可将开发中的插件加载进来。 插件是基于We

基于SqlSugar的开发框架循序渐进介绍(18)-- 基于代码生成工具Database2Sharp,快速生成Vue3+TypeScript的前端界面和Winform端界面

我们开发一个系统,在保证风格统一、代码强壮、可读性强等基础上,还能够结合代码生成工具快速开发相关后端,以及各种前端界面的,无疑是非常好的,既保证了项目的代码质量,又能够极大的提高开发效率。代码生成工具Database2Sharp是在完善的开发项目上,抽取出数据变化的部分,通过演绎、归纳、反复演绎和归纳等提炼方式抽取出相关的规则,以工具的方式来快速提高生产率,使得我们在开发各种不同的项目上的时候,能

Vue跨域详解

碰到这种问题,其实你的接口已经通了,但是在页面上就是访问不通过。 你可以把API请求地址单独拎出来新开个网站打开看请求是否成功,成功,但是你的项目不通。 有那么几个可能吧: 1、请求头设置错误 headers = { 'Content-Type': 'application/json' //错误的

物流路由线路配载前端算法逻辑实现方案

配载代表着某条线路是否具有发往某个方向(区域、省市县、分拣等)的能力,也可以说是网点(分拣中心)是否具有承载配载所指方向货物的能力。一般网络规划者,在均衡线路间货量时,会通过调整配载来完成。线路上可允许配载货物的“产品类型、最终妥投目的地”,通过线路的配载,计算 当前网点 到 目的网点 的 下一个网点 ,线路 绑定的配载代表通过当前线路最终可以到达的目的地