IIS10 前端服務(wù)器，設(shè)置代理實(shí)現(xiàn)跨域請(qǐng)求后端接口

摘要

本文介紹 IIS10 通過安裝 ARR 3.0（Application Request Routing），配置 Application Request Routing Cache 開啟代理，配置 URL Rewrite 創(chuàng)建匹配規(guī)則，實(shí)現(xiàn)前端跨域請(qǐng)求 API 功能。即訪問 http://localhost:8001/api/list，實(shí)際會(huì)被代理到 http://localhost:8002/api/list 。

## 原請(qǐng)求
http://localhost:8001/api/list   

## 實(shí)際代理到后端服務(wù)
http://localhost:8002/api/list

服務(wù)器環(huán)境

IIS 前端服務(wù)器

IIS 服務(wù)器創(chuàng)建一個(gè)端口為 8001 的網(wǎng)站，目錄下有一個(gè) test.html，請(qǐng)求接口地址為 "/api/get.json" 。訪問地址為：http://localhost:8001/test.html 。

Node.js 后端服務(wù)器

使用 http-server 開啟一個(gè)端口為 8002 的服務(wù)器，"api"目錄下一個(gè) JSON 文件 get.json ，訪問地址為：http://localhost:8002/api/get.json 。

一. 安裝 ARR 3.0（Application Request Routing）

訪問 IIS 官方網(wǎng)站：https://www.iis.net/downloads/microsoft/application-request-routing ，有兩種安裝方式。

• 通過 Web 平臺(tái)安裝程序（Web Platform Installer）：直接點(diǎn)擊 “Install this extension” 按鈕即可。
• 下載包安裝：x86 installer / x64 installer 。

# 重啟 IIS
iisreset

二. 配置 Application Request Routing Cache

1、安裝成功后，IIS 管理里會(huì)看到多出一個(gè)圖標(biāo) "Application Request Routing Cache"，點(diǎn)擊進(jìn)去進(jìn)行配置。

001.jpg

2、進(jìn)去后，點(diǎn)擊 Server Proxy Settings 。

002.jpg

3、在設(shè)置頁(yè)面，勾選 Enable proxy， 。

003.jpg

4、應(yīng)用保存剛才設(shè)置。

三. 配置 URL 重寫(URL Rewrite)

1、進(jìn)入 IIS 網(wǎng)站管理，可以看到多出一個(gè) URL 重寫(URL Rewrite) 的圖標(biāo)。

004.jpg

2、進(jìn)入 URL 重寫(URL Rewrite)，點(diǎn)擊“添加規(guī)則”。

005.jpg

3、進(jìn)入添加規(guī)則彈窗，點(diǎn)擊“空白規(guī)則”。

006.jpg

4、配置規(guī)則：

# 模式(T)
^(.*?)/?api/(.*)$

# 重寫 URL(L)
http://localhost:8002/{R:0}  

007.jpg

即 8001 端口的前端服務(wù)器，訪問路徑中包括 /api/ 的請(qǐng)求，會(huì)被代理到 8002 端口的后端服務(wù)器。

5、應(yīng)用保存配置。

測(cè)試

訪問前端服務(wù)器：http://localhost:8001/test.html ，可以看到接口訪問地址（http://localhost:8001/api/get.json） 狀態(tài)碼是 502 。

test-001.jpg

這是因?yàn)檫€沒開啟后端服務(wù)器，讓我們開啟再試一下。

test-002.jpg

現(xiàn)在刷新前端頁(yè)面（http://localhost:8001/test.html），可以看到接口請(qǐng)求已經(jīng)成功。

test-003.jpg

再回到后端服務(wù)器，查看日志，可以看到剛才有一條 GET 請(qǐng)求記錄，證明剛才 8001 端口服務(wù)器的請(qǐng)求，已經(jīng)成功代理到 8002 端口服務(wù)器的了。

test-004.jpg

結(jié)語

IIS 配置偏圖形化，按理講應(yīng)該更友好一些，但事實(shí)是增添了很多操作步驟，比起Nginx 的幾行配置文件，實(shí)際體驗(yàn)反而復(fù)雜許多。

參考資料

• https://docs.microsoft.com/en-us/iis/extensions/configuring-application-request-routing-arr/creating-a-forward-proxy-using-application-request-routing
• https://www.iis.net/downloads/microsoft/application-request-routing
• https://www.cnblogs.com/yuzhihui/p/9335035.html

【無稽山】原創(chuàng)作品（公眾號(hào)：無稽山）