Access-Control-Allow-Origin header is present, but I'm still gettings CORS errors

Question

I'm trying to make a GET request to an express server, and I'm getting the error: "Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:3002/hey. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing)"

On the frontend

fetch('http://localhost:3002/hey', {
        method: "GET", 
        headers: {
            'Access-Control-Allow-Origin': 'http://localhost:3000'
        }
    })
    .then(response => response.text())
    .then(data => {
        console.log(data);
        this.setState({ apiResponse: data })
    });

And on the backend

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

app.use(cors());

app.listen(3002, () => {
    console.log('server is running on port 3002');
})

app.get('/hey', (req, res, next) => {
    res.send('ho');
})

It's the server that should send the `Access-Control-Allow-Origin` header. — jannis, Jul 11 '20 at 23:52

score 0 · Answer 1 · answered Jul 12 '20 at 00:22

HTTP has requests and responses.

A request is on a high level:

URI
Method
Headers
Body

A response is generally:

Status
Headers
Body

You are sending a Access-Control-Allow-Origin header on the client, in the request. This header needs to be sent by the server, in the response.

Access-Control-Allow-Origin header is present, but I'm still gettings CORS errors

1 Answers1