Angular调用Node.js Stripe后端接口失败，Postman请求正常

看起来你遇到的问题主要有两个核心原因：Angular的HttpClient返回Observable需要订阅才能获取数据，另外大概率存在**跨域（CORS）**问题——这也是Postman能正常请求但浏览器里不行的常见原因。下面一步步给你解决：

1. 先解决Observable订阅问题（获取真实数据） #

Angular的HttpClient.get()返回的是一个Observable对象，你直接调用getPublicKey()并不会实际发起请求，也拿不到数据，所以才会看到[object Object]（其实就是这个Observable对象的字符串表示）。你需要在component里订阅这个Observable：

修改stripe.component.ts的testStripe方法：

testStripe(): void {
  this.stripeScriptService.getPublicKey()
    .subscribe({
      next: (response) => {
        console.log('公钥获取成功:', response);
        // 这里可以直接取出公钥，比如 response.publicKey
      },
      error: (err) => {
        console.error('请求出错:', err);
        // 这里会打印跨域或者其他请求错误信息
      }
    });
}

这样你就能在浏览器控制台看到真实的响应数据，而不是[object Object]了。

2. 解决跨域（CORS）问题 #

Postman不受浏览器同源策略限制，但Angular前端如果运行在不同端口（比如默认的localhost:4200），后端localhost:3000就属于跨域请求，浏览器会拦截。你需要在Node.js后端配置CORS：

步骤1：安装cors包 #

在你的Node.js项目根目录运行：

npm install cors

步骤2：在后端代码中启用CORS #

修改你的后端主文件（比如app.js或者server.js），引入并使用cors中间件：

const cors = require('cors');
const express = require('express');
const app = express();

// 开发环境允许所有来源的跨域请求（生产环境建议指定具体域名）
app.use(cors());

// 挂载你的stripe路由
const stripeRouter = require('./path/to/your/stripe.js');
app.use('/api/stripe', stripeRouter);

如果是生产环境，建议配置允许的特定域名，提升安全性：

app.use(cors({
  origin: 'https://your-production-frontend-domain.com'
}));

3. 额外优化：在Service里处理响应（可选） #

你可以在stripe-script.service.ts里直接返回公钥字符串，简化component的逻辑：

import { map } from 'rxjs/operators';

// ...其他代码

getPublicKey() {
  return this.http.get<{publicKey: string}>('http://localhost:3000/api/stripe/public-key')
    .pipe(
      map(response => response.publicKey)
    );
}

然后在component订阅时直接拿到公钥：

this.stripeScriptService.getPublicKey()
  .subscribe({
    next: (publicKey) => {
      console.log('公钥:', publicKey); // 直接拿到pk_test_123
    },
    error: (err) => console.error(err)
  });

这样处理后，你应该就能正常从Angular调用后端的Stripe公钥接口了。

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