如何修复我的 Express 应用程序上的“预检请求未通过访问控制检查：没有‘Access-Control-Allow-Origin’标头”警告？

Question

我正在制作一个二手书店网站，使用 Aiven 作为数据库并使用 Vercel 进行部署。它相当简单，因为它是一个学校项目，并且使用普通 JS。我试图从一些 API 中获取一些数据，但它们根本不起作用。

这是我的server.js

const express = require('express');
const mysql = require('mysql2');
const path = require('path');
const cors = require('cors');
const fs = require('fs');

const fetch = (...args) =>
    import("node-fetch").then(({ default: fetch }) => fetch(...args));

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

app.use(express.static(path.join(__dirname, 'public')));

app.get('/', (req, res) => {
    res.sendFile(path.join(__dirname, 'public', 'index.html'));
});

const corsOptions = {
    origin: 'http://localhost:3001', // Your frontend origin
    methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
    allowedHeaders: ['Content-Type', 'Authorization'],
};

app.use(cors(corsOptions));
require('dotenv').config();

const connection = mysql.createConnection({
    host: process.env.DB_HOST,
    user: process.env.DB_USER,
    password: process.env.DB_PASSWORD,
    database: process.env.DB_NAME,
    port: process.env.DB_PORT,
    ssl: {
        rejectUnauthorized: false,
        ca: fs.readFileSync(process.env.SSL_CA),
    },
});

console.log('Connecting to database:', {
    host: process.env.DB_HOST,
    user: process.env.DB_USER,
    database: process.env.DB_NAME,
    port: process.env.DB_PORT,
});

connection.connect(err => {
    if (err) {
        console.error('Database connection error:', err);
        return;
    }
    console.log('Connected to the database');
});

app.get('/test-db', (req, res) => {
    connection.query('SELECT 1', (err, results) => {
        if (err) {
            return res.status(500).json({ error: 'Database connection error' });
        }
        res.json({ message: 'Database is connected', results });
    });
});

app.get('/books', (req, res) => {
    const query = 'SELECT * FROM books';

    connection.query(query, (err, results) => {
        if (err) {
            return res.status(500).json({ error: 'Error fetching books' });
        }
        res.json(results);
    });
});


console.log('Database Host:', process.env.DB_HOST);
console.log('Database Name:', process.env.DB_NAME);

connection.connect(err => {
    if (err) {
        console.error('Database connection error:', err);
        return;
    }
    console.log('Connected to the database');
});

app.listen(PORT, () => {
    console.log(`Server is running on http://localhost:${PORT}`);
});

console.log('Using SSL CA file:', process.env.SSL_CA);
console.log('Reading CA:', fs.readFileSync(process.env.SSL_CA).toString());

app.use((req, res, next) => {
    console.log(`Incoming Request: ${req.method} ${req.url}`);
    console.log('Request Headers:', req.headers);
    next();
});

这是获取书籍的 html 文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inventory</title>
    <link rel="stylesheet" href="istyle.css">
</head>
<body>
    <div id="navbar">
        <img src="images/BookbackICON.png" alt="">
        <label class="hamburger-menu">
            <input type="checkbox" />
        </label>
        <aside class="sidebar">
            <nav>
                <a href="index.html">Home</a>
                <a href="inventory.html">Inventory</a>
            </nav>
        </aside>
    </div>
    <section id="sec1">
        <span id="search">
            <input type="text" id="search-input" placeholder="Search for a book by name">
            <button id="search-button">Search</button>
        </span>
        <ul id="book-list"></ul>
    </section>

    <script>
        
        let books = [];  
        let uniqueBooks = [];  
        let duplicateCounts = {};

        function deduplicateBooks(data) {
    const uniqueBooksMap = {};
    duplicateCounts = {};

    data.forEach(book => {
        const isbnFull = book.id.split('-')[0]; // Use the full ISBN without trimming the last 5 digits
        const grade = book.grade; // Get the grade

        const uniqueKey = `${isbnFull}-${grade}`;


        if (duplicateCounts[uniqueKey]) {
            duplicateCounts[uniqueKey]++;
        } else {
            duplicateCounts[uniqueKey] = 1;
            uniqueBooksMap[uniqueKey] = book; // Store unique book information
        }
    });


    return Object.values(uniqueBooksMap);
}

