Angular对接WooCommerce JWT API遇CORS及Cookie问题，咨询同服务器部署

问题背景 #

在Hostinger上部署了基于WordPress的WooCommerce后端，采用无头架构搭配Angular前端，但在购物车和结账模块调用API时遭遇CORS问题，尝试多种方案均未解决。

环境详情 #

• 后端（WooCommerce）托管地址：https://example.com
• 前端（Angular）本地运行地址：http://localhost:4200
• 具体CORS错误提示：

Access to fetch at 'https://example.com/wp-json/wc/v3/products' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

已尝试的解决方案 #

1. 在WordPress的functions.php中添加CORS配置代码：

function add_cors_http_header() {
    header("Access-Control-Allow-Origin: *");
    header("Access-Control-Allow-Methods: GET, POST, OPTIONS, DELETE, PUT");
    header("Access-Control-Allow-Headers: Content-Type, Authorization");
}
add_action('init', 'add_cors_http_header');

2. 在网站根目录添加.htaccess规则：

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
    Header set Access-Control-Allow-Methods "GET, POST, OPTIONS, DELETE, PUT"
    Header set Access-Control-Allow-Headers "Content-Type, Authorization"
</IfModule>

3. 在Angular请求中设置withCredentials: true：

login(credentials: { username: string; password: string }): Observable<any> {
  return this.http.post<LoginResponse>(
    `${this.Api_Url}/wp-json/jwt-auth/v1/token`, 
    credentials, 
    {
      withCredentials: true,
      observe: 'response',
      headers: { "Content-Type": "application/json" }
    }
  ).pipe(
    tap(response => {
      console.log('Cookies from response:', response.headers.get('Set-Cookie'));
    }),
    catchError(error => {
      console.error('Login failed:', error);
      return throwError(() => error);
    })
  );
}

4. 配置Angular的proxy.conf.json：

{
  "/api": {
    "target": "https://example.com",
    "secure": false,
    "changeOrigin": true,
    "logLevel": "debug"
  }
}

当前额外问题 #

• 浏览器网络请求中，响应缺少Set-Cookie头
• API在Postman中可正常调用，但Angular无法设置Cookie

咨询问题 #

将Angular部署到与WooCommerce同一Hostinger服务器，让前后端共用同一测试域名是否可行？如果可行，在Hostinger上部署Angular的最佳方式是什么？

解答 #

1. 同服务器部署可行性 #

完全可行。当前后端共用同一域名（或子域名）时，浏览器不会触发跨域检查，从根源上解决CORS问题，同时Cookie也能正常设置和传递，因为属于同一域的上下文。

2. Hostinger上部署Angular的最佳方式 #

方式一：部署到子目录（与WooCommerce共用主域名）

比如将Angular部署到https://example.com/store，WooCommerce保留在主域名根目录：

1. 本地构建Angular项目：运行ng build --prod --base-href /store/，生成dist文件夹
2. 登录Hostinger的文件管理器，在主域名根目录下创建store文件夹
3. 将dist文件夹内的所有文件上传到store文件夹中
4. 配置WordPress的.htaccess，避免Angular路由被WordPress拦截：
   在现有规则前添加：

   RewriteRule ^store/ - [L]
   

   确保Angular的路由能正常解析。

方式二：部署到子域名

比如使用https://store.example.com作为Angular的域名：

1. 在Hostinger的域名管理中添加子域名store，指向服务器的网站根目录下的store文件夹
2. 本地构建Angular项目：ng build --prod --base-href /
3. 在Hostinger文件管理器中创建store文件夹，上传dist内的所有文件
4. 为子域名配置SSL证书（Hostinger提供免费的Let's Encrypt证书），确保HTTPS访问

方式三：使用Hostinger的Node.js托管（适用于SSR项目）

如果需要运行Angular的SSR（服务器端渲染）项目：

1. 在Hostinger的主机面板中启用Node.js环境，选择对应版本
2. 构建Angular SSR项目：ng run your-project:server:production，生成dist/server和dist/browser文件夹
3. 将构建后的文件上传到Node.js指定的目录，配置启动命令（比如node dist/server/main.js）
4. 设置端口和域名映射，完成部署

额外注意事项 #

• 部署后确保Angular的API请求地址改为相对路径（比如/wp-json/wc/v3/products），避免硬编码域名
• 检查WooCommerce的REST API设置，确保权限和密钥配置正确
• 若使用Cookie进行身份验证，确保Cookie的Domain设置为根域名（.example.com），这样子域名也能访问

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