在
IIS 上部署 Vite 构建的 `dist-web` 文件时，
跨域问题通常由服务器未正确配置
HTTP 响应头引起。为了确保浏览器允许
跨域请求，需要在
IIS 中配置 CORS（
跨域资源共享）相关的响应头，例如 `Access-Control-Allow-Origin`、`Access-Control-Allow-Methods` 和 `Access-Control-Allow-Headers`。
### 配置
IIS 以解决
跨域问题
在
IIS 管理器中，可以通过 `web.config` 文件配置
HTTP 响应头来启用
跨域请求。在部署 Vite 生成的 `dist-web` 文件的根目录下，找到或创建 `web.config` 文件，并添加以下配置：
```xml
<configuration>
<system.webServer>
<
httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*" />
<add name="Access-Control-Allow-Methods" value="GET,POST,PUT,DELETE,OPTIONS" />
<add name="Access-Control-Allow-Headers" value="Content-Type,api_key,Authorization" />
</customHeaders>
</
httpProtocol>
</system.webServer>
</configuration>
```
上述配置将允许所有来源（`Access-Control-Allow-Origin: *`）通过指定的
HTTP 方法和请求头访问资源。如果需要限制特定来源，可以将 `*` 替换为具体的
域名，例如 `
https://example.com`。
### 使用 URL 重写实现反向代理
如果项目涉及前后端分离架构，并且前端请求需要代理到后端 API 服务器，可以通过
IIS 的 URL 重写模块（URL Rewrite）和 Application Request Routing（ARR）实现反向代理功能。在安装 ARR 模块后，可以在 `web.config` 中添加如下代理规则：
```xml
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="ReverseProxyInboundRule1" stopProcessing="true">
<match url="api/(.*)" />
<action type="Rewrite" url="
http://backend-server/api/{R:1}" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
```
此规则将所有以 `/api` 开头的请求代理到后端服务器（`
http://backend-server`），从而避免前端直接请求后端 API 所带来的
跨域问题。
### Vite 构建时的注意事项
在使用 Vite 构建项目时，确保 `vite.config.js` 文件中配置了正确的 `base` 路径。如果部署路径不是根路径（例如部署在子路径 `/my-app` 下），则需要设置 `base` 选项：
```js
export default defineConfig({
base: '/my-app/',
plugins: [...],
});
```
此外，在本地开发环境中使用 `vite` 提供的开发服务器时，可以通过 `server.proxy` 配置代理解决开发阶段的
跨域问题：
```js
export default defineConfig({
server: {
proxy: {
'/api': {
target: '
http://backend-server',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ''),
},
},
},
});
```
该配置会将所有 `/api` 开头的请求代理到 `
http://backend-server`，从而在开发阶段避免
跨域问题。
### 总结
通过在
IIS 的 `web.config` 文件中配置合适的
HTTP 响应头，可以有效解决 Vite 构建后的 `dist-web` 文件在部署时出现的
跨域问题。同时，结合 URL 重写和反向代理技术，可以进一步优化前后端分离架构下的请求流程，提高系统的可维护性和安全性。
---
本文介绍了解决IIS发布服务时遇到的跨域请求问题的方法。通过在IIS管理器中为服务添加自定义HTTP响应头来允许特定的请求头、方法及来源，从而实现跨域访问。
扫一扫
474
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