function fetchBooks() {
fetch('https://bookback-i1o4juwqu-mohammed-aayan-pathans-projects.vercel.app/books', {
    method: 'GET', // Change as needed
    headers: {
        'Content-Type': 'application/json', // Change as needed
        // Any other headers you might need
    },
    credentials: 'include', // Include this if your API requires credentials
})
.then(response => {
    if (!response.ok) {
        throw new Error('Network response was not ok: ' + response.statusText);
    }
    return response.json();
})
.then(data => {
    console.log('Fetched books:', data);
})
.catch(error => {
    console.error('Fetch error:', error);
});
}


        function displayBooks(booksToDisplay) {
            const bookList = document.getElementById('book-list');
            bookList.innerHTML = ''; // Clear the current list


            const listItems = [];

            booksToDisplay.forEach(book => {
    const isbn = book.id.split('-')[0]; // Extract full ISBN part
    const li = document.createElement('li');
    li.style.cursor = 'pointer'; // Change cursor to pointer for better UX

    fetch(`https://www.googleapis.com/books/v1/volumes?q=isbn:${isbn}`)
        .then(response => response.json())
        .then(bookData => {
            const img = document.createElement('img');
            img.style.borderRadius = '4px';
            const title = book.name || 'Title not available';

            // Handle Google Books data
            if (bookData.items && bookData.items.length > 0) {
                const bookInfo = bookData.items[0].volumeInfo;
                const imageLinks = bookInfo.imageLinks;
                const coverImage = imageLinks?.large || imageLinks?.medium || imageLinks?.thumbnail || 'https://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/No_image_available.svg/1200px-No_image_available.svg.png';
                img.src = coverImage;
            } else {
                img.src = `https://images-na.ssl-images-amazon.com/images/P/${isbn}.L.jpg`;
            }

            img.alt = title;
            img.style.maxWidth = '200px';  // Adjust the image size as needed

            // Handle price safely (fallback if not a number or missing)
            let priceDisplay = 'Price not available';
            if (book.price && !isNaN(book.price)) {
                priceDisplay = `AED ${parseFloat(book.price).toFixed(2)}`;
            }

            // Display the book information, title, image, and stock
            li.appendChild(img);
            li.appendChild(document.createTextNode(title));
            li.appendChild(document.createElement('br'));
            li.appendChild(document.createTextNode(`Grade: ${book.grade}`));
            li.appendChild(document.createElement('br'));
            li.appendChild(document.createTextNode(`${priceDisplay}`));

            // Fix the duplicate count display logic
            const countKey = `${book.id.split('-')[0]}-${book.grade}`;  
            const countDisplay = `No. in stock: ${duplicateCounts[countKey] || 1}`;
            li.appendChild(document.createElement('br'));
            li.appendChild(document.createTextNode(countDisplay));

            const isbnInfo = document.createElement('span');
            isbnInfo.textContent = `ISBN: ${book.id}`;
            isbnInfo.style.display = 'none'; // Hide it initially
            li.appendChild(isbnInfo); // Append the ISBN info to the list item


            li.onclick = (event) => {
                event.stopPropagation(); // Prevent click event from bubbling up to the document


                listItems.forEach(item => {
                    item.style.filter = 'none'; // Remove blur
                    const isbnSpan = item.querySelector('span');
                    if (isbnSpan) {
                        isbnSpan.style.display = 'none'; // Hide ISBN
                    }
                });


                if (isbnInfo.style.display === 'none') {
                    isbnInfo.style.display = 'inline'; // Show ISBN
                    li.style.height = 'auto'; // Expand the clicked item
                    li.style.filter = 'none'; // Remove blur from the clicked item
                } else {
                    isbnInfo.style.display = 'none'; // Hide ISBN
                }


                li.style.filter = 'none'; // Ensure the clicked item is not blurred
                listItems.forEach(item => {
                    if (item !== li) {
                        item.style.filter = 'blur(5px)'; // Blur the other items
                    }
                });
            };

            listItems.push(li); // Add the current item to the listItems array

            bookList.appendChild(li);
        })
        .catch(error => {
            console.error('Error fetching book image from Google:', error);


            const img = document.createElement('img');
            img.src = `https://images-na.ssl-images-amazon.com/images/P/${isbn}.L.jpg`; // Fallback Amazon image
            img.alt = 'No cover image available';
            img.style.maxWidth = '200px';  // Adjust the image size as needed


            let priceDisplay = 'Price not available';
            if (book.price && !isNaN(book.price)) {
                priceDisplay = `AED ${parseFloat(book.price).toFixed(2)}`;
            }

            li.appendChild(img);
            li.appendChild(document.createTextNode(` Title: ${book.name}, ISBN: ${book.id}, Grade: ${book.grade}, ${priceDisplay}`));
            bookList.appendChild(li);
        });
});


            document.addEventListener('click', () => {
                listItems.forEach(item => {
                    item.style.height = '260px'; // Reset height to auto
                    item.style.filter = 'none'; // Remove blur from all items
                    const isbnSpan = item.querySelector('span');
                    if (isbnSpan) {
                        isbnSpan.style.display = 'none'; // Hide ISBN
                    }
                });
            });
        }


        function searchBooks() {
            const searchTerm = document.getElementById('search-input').value.toLowerCase();
            const filteredBooks = uniqueBooks.filter(book => book.name.toLowerCase().includes(searchTerm));
            displayBooks(filteredBooks);
        }


        document.getElementById('search-button').addEventListener('click', searchBooks);


        fetchBooks();
    </script>
</body>`your text`
</html>

我尝试做各种事情来缓解这个问题，但这不会改变。如果您还需要什么，我会尽快提供。

Answer 1

当我们有预亮请求时，这意味着我们没有简单的请求！

什么是简单请求？ 某些请求不会触发 CORS 预检。这些被称为来自过时的 CORS 规范的简单请求，尽管 Fetch 规范（现在定义了 CORS）不使用该术语。

简单请求是满足以下所有条件的请求：

获取
头
发帖

Content-Type 标头中指定的媒体类型允许的唯一类型/子类型组合是：

application/x-www-form-urlencoded
多部分/表单数据
文本/纯文本

基于您的代码，

    headers: {
        'Content-Type': 'application/json', // Change as needed
        // Any other headers you might need
    },
    ```
your header used a json type, that this type make pre-flight.

如何修复我的 Express 应用程序上的“预检请求未通过访问控制检查：没有‘Access-Control-Allow-Origin’标头”警告？

问题描述投票：0回答：1

1个回答

最新问题

如何修复我的 Express 应用程序上的“预检请求未通过访问控制检查：没有‘Access-Control-Allow-Origin’标头”警告？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1