Błąd Access-Control-Allow-Origin, własne API

Question

Zaczynam się uczyć Express.js i piszę bardzo proste api, które mi nie działa, wyrzuca błąd

Access to XMLHttpRequest at 'http://localhost:4000/' from origin 'http://localhost:3000' has been blocked by CORS policy: Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response.

Mimo iż dodałem linijkę 

res.set("Access-Control-Allow-Origin", "*");

Nie działa.

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

app.get('/', function (req, res, next) {
  res.set("Access-Control-Allow-Origin", "http://localhost:3000/");
  res.json({
    "status": "succes"
  })
})

app.listen(4000, function(){
  console.log('Listening')
})

obsługa na froncie: 

axios.get('http://localhost:4000/',{
    headers:{
      "Access-Control-Allow-Origin": 'http://localhost:3000'
  }
}).then(function (response){
    console.log(response);
})

 

Answer 1

W dokumentacji express'a nie widzę metody addHeader na obiekcie res (w konsoli Node'a powinien być błąd) - dla pewności spójrz w nagłówki odpowiedzi w devtoolsach przeglądarki (czy Access-Control-Allow-Origin jest ustawiony). Do ustawiania nagłówków odpowiedzi służą metody res.append i res.set.

Comments

Dla res.append i res.set to samo, błąd z konsoli 

Access to XMLHttpRequest at 'http://localhost:4000/' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

 

---

Teraz błąd jest inny. Dziwne, że dla zwykłego GET przeglądarka wysyła preflight request. Obstawiam, że w axios niepotrzebnie ustawiasz nagłówek "Access-Control-Allow-Origin": 'http://localhost:3000' (nagłówki dla CORS ustawia się po stronie serwera, a nie klienta) - przeglądarka może to traktować jako nie "prosty request". Oczywiście zostaw ten nagłówek w express-ie.

---

Wszystko działa, dzięki wielkie :)