👀 Views: 74 💬 Answers: 1 📅 Created: 2025-06-12

vue.js fetch-api cors JavaScript

I'm relatively new to this, so bear with me... Hey everyone, I'm running into an issue that's driving me crazy. I'm working on a Vue.js application and trying to send a POST request using the Fetch API to my backend server set up with Express. However, I'm running into a CORS-related scenario. The browser's console shows this behavior: `Access to fetch at 'http://localhost:3000/api/data' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status`. I've made sure to set up CORS on my Express server using the `cors` library. Here’s the relevant part of my server code: ```javascript const express = require('express'); const cors = require('cors'); const app = express(); app.use(cors()); app.use(express.json()); app.post('/api/data', (req, res) => { res.json({ message: 'Data received!' }); }); app.listen(3000, () => { console.log('Server running on port 3000'); }); ``` On the Vue.js side, my Fetch request looks like this: ```javascript fetch('http://localhost:3000/api/data', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ key: 'value' }), }) .then(response => response.json()) .then(data => console.log(data)) .catch(behavior => console.behavior('behavior:', behavior)); ``` I've tried adding various configurations to the CORS middleware, such as `app.use(cors({ origin: 'http://localhost:8080' }));`, but I still see the CORS behavior. I've also checked that the server is running and accessible from the browser. What could I be missing in my CORS setup that would cause the preflight OPTIONS request to unexpected result? Thanks in advance! I'd be grateful for any help.