Angular应用配置代理消除OPTIONS请求问题求助

首先，咱们得先搞清楚为什么会出现OPTIONS请求——这是浏览器的跨域资源共享（CORS）预检机制，当你的Angular应用（假设部署在example.com的80端口）和Golang API（example.com:8080）不在同一个端口时，浏览器会自动发送OPTIONS请求确认服务器是否允许跨域访问。要消除这个请求，核心就是让前端和API的请求处于同域名同端口下，通过代理实现是最直接的方案。

你之前的Apache配置没生效，问题出在配置逻辑搞反了，而且VirtualHost的端口设置不对。下面给你一步步来修正：

1. 正确的Apache代理配置 #

假设你的Angular应用部署在example.com的80端口（默认HTTP端口），Golang API运行在同一EC2实例的8080端口。我们需要把前端发送到example.com/api路径的请求，代理到localhost:8080（因为API和Apache在同一服务器，用localhost更高效）。

修改你的Apache配置文件（通常是/etc/httpd/conf/httpd.conf或者/etc/apache2/sites-available/example.com.conf）：

<VirtualHost *:80>
    ServerName example.com
    ServerAlias www.example.com

    # 配置Angular应用的静态文件根目录
    DocumentRoot /path/to/your/angular/dist/folder

    # 代理API请求到8080端口的Golang服务
    ProxyRequests Off
    ProxyPass /api http://localhost:8080/api
    ProxyPassReverse /api http://localhost:8080/api

    # 处理Angular的路由刷新问题（可选，但很重要）
    <Directory /path/to/your/angular/dist/folder>
        RewriteEngine On
        RewriteBase /
        RewriteRule ^index\.html$ - [L]
        RewriteCond %{REQUEST_FILENAME} !-f
        RewriteCond %{REQUEST_FILENAME} !-d
        RewriteRule . /index.html [L]
    </Directory>
</VirtualHost>

配置说明： #

• DocumentRoot：指定Angular打包后静态文件的存放路径，确保Apache能正确提供前端页面。
• ProxyPass /api：把所有以/api开头的请求转发到Golang API的/api路径（如果你的API没有前缀，就改成ProxyPass / http://localhost:8080/，但注意不要和前端静态文件路径冲突）。
• ProxyPassReverse：确保API返回的响应头里的域名被替换成example.com，避免前端出现跨域问题。
• 路由刷新规则：Angular是单页应用，直接刷新非首页会404，这段Rewrite规则能解决这个问题。

2. 修改Angular的API请求路径 #

在Angular的代码里，把原来的http://example.com:8080/api/xxx请求路径，改成相对路径/api/xxx。比如：

// 原来的写法
this.http.get('http://example.com:8080/api/users').subscribe(...);

// 修改后的写法
this.http.get('/api/users').subscribe(...);

如果你用了环境变量配置API地址，直接在environment.ts里修改：

export const environment = {
  production: false,
  apiUrl: '/api'
};

3. 验证配置是否生效 #

1. 重启Apache服务：
   • CentOS/RHEL：sudo systemctl restart httpd
   • Ubuntu/Debian：sudo systemctl restart apache2
2. 重启Golang API服务，确保它在8080端口正常运行。
3. 打开浏览器访问example.com，打开开发者工具的Network面板，查看API请求：现在应该只有GET/POST等实际请求，不会再出现OPTIONS预检请求了。

备选方案：如果代理暂时无法生效 #

如果你暂时没法调整Apache配置，也可以在Golang API里配置CORS，让服务器直接响应OPTIONS请求并缓存预检结果，减少重复OPTIONS请求的次数。比如用github.com/rs/cors库：

package main

import (
    "net/http"
    "github.com/rs/cors"
)

func main() {
    mux := http.NewServeMux()
    // 注册你的API路由
    mux.HandleFunc("/api/users", getUsers)

    // 配置CORS，允许预检结果缓存1小时
    c := cors.New(cors.Options{
        AllowedOrigins: []string{"http://example.com"},
        AllowedMethods: []string{"GET", "POST", "PUT", "DELETE"},
        AllowedHeaders: []string{"Content-Type"},
        MaxAge: 3600, // 缓存预检结果3600秒
    })

    handler := c.Handler(mux)
    http.ListenAndServe(":8080", handler)
}

这个方案虽然不能完全消除OPTIONS请求，但能大幅减少它的发送频率，提升性能。

内容的提问来源于stack exchange，提问作者Vikram