Zezwól na żądanie CORS REST do aplikacji Express / Node.js na Heroku

Napisałem REST API w ekspresowym frameworku dla node.js, który działa dla żądań z konsoli js w Chrome, paska adresu itp. Teraz próbuję sprawić, by działał dla żądań z innej aplikacji, na innej domeny (CORS).

Pierwsze żądanie, wykonane automatycznie przez interfejs użytkownika javascript, to / api / search? Uri = i wygląda na to, że nie powiodło się przy żądaniu OPTIONS „preflight”.

W mojej aplikacji ekspresowej dodaję nagłówki CORS przy użyciu:

var allowCrossDomain = function(req, res, next) {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
    res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization, Content-Length, X-Requested-With');

    // intercept OPTIONS method
    if ('OPTIONS' == req.method) {
      res.send(200);
    }
    else {
      next();
    }
};

i:

app.configure(function () {
  app.use(express.bodyParser());
  app.use(express.methodOverride());
  app.use(app.router);
  app.use(allowCrossDomain);
  app.use(express.static(path.join(application_root, "public")));
  app.use(express.errorHandler({ dumpExceptions: true, showStack: true }));
});

Z konsoli Chrome dostaję te nagłówki:

Adres URL żądania: http: //furious-night-5419.herokuapp.com/api/search? Uri = http% 3A% 2F% 2Flocalhost% 3A5000% 2Fcollections% 2F1% 2Fdocuments% 2F1

Metoda żądania: OPCJE

Kod stanu: 200 OK

Nagłówki żądań

Accept:*/*
Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Access-Control-Request-Headers:origin, x-annotator-auth-token, accept
Access-Control-Request-Method:GET
Connection:keep-alive
Host:furious-night-5419.herokuapp.com
Origin:http://localhost:5000
Referer:http://localhost:5000/collections/1/documents/1
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_4) AppleWebKit/536.5 (KHTML, like Gecko) Chrome/19.0.1084.56 Safari/536.5

Parametry ciągu zapytania

uri:http://localhost:5000/collections/1/documents/1

Nagłówki odpowiedzi

Allow:GET
Connection:keep-alive
Content-Length:3
Content-Type:text/html; charset=utf-8
X-Powered-By:Express

Czy to wygląda na brak odpowiednich nagłówków wysyłanych przez aplikację API?

Dzięki.

Sprawdziłem Twój kod w czystej aplikacji ExpressJS i działa dobrze.

Spróbuj przenieść się app.use(allowCrossDomain)na górę funkcji konfiguracji.

do obsługi plików cookie z danymi logowania potrzebna jest ta linia xhr.withCredentials = true;

mdn docs xhr.withCredentials

W Express Server dodaj ten blok przed wszystkimi innymi

`app.all('*', function(req, res, next) {
     var origin = req.get('origin'); 
     res.header('Access-Control-Allow-Origin', origin);
     res.header("Access-Control-Allow-Headers", "X-Requested-With");
     res.header('Access-Control-Allow-Headers', 'Content-Type');
     next();
});`

Dodam to jako odpowiedź tylko dlatego, że oryginalny post został umieszczony jako komentarz i jako taki został przez Ciebie przeoczony, kiedy pierwszy raz przeglądałem tę stronę.

Jak podkreśla @ConnorLeech w swoim komentarzu do zaakceptowanej odpowiedzi powyżej, istnieje bardzo przydatny pakiet npm o nazwie cors . Jego użycie jest tak proste, jak var cors = require('cors'); app.use(cors());(ponownie zaczerpnięte z odpowiedzi pana Leecha) i może być również stosowane w bardziej rygorystyczny, bardziej konfigurowalny sposób, jak opisano w ich dokumentach .

Warto też zwrócić uwagę, że pierwotny komentarz, o którym piszę powyżej, powstał w 2014 roku. Jest rok 2019 i patrząc na stronę github pakietu npm, repozytorium zostało zaktualizowane dopiero dziewięć dni temu.

Nie mogło tak być w przypadku większości osób przeglądających to pytanie, ale miałem dokładnie ten sam problem i rozwiązanie nie było związane CORS.

Okazuje się, że sekret JSON Web Token stringnie został zdefiniowany w zmiennych środowiskowych, więc token nie mógł zostać podpisany. Spowodowało to każde POSTżądanie, które polega na sprawdzeniu lub podpisaniu tokenu w celu uzyskania limitu czasu i zwrócenia 503błędu, informując przeglądarkę, że coś jest nie tak CORS, a nie. Dodanie zmiennej środowiskowej w Heroku rozwiązało problem.

Mam nadzieję, że to komuś pomoże.

Wykonaj poniższe kroki:

npm install cors --zapisz

W Twoim głównym pliku js:

 var express = require('express') 
 var cors = require('cors')
 var app = express()
 app.use(cors())