Angular与Node.js跨域请求受阻：CORS问题排查求助

我正在开发一个博客项目，Angular前端向Node.js后端发送订阅请求时遇到CORS问题，浏览器控制台报错：

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:3000/subscribe. (Reason: CORS request did not succeed). Status code: (null)

页脚的订阅按钮本应将用户输入的邮箱存入数据库，但我是Node.js新手，不确定代码是否正确，希望得到相关建议。以下是我的代码：

Footer.html #

<div class="footer">
  <div class="section1">
    <h3>Subscribe to Our Newsletter</h3>
    <p>Stay updated with our latest ideas on recipes.</p>

    <div class="subscribe-form">
      <form [formGroup]="subscribeForm" (ngSubmit)="onSubmit()">
        <input type="email" formControlName="email" placeholder="Enter your email" />
        <button type="submit">Subscribe</button>
      </form>
    </div>
    <div class="footer-links">
      <ul>
        <li><a [routerLink]="['/about']">About Us</a></li>
        <li><a [routerLink]="['/contact']">Contact Us</a></li>
      </ul>
    </div>
  </div>

  <div class="logo">
    <img src="assets/logotan.png" alt="Logo">
  </div>

  <div class="section2">
    <div class="contact-info">
      <p>Email: <a href="mailto:thefoodieleonne@gmail.com">thefoodieleonne@gmail.com</a></p>
    </div>

    <div class="copyright">
      <p>&copy; {{ currentYear }} TheFoodieLeonne. All rights reserved.</p>
    </div>

    <div class="social-media-icons">
      <a href="https://facebook.com"><i class="fab fa-facebook"></i></a>
      <a href="https://twitter.com"><i class="fab fa-twitter"></i></a>
      <a href="https://instagram.com"><i class="fab fa-instagram"></i></a>
      <a href="https://tiktok.com"><i class="fab fa-tiktok"></i></a>
       <!-- Add more social media icons as needed -->
    </div>
  </div>
</div>

Footer.ts #

export class FooterComponent implements OnInit {
  currentYear: number = new Date().getFullYear(); 
  subscribeForm: FormGroup;

  constructor(private fb: FormBuilder, private subscribeService: SubscribeService) {
    this.subscribeForm = this.fb.group({
      email: ['', [Validators.required, Validators.email]]
    });
  }
  ngOnInit() {

  }

  onSubmit() {
    if (this.subscribeForm.valid) {
      const email = this.subscribeForm.get('email')!.value;
      this.subscribeService.subscribe(email).subscribe(
        (response) => {
          // Handle successful subscription
          console.log('Subscription successful!', response);
       },
        (error) => {
          // Log the full error object for more details
          console.error('Subscription failed!', error);
        }
      );
    }
  }
}

subscribe.service.ts #

export class SubscribeService {
  private baseUrl = 'http://localhost:3000'; // Replace with your backend server URL

  constructor(private http: HttpClient) { }

  subscribe(email: string): Observable<any> {
    const url = `${this.baseUrl}/subscribe`;

    // Headers to set content type to JSON
    const headers = new HttpHeaders({
      'Content-Type': 'application/json',
    });

    // Request body
    const body = { email };

    return this.http.post(url, body, { headers });
  }
}

app.js #

const express = require('express');
const cors = require('cors');
const mongoose = require('mongoose');
require('dotenv').config();

const app = express();
const PORT = process.env.PORT || 3000;

// Use CORS middleware
app.use(cors());
app.use(express.json());

// Load environment variables from .env
const dotenv = require('dotenv');
dotenv.config();

// Connect to MongoDB using the environment variable
mongoose.connect(process.env.MONGODB_URI, {
    useNewUrlParser: true,
    useUnifiedTopology: true,
});

// Import routes
const emailRoutes = require('./email.model');
app.use('/', emailRoutes);

app.listen(PORT, () => {
    console.log(`App listening on port ${PORT}`);
});

email.model.js #

const express = require('express');
const mongoose = require('mongoose');
const router = express.Router();

// Import the Email model
const Email = require('./email.model');

// Subscribe endpoint
router.post('/subscribe', async (req, res) => {
    const { email } = req.body;

    try {
        // Check if the email is not already in the database
        const existingEmail = await Email.findOne({ email });

        if (!existingEmail) {
            // If not, save it to the database
            const newEmail = new Email({ email });
            await newEmail.save();

            console.log('Email saved to the database:', newEmail);

            res.status(200).send('Subscribed successfully!');
        } else {
            res.status(400).send('Email is already subscribed.');
        }
    } catch (error) {
        console.error('Error saving email to the database:', error);
        res.status(500).send('Internal Server Error');
    }
});

// Get subscribed emails endpoint
router.get('/emails', async (req, res) => {
    try {
        // Retrieve all emails from the database
        const emails = await Email.find({}, 'email');
        res.status(200).json(emails.map((e) => e.email));
    } catch (error) {
        console.error('Error retrieving emails from the database:', error);
        res.status(500).send('Internal Server Error');
    }
});

module.exports = router;

问题排查与优化建议 #

1. CORS问题解决 #

虽已使用cors中间件仍报错，可从以下方向排查：

• 确认后端服务状态：检查Node.js服务是否在3000端口正常运行，控制台是否输出App listening on port 3000。
• 细化CORS配置：默认cors()允许所有源，部分浏览器可能需要明确指定前端地址：

  // 替换原app.use(cors())
  app.use(cors({
    origin: 'http://localhost:4200', // Angular默认端口，根据实际情况调整
    methods: ['POST', 'GET'],
    allowedHeaders: ['Content-Type']
  }));
  

• 测试后端接口可用性：用Postman直接请求POST http://localhost:3000/subscribe，若仍报错，说明问题不在CORS，而是后端本身存在错误。

2. Node.js代码核心错误修复 #

• 解决循环引用：email.model.js中存在const Email = require('./email.model');的循环引用，需拆分路由与模型：
  1. 创建独立模型文件email.model.js：

     const mongoose = require('mongoose');
     const emailSchema = new mongoose.Schema({
       email: {
         type: String,
         required: true,
         unique: true // 数据库层面约束邮箱唯一性
       }
     });
     module.exports = mongoose.model('Email', emailSchema);
     

  2. 将原路由代码移至新文件email.routes.js，并引用正确的模型：

     const express = require('express');
     const router = express.Router();
     const Email = require('./email.model'); // 引用独立模型文件
     // 原订阅、获取邮箱的路由代码保持不变
     module.exports = router;
     

  3. 在app.js中更新路由导入：

     const emailRoutes = require('./email.routes');
     app.use('/', emailRoutes);
     

• 简化Mongoose连接配置：Mongoose 6+版本已默认启用useNewUrlParser和useUnifiedTopology，可优化连接代码：

  mongoose.connect(process.env.MONGODB_URI)
    .then(() => console.log('MongoDB连接成功'))
    .catch(err => console.error('MongoDB连接失败:', err));
  

  同时确保.env文件中MONGODB_URI配置正确，本地示例：mongodb://localhost:27017/blogDB。

3. 其他优化点 #

• 精简Angular服务代码：HttpClient会自动为JSON请求设置Content-Type，可移除手动配置的头：

  subscribe(email: string): Observable<any> {
    const url = `${this.baseUrl}/subscribe`;
    return this.http.post(url, { email });
  }
  

• 增加前端用户反馈：在onSubmit中添加弹窗或文字提示，让用户直观知晓订阅结果，而非仅依赖控制台日志。
• 利用数据库唯一性约束：模型中设置email: { unique: true }，比代码查询更可靠地阻止重复邮箱插入。

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