Angular + Node.JS CORS 问题资源未加载

Question

我目前正在编写 Angular 作为前端，使用 Node.js 作为后端应用程序。

我遇到了图像和文本无法在除 Chrome 之外的其他浏览器中加载的问题。

电话和其他网络 PC 也不会加载资源，这都是由于 CORS 问题。

跨源请求被阻止：同源策略不允许读取 http://localhost:3000/api/news 上的远程资源。 （原因：CORS 标头“Access-Control-Allow-Origin”丢失）。状态代码：404

但是我的代码中确实有cors

const express = require('express');
const cors = require('cors');
const app = express();
const bcrypt = require('bcrypt');
const jwt = require('jsonwebtoken');
const sqlite3 = require('sqlite3').verbose();
const path = require('path'); // Required for serving static files
const PORT = process.env.PORT || 3000;

// Middleware for CORS and JSON parsing
app.use(cors({
    origin: 'http://localhost:4200', // Allow requests from your frontend
    methods: 'GET,POST,PUT,DELETE,OPTIONS',
    allowedHeaders: 'Content-Type,Authorization'
  }));

app.options('*', cors());
app.use(express.json()); // For parsing JSON bodies

const SECRET_KEY = 'your_secret_key'; // Replace with a secure key

// For static assets like images
app.use('/assets', express.static(path.join(__dirname, 'assets'), {
    setHeaders: (res) => {
      res.setHeader('Access-Control-Allow-Origin', 'http://localhost:4200');
    }
}));

app.use('/assets', express.static(path.join(__dirname, 'assets'), {
    setHeaders: (res, path, stat) => {
      res.setHeader('Access-Control-Allow-Origin', 'http://localhost:4200');
      res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
      res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
    }
}));

// Connect to the database with error logging
const db = new sqlite3.Database('./news_portal.db', (err) => {
  if (err) {
    console.error('Could not connect to database', err);
  } else {
    console.log('Connected to the SQLite database.');

我在 4200 中运行前端，在 3000 中运行后端

Answer 1

更换，

app.use(cors({
origin: 'http://localhost:4200', // Allow requests from your frontend
methods: 'GET,POST,PUT,DELETE,OPTIONS',
allowedHeaders: 'Content-Type,Authorization'

}））；

致，

app.use(cors());