Express JS CORS, wenn über den Browser

Question

angefordert Während ein Express/NodeJS Backend - Ich habe eine REST-EMPFÄNGER, die verwendet wird, unter Verwendung von strava (Pass-strava)

zu authentifizieren, wenn ich rufe die API URL direkt (http://localhost:3000/api/auth/strava) - Die Verbindung ist erfolgreich und ich kann die Profilinformationen abrufen. Wenn dies jedoch über einen Browser-Widget aufgerufen wird, dh onClick einer HTML-Schaltfläche und weitergeleitet an das Backend durch - ich einen Fehler

XMLHttpRequest cannot load https://www.strava.com/oauth/authorize?response_type=code&redirect_uri=http%3A%2F%2Flocalhost%3A3000%2Fapi%2Fauth%2Fstrava%2Fcallback&client_id=9769. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. 

Ich verstehe geworfen bin, dass dies zu CORS verwendet ist und dass die Header "Access-Control-Allow-Origin" muss jedoch enthalten sein, es gibt keine Pause beim Hinzufügen dieser in den Header mit dem entsprechenden Wert.

Ich versuchte, die Anrufe mit Chrom abfangen: // net-internals zu überprüfen, ob Access-Control-Allow-Origin geführt wird gestrippt wird, und bemerkt die Veränderungen Anrufe -

Wenn direkt über das API genannt - die Anrufe als

1097271 URL_REQUEST http://localhost:3000/api/auth/strava 
1097273 DISK_CACHE_ENTRY http://localhost:3000/api/auth/strava 
1097275 HTTP_STREAM_JOB https://www.strava.com/ 
1097276 CONNECT_JOB ssl/www.strava.com:443 
1097277 CONNECT_JOB ssl/www.strava.com:443 
1097278 SOCKET ssl/www.strava.com:443 
1097279 CONNECT_JOB ssl/www.strava.com:443 
1097280 CONNECT_JOB ssl/www.strava.com:443 
1097281 SOCKET ssl/www.strava.com:443 
1097282 DISK_CACHE_ENTRY https://www.strava.com/oauth/authorize?response_type=code&redirect_uri=http%3A%2F%2Flocalhost%3A3000%2Fapi%2Fauth%2Fstrava%2Fcallback&client_id=9769 
1097283 HTTP_STREAM_JOB https://www.strava.com/ 
1097285 URL_REQUEST http://localhost:3000/api/auth/strava 
1097288 DISK_CACHE_ENTRY http://localhost:3000/api/auth/strava 
1097290 HTTP_STREAM_JOB https://www.strava.com/ 
1097291 DISK_CACHE_ENTRY https://www.strava.com/oauth/authorize?response_type=code&redirect_uri=http%3A%2F%2Flocalhost%3A3000%2Fapi%2Fauth%2Fstrava%2Fcallback&client_id=9769 
1097292 HTTP_STREAM_JOB https://www.strava.com/ 
1097293 DISK_CACHE_ENTRY http://localhost:3000/api/auth/strava/callback?state=&code=7b5722c72f079ee2ac5dfeb7d5140cdc6375f5cc 

jedoch folgt, wenn die Anrufe über das Widget geroutet sind als

1097337 URL_REQUEST http://localhost:3000/api/auth/strava 
1097339 DISK_CACHE_ENTRY http://localhost:3000/api/auth/strava 
1097344 URL_REQUEST https://www.strava.com/oauth/authorize?response_type=code&redirect_uri=http%3A%2F%2Flocalhost%3A3000%2Fapi%2Fauth%2Fstrava%2Fcallback&client_id=9769 
1097346 DISK_CACHE_ENTRY https://www.strava.com/oauth/authorize?response_type=code&redirect_uri=http%3A%2F%2Flocalhost%3A3000%2Fapi%2Fauth%2Fstrava%2Fcallback&client_id=9769 
1097347 HTTP_STREAM_JOB https://www.strava.com/ 
1097348 CONNECT_JOB pm/ssl/www.strava.com:443 
1097349 CONNECT_JOB pm/ssl/www.strava.com:443 
1097350 HOST_RESOLVER_IMPL_JOB www.strava.com 
1097352 SOCKET pm/ssl/www.strava.com:443 
1097353 CONNECT_JOB pm/ssl/www.strava.com:443 
1097354 SOCKET pm/ssl/www.strava.com:443 

der Unterschied ergibt sich, dass ich schien herauszuziehen ist der zusätzliche Anruf

1097344 URL_REQUEST https://www.strava.com/oauth/authorize?response_type=code&redirect_uri=http%3A%2F%2Flocalhost%3A3000%2Fapi%2Fauth%2Fstrava%2Fcallback&client_id=9769 

, die im vorherigen Szenario nicht gemacht wird.

Diese Beobachtungen werden nicht nur für das Pass-Strava-Paket, sondern auch für das Pass-Facebook-Paket gemacht. Daher denke ich, dass etwas ernsthaft falsch ist, dass ich tue, um in diesen Zustand zu kommen.

Jede Hilfe wird sehr geschätzt.

Answer 1

Da Sie bereits über CORS wissen, gehe ich in irgendwelche Details.

Grundsätzlich ist Ihr Problem mit Ihrem REST server, muss es die Header des Antwortpakets mit dem entsprechenden Inhalt festlegen, so dass der Browser nicht klagen. Leider ist dies eine Sicherheitsfunktion.

Also in Ihrem Server-Code, müssen Sie eine Funktion definieren, die das obige tun würde und setzen Sie es als 1 der Middleware-Ebene, die Express muss analysieren, wenn ein HTTP durchkommt.

Beispiel:

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

var httpAccessControlPolicy = function(req, res, next) { 
    res.setHeader('Access-Control-Allow-Origin', '*'); 
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE'); 
    res.setHeader('Access-Control-Allow-Headers', 'Content-type,Accept,X-Access-Token,X-Key,Authorization'); 
    res.setHeader('Access-Control-Allow-Credentials', false); 

    next(); 
}; 

app.use(httpAccessControlPolicy); 

Ja. Wie von 1 des Kommentators erwähnt, kann das npm Modul cors auch die Aufgabe erledigen.

CORS: https://www.npmjs.com/package/cors

Wenn Sie es beabsichtigen, dann verwenden Sie in diesem Beispiel für die Verwendung der Suche werden:

var express = require('express') 
    , cors = require('cors') 
    , app = express(); 

app.use(cors()); 

app.get('/products/:id', function(req, res, next){ 
    res.json({msg: 'This is CORS-enabled for all origins!'}); 
}); 

app.listen(80, function(){ 
    console.log('CORS-enabled web server listening on port 80'); 
});