Warum können Browser durch Hinzufügen von CORS-Headern zu einer OPTIONS-Route nicht auf meine API zugreifen?

653

Ich versuche, CORS in meiner Node.js-Anwendung zu unterstützen, die das Express.js-Webframework verwendet. Ich habe eine Google-Gruppendiskussion darüber gelesen, wie man damit umgeht, und einige Artikel darüber gelesen, wie CORS funktioniert. Zuerst habe ich dies getan (Code ist in CoffeeScript-Syntax geschrieben):

app.options "*", (req, res) ->
  res.header 'Access-Control-Allow-Origin', '*'
  res.header 'Access-Control-Allow-Credentials', true
  # try: 'POST, GET, PUT, DELETE, OPTIONS'
  res.header 'Access-Control-Allow-Methods', 'GET, OPTIONS'
  # try: 'X-Requested-With, X-HTTP-Method-Override, Content-Type, Accept'
  res.header 'Access-Control-Allow-Headers', 'Content-Type'
  # ...

Es scheint nicht zu funktionieren. Es scheint, dass mein Browser (Chrome) die erste OPTIONS-Anfrage nicht sendet. Wenn ich gerade den Block für die Ressource aktualisiert habe, muss ich eine originenspezifische GET-Anfrage senden an:

app.get "/somethingelse", (req, res) ->
  # ...
  res.header 'Access-Control-Allow-Origin', '*'
  res.header 'Access-Control-Allow-Credentials', true
  res.header 'Access-Control-Allow-Methods', 'POST, GET, PUT, DELETE, OPTIONS'
  res.header 'Access-Control-Allow-Headers', 'Content-Type'
  # ...

Es funktioniert (in Chrome). Dies funktioniert auch in Safari.

Ich habe das gelesen ...

In einem Browser, der CORS implementiert, geht jeder originalen GET- oder POST-Anforderung eine OPTIONS-Anforderung voraus, die prüft, ob GET oder POST in Ordnung ist.

Meine Hauptfrage ist also, warum scheint dies in meinem Fall nicht zu passieren? Warum wird mein app.options-Block nicht aufgerufen? Warum muss ich die Header in meinem Hauptblock app.get festlegen?

Mikong
quelle
2
Die goldene Regel von CoffeeScript lautet: "Es ist nur JavaScript".
SSH Dies ist der
Diese Antwort kann nützlich sein: stackoverflow.com/a/58064366/7059557
AmirReza-Farahlagha

Antworten:

185

Um Ihre Hauptfrage zu beantworten, muss in der CORS-Spezifikation der Aufruf OPTIONS nur vor dem POST oder GET stehen, wenn der POST oder GET nicht einfache Inhalte oder Überschriften enthält.

Inhaltstypen, für die eine CORS-Anforderung vor dem Flug erforderlich ist (der OPTIONS-Aufruf), sind alle Inhaltstypen mit Ausnahme der folgenden :

  1. application/x-www-form-urlencoded
  2. multipart/form-data
  3. text/plain

Alle anderen Inhaltstypen außer den oben aufgeführten lösen eine Anfrage vor dem Flug aus.

Bei Headern lösen alle Anforderungsheader außer den folgenden eine Anforderung vor dem Flug aus:

  1. Accept
  2. Accept-Language
  3. Content-Language
  4. Content-Type
  5. DPR
  6. Save-Data
  7. Viewport-Width
  8. Width

Alle anderen Anforderungsheader lösen die Anforderung vor dem Flug aus.

Sie können also einen benutzerdefinierten Header wie: hinzufügen x-Trigger: CORS, der die Anforderung vor dem Flug auslösen und den Block OPTIONS drücken soll.

Siehe MDN-Web-API-Referenz - CORS Preflighted-Anforderungen

Dobes Vandermeer
quelle
11
Können Sie ein Beispiel geben?
Glen Pierce
3
Die Seite, auf die ich verlinkt habe, scheint eine Reihe von Beispielen zu haben. Können Sie mir sagen, welches Beispiel Ihrer Meinung nach fehlt?
Dobes Vandermeer
7
Im Allgemeinen sind Nur-Link-Antworten jedoch fragil, da sie jederzeit unterbrochen werden können. Diese Antwort scheint jedoch insofern gut genug zu sein, als sie die allgemeinen Bedingungen hervorhebt, unter denen OPTIONSBlöcke nicht senden. Wäre schön, wenn es die Liste der akzeptierten HEADERSoder content-typeserforderlichen OPTIONSusw. hätte, aber es ist ein guter Anfang
dwanderson
668

Ich fand den einfachsten Weg, das Paket cors von node.js zu verwenden . Die einfachste Verwendung ist:

var cors = require('cors')

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

Es gibt natürlich viele Möglichkeiten, das Verhalten an Ihre Bedürfnisse anzupassen. Die oben verlinkte Seite zeigt eine Reihe von Beispielen.

Wayne Maurer
quelle
1
Es schlägt für mich fehl, wenn ich es mit Anmeldeinformationen verwende. :( Alles andere hat wie ein Zauber funktioniert. Aber es nützt mir nichts, wenn es fehlschlägt, wenn die Anmeldeinformationen auf wahr gesetzt sind
Sambhav Sharma
Es funktioniert gut für Ajax-Anfrage. Ich möchte eine CORS-Implementierung für Skript-Tags und iFrame, da in diesen Anforderungen der Ursprung nicht im Anforderungsheader vorhanden ist :( Wie wird dies implementiert?
akashPatra
59
Sie müssen auchcors({credentials: true, origin: true})
Nlawson
2
Wie aktivieren Sie hier Optionen Preflight?
Chovy
@ Lawson ahh Du hast mich gerettet
Adrin
446

Versuchen Sie, die Kontrolle an die nächste passende Route weiterzugeben. Wenn Express zuerst mit app.get route übereinstimmt, wird die Optionsroute erst fortgesetzt, wenn Sie dies tun (beachten Sie die Verwendung von next) :

app.get('somethingelse', function(req, res, next) {
    //..set headers etc.

    next();
});

In Bezug auf die Organisation des CORS-Materials habe ich es in eine Middleware gesteckt, die für mich gut funktioniert:

//CORS middleware
var allowCrossDomain = function(req, res, next) {
    res.header('Access-Control-Allow-Origin', 'example.com');
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
    res.header('Access-Control-Allow-Headers', 'Content-Type');

    next();
}

//...
app.configure(function() {
    app.use(express.bodyParser());
    app.use(express.cookieParser());
    app.use(express.session({ secret: 'cool beans' }));
    app.use(express.methodOverride());
    app.use(allowCrossDomain);
    app.use(app.router);
    app.use(express.static(__dirname + '/public'));
});
böser Schmuck
quelle
1
Ich glaube, OPTIONEN passieren vor einem GET, während, wenn Sie einen POST machen - es gibt keine OPTIONS-Anfrage ...
Nick
21
Ist config.allowedDomainseine durch Kommas getrennte Zeichenfolge oder ein Array?
Pixelfreak
2
config.allowedDomains sollte ein durch Leerzeichen getrenntes Array sein
mcfedr
1
Die zusätzliche Sitzung wurde durch einfaches Neuanordnen der Express-Middleware-Reihenfolge entfernt. In einem anderen Punkt braucht dies etwas mehr Sicherheit. Wenn sich der Ursprung nicht in der zulässigen Domäne befindet, wird die Anforderung weiterhin verarbeitet. Nur der Browser kann sie nicht sehen und der Ursprung kann gefälscht werden. Mein Rat wäre, eine Überprüfung durchzuführen, und wenn der Ursprung nicht in der zulässigen Liste enthalten ist, geben Sie sofort 403 zurück. Wenn vertrauliche Informationen bereitgestellt werden, überprüfen Sie den Benutzer über eine Sitzung.
Xerri
1
@mcfedr Könnten Sie bitte erklären, was Sie unter einem durch Leerzeichen getrennten Array verstehen?
Pootzko
116

In der gleichen Idee des Routings bleiben. Ich benutze diesen Code:

app.all('/*', function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "X-Requested-With");
  next();
});

Ähnlich wie im Beispiel http://enable-cors.org/server_expressjs.html

Lialon
quelle
1
Dies geht in die Datei grunt.js?
Oliver Dixon
4
Was ist mit Preflight?
Backdesk
Nein @OliverDixon, dies ist auf der Serverseite
Alexandre Magno Teles Zimerer
84

tun

npm install cors --save

und fügen Sie einfach diese Zeilen in Ihre Hauptdatei ein, in die Ihre Anfrage geht (bewahren Sie sie vor jeder Route auf).

const cors = require('cors');
const express = require('express');
let app = express();
app.use(cors());
app.options('*', cors());
Yatender Singh
quelle
3
app.options('*', cors())// vor anderen Routen einschließen
Rajeshwar
52

Ich habe eine vollständigere Middleware erstellt, die für Express oder Connect geeignet ist. Es unterstützt OPTIONSAnfragen zur Preflight-Prüfung. Beachten Sie, dass CORS dadurch auf alles zugreifen kann. Möglicherweise möchten Sie einige Überprüfungen durchführen, wenn Sie den Zugriff einschränken möchten.

app.use(function(req, res, next) {
    var oneof = false;
    if(req.headers.origin) {
        res.header('Access-Control-Allow-Origin', req.headers.origin);
        oneof = true;
    }
    if(req.headers['access-control-request-method']) {
        res.header('Access-Control-Allow-Methods', req.headers['access-control-request-method']);
        oneof = true;
    }
    if(req.headers['access-control-request-headers']) {
        res.header('Access-Control-Allow-Headers', req.headers['access-control-request-headers']);
        oneof = true;
    }
    if(oneof) {
        res.header('Access-Control-Max-Age', 60 * 60 * 24 * 365);
    }

    // intercept OPTIONS method
    if (oneof && req.method == 'OPTIONS') {
        res.send(200);
    }
    else {
        next();
    }
});
mcfedr
quelle
Hallo, ich bin auf Ihre Lösung gestoßen und habe mich gefragt, ob das Flag 'oneof' auf false gesetzt werden soll, wenn einer der Header nicht erkannt wurde.
Leonidas
1
Einige Anforderungen enthalten nicht alle Header. Insbesondere wird eine GET-Anforderung vom Browser gesendet, und wenn keine korrekte Antwort auf den zulässigen Ursprung angezeigt wird, wird js ein Fehler gemeldet. Während für eine POST-Anforderung die OPTIONS-Anforderung zuerst mit dem Header der Zulassungsmethode gesendet wird, wird erst danach die eigentliche POST-Anforderung gesendet.
McFedr
1
Ah ich sehe. Vielen Dank. Haben Sie jemals Probleme bekommen, indem Sie res.send (200) nicht dort eingefügt haben, wenn die req-Methode 'options' war?
Leonidas
Ich glaube nicht, dass ich versucht habe, etwas anderes zu senden. Ich würde mir vorstellen, dass jede andere Antwort dazu führt, dass der Browser die Anfrage ablehnt, dass es sich um einen Preflight handelt.
mcfedr
funktioniert wie Charme, ich würde nur eine Liste der autorisierten Domains für mehr Sicherheit hinzufügen
Sebastien H.
37

Installieren Sie das cors-Modul von expressjs. Sie können diese Schritte ausführen>

Installation

npm install cors

Einfache Verwendung (Alle CORS-Anfragen aktivieren)

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

Weitere Informationen finden Sie unter https://github.com/expressjs/cors

rahuL islam
quelle
2
TypeError: Cannot read property 'headers' of undefinedDas grundlegendste App-Setup.
Oliver Dixon
Sind Sie sicher, dass Sie ein Anforderungsobjekt haben? :)
Code-
33

Mach so etwas:

app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
});
Russ
quelle
20

Tests werden mit Express + Node + Ionic durchgeführt, die in verschiedenen Ports ausgeführt werden.

Localhost:8100

Localhost:5000

// CORS (Cross-Origin Resource Sharing) headers to support Cross-site HTTP requests

app.all('*', function(req, res, next) {
       res.header("Access-Control-Allow-Origin", "*");
       res.header("Access-Control-Allow-Headers", "X-Requested-With");
       res.header('Access-Control-Allow-Headers', 'Content-Type');
       next();
});
Daniel Laurindo
quelle
2
In welcher Datei müssen wir diese Zeilen hinzufügen?
Shefalee Chaudhary
20

Installieren Sie zunächst einfach cors in Ihrem Projekt. Nehmen Sie das Terminal (Eingabeaufforderung) und cdin Ihr Projektverzeichnis und führen Sie den folgenden Befehl aus:

npm install cors --save

Nehmen Sie dann die Datei server.js und ändern Sie den Code, um Folgendes hinzuzufügen:

var cors = require('cors');


var app = express();

app.use(cors());

app.use(function(req, res, next) {
   res.header("Access-Control-Allow-Origin", "*");
   res.header('Access-Control-Allow-Methods', 'DELETE, PUT, GET, POST');
   res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
   next();
});

Das hat bei mir funktioniert ..

Reneesh TK
quelle
4
Sie brauchen nicht, corswenn Sie das res.headerZeug machen. corsist eine Bibliothek, die all das für Sie erledigt. Löschen Sie Ihre erste und dritte Zeile (AKA alles mit cors) und Sie werden feststellen, dass es immer noch funktioniert.
Thisissami
Zum Teufel, ich bin mir ziemlich sicher, dass alles, was Sie wirklich brauchen, diese Zeile istres.header("Access-Control-Allow-Origin", "*");
thisissami
Denken Sie jedoch daran, dass Sie dadurch Ihre Sicherheit gefährden. :)
thisissami
10

Dies funktioniert für mich, da es eine einfache Implementierung innerhalb der Routen ist, ich verwende meanjs und es funktioniert gut, Safari, Chrom usw.

app.route('/footer-contact-form').post(emailer.sendFooterMail).options(function(req,res,next){ 
        res.header('Access-Control-Allow-Origin', '*'); 
        res.header('Access-Control-Allow-Methods', 'GET, POST');
        res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
        return res.send(200);

    });
Kiko Seijo
quelle
10

Vor einiger Zeit war ich mit diesem Problem konfrontiert und habe dies getan, um CORS in meiner nodejs-App zuzulassen:

Zuerst müssen Sie mit dem folgenden Befehl installieren cors :

npm install cors --save

Fügen Sie nun den folgenden Code zu Ihrer App-Startdatei hinzu, z. B. ( app.js or server.js)

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

var cors = require('cors');
var bodyParser = require('body-parser');

//enables cors
app.use(cors({
  'allowedHeaders': ['sessionId', 'Content-Type'],
  'exposedHeaders': ['sessionId'],
  'origin': '*',
  'methods': 'GET,HEAD,PUT,PATCH,POST,DELETE',
  'preflightContinue': false
}));

require('./router/index')(app);
Shubham Verma
quelle
versuchte dies nach der Installation von cors. Cors ist keine Funktion
Colin Rickels
9

In meinem habe index.jsich hinzugefügt:

app.use((req, res, next) => {
   res.header("Access-Control-Allow-Origin", "*");
   res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
   res.header("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
   next();
}) 
Balaj Khan
quelle
2
Ich sollte kommentieren, dass dies Access-Control-Allow-Origin = *bedeutet, dass Sie keine Cookies an den Server senden können. Sie werden von der CORS-Richtlinie abgelehnt - Quelle: developer.mozilla.org/en-US/docs/Web/HTTP/… . Verwenden Sie dies also nicht, wenn Sie Cookies verwenden möchten.
Eksapsy
7

Wenn Sie den Controller spezifisch machen möchten, können Sie Folgendes verwenden:

res.setHeader('X-Frame-Options', 'ALLOWALL');
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'POST, GET');
res.setHeader('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');

Bitte beachten Sie, dass dies auch Iframes erlaubt.

Koray Gocmen
quelle
6

Kann den Code unten für das gleiche beziehen. Quelle: Academind / node-restful-api

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

//acts as a middleware
//to handle CORS Errors
app.use((req, res, next) => { //doesn't send response just adjusts it
    res.header("Access-Control-Allow-Origin", "*") //* to give access to any origin
    res.header(
        "Access-Control-Allow-Headers",
        "Origin, X-Requested-With, Content-Type, Accept, Authorization" //to give access to all the headers provided
    );
    if(req.method === 'OPTIONS'){
        res.header('Access-Control-Allow-Methods', 'PUT, POST, PATCH, DELETE, GET'); //to give access to all the methods provided
        return res.status(200).json({});
    }
    next(); //so that other routes can take over
})
Gadhia Reema
quelle
Ich habe viele Antworten gesehen und diese haben etwas Wichtiges. Ich habe versucht, diesen Teil des Codes nach einigen anderen Konfigurationen zu verwenden und es hat nicht funktioniert. Aus irgendeinem Grund habe ich versucht, den Code nach der App zu setzen const app = express();und funktioniert! Ich denke, es ist wichtig, es zu erwähnen.
Rfcabal
4

Meine einfachste Lösung mit Express 4.2.0 (BEARBEITEN: Scheint in 4.3.0 nicht zu funktionieren) war:

function supportCrossOriginScript(req, res, next) {
    res.status(200);
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Content-Type");

    // res.header("Access-Control-Allow-Headers", "Origin");
    // res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    // res.header("Access-Control-Allow-Methods","POST, OPTIONS");
    // res.header("Access-Control-Allow-Methods","POST, GET, OPTIONS, DELETE, PUT, HEAD");
    // res.header("Access-Control-Max-Age","1728000");
    next();
}

// Support CORS
app.options('/result', supportCrossOriginScript);

app.post('/result', supportCrossOriginScript, function(req, res) {
    res.send('received');
    // do stuff with req
});

Ich nehme an, das app.all('/result', ...)würde auch funktionieren ...

Klopfen
quelle
3

Die einfachste Antwort ist, einfach das cors-Paket zu verwenden .

const cors = require('cors');

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

Dadurch wird CORS auf ganzer Linie aktiviert. Wenn Sie lernen möchten, wie Sie CORS ohne externe Module aktivieren , benötigen Sie lediglich eine Express-Middleware , die den Header "Access-Control-Allow-Origin" festlegt . Dies ist das Minimum, das Sie benötigen, um Cross-Request-Domains von einem Browser auf Ihren Server zuzulassen.

app.options('*', (req, res) => {
  res.set('Access-Control-Allow-Origin', '*');
  res.send('ok');
});

app.use((req, res) => {
  res.set('Access-Control-Allow-Origin', '*');
});
vkarpov15
quelle
2

Die Verwendung von Express Middleware funktioniert für mich hervorragend. Wenn Sie Express bereits verwenden, fügen Sie einfach die folgenden Middleware-Regeln hinzu. Es sollte anfangen zu arbeiten.

app.all("/api/*", function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Cache-Control, Pragma, Origin, Authorization, Content-Type, X-Requested-With");
  res.header("Access-Control-Allow-Methods", "GET, PUT, POST");
  return next();
});

app.all("/api/*", function(req, res, next) {
  if (req.method.toLowerCase() !== "options") {
    return next();
  }
  return res.send(204);
});

Referenz

Ishan Patel
quelle
2

Unten hat es für mich funktioniert, hoffe es hilft jemandem!

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

app.use(cors({ origin: true }));

Referenz von https://expressjs.com/en/resources/middleware/cors.html#configuring-cors

Vatsal Shah
quelle
In welche Datei geht das? peanutbutter.js?
Andrew Koper
Ich bin mir nicht sicher über peanutbutter.js, für mich ist es express.js. Grundsätzlich sollte es die Datei sein, in der Sie Ihre Express-App benötigen, sie initialisieren und Routendateien benötigen.
Vatsal Shah
1

Ich fand es extrem einfach, dies mit dem npm-Anforderungspaket ( https://www.npmjs.com/package/request) zu tun )

Dann habe ich meine Lösung auf diesen Beitrag gestützt http://blog.javascripting.com/2015/01/17/dont-hassle-with-cors/

'use strict'

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

let proxyConfig = {
    url : {
        base: 'http://servertoreach.com?id=',
    }
}

/* setting up and configuring node express server for the application */
let server = express();
server.set('port', 3000);


/* methods forwarded to the servertoreach proxy  */
server.use('/somethingElse', function(req, res)
{
    let url = proxyConfig.url.base + req.query.id;
    req.pipe(request(url)).pipe(res);
});


/* start the server */
server.listen(server.get('port'), function() {
    console.log('express server with a proxy listening on port ' + server.get('port'));
});
melvinv
quelle
1

In Typoskript, wenn Sie das Paket node.js cors verwenden möchten

/**
* app.ts
* If you use the cors library
*/

import * as express from "express";
[...]
import * as cors from 'cors';

class App {
   public express: express.Application;

   constructor() {
       this.express = express();
       [..]
       this.handleCORSErrors();
   }

   private handleCORSErrors(): any {
       const corsOptions: cors.CorsOptions = {
           origin: 'http://example.com',
           optionsSuccessStatus: 200
       };
       this.express.use(cors(corsOptions));
   }
}

export default new App().express;

Wenn Sie keine Bibliotheken von Drittanbietern für die Behandlung von Cors-Fehlern verwenden möchten, müssen Sie die Methode handleCORSErrors () ändern.

/**
* app.ts
* If you do not use the cors library
*/

import * as express from "express";
[...]

class App {
   public express: express.Application;

   constructor() {
       this.express = express();
       [..]
       this.handleCORSErrors();
   }

   private handleCORSErrors(): any {
       this.express.use((req, res, next) => {
           res.header("Access-Control-Allow-Origin", "*");
           res.header(
               "Access-Control-ALlow-Headers",
               "Origin, X-Requested-With, Content-Type, Accept, Authorization"
           );
           if (req.method === "OPTIONS") {
               res.header(
                   "Access-Control-Allow-Methods",
                   "PUT, POST, PATCH, GET, DELETE"
               );
               return res.status(200).json({});
           } 
           next(); // send the request to the next middleware
       });
    }
}

export default new App().express;

Zur Verwendung der Datei app.ts.

/**
* server.ts
*/
import * as http from "http";
import app from "./app";

const server: http.Server = http.createServer(app);

const PORT: any = process.env.PORT || 3000;
server.listen(PORT);
Überwinder
quelle
1
"Wenn der Server in Typoskript geschrieben ist" - ist es nicht. Die Frage besagt, dass es in CoffeeScript geschrieben ist.
Quentin
1
@ Quentin Ich wollte nur eine Alternative in Typoskript zeigen, in der Hoffnung, dass dies jemandem helfen könnte.
Überwinder
1

Dies ähnelt Pats Antwort mit dem Unterschied, dass ich mit res.sendStatus (200) fertig bin. statt next ();

Der Code fängt alle Anforderungen des Methodentyps OPTIONS ab und sendet Access-Control-Header zurück.

app.options('/*', (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');
    res.sendStatus(200);
});

Der Code akzeptiert CORS aller Herkunft, wie in der Frage gefordert. Es ist jedoch besser, das * durch einen bestimmten Ursprung zu ersetzen, z. B. http: // localhost: 8080 , um Missbrauch zu verhindern.

Da wir die app.options-Methode anstelle der app.use-Methode verwenden, müssen wir diese Prüfung nicht durchführen:

req.method === 'OPTIONS'

was wir in einigen der anderen Antworten sehen können.

Ich fand die Antwort hier: http://johnzhang.io/options-request-in-express .

Swoot
quelle
1

Sie können Express-Middleware verwenden, Ihre Domain und Methoden blockieren.

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", process.env.DOMAIN); // update to match the domain you will make the request from
  res.header("Access-Control-Allow-Methods", "GET,PUT,POST,DELETE");
  res.header(
    "Access-Control-Allow-Headers",
    "Origin, X-Requested-With, Content-Type, Accept"
  );
  next();
});
Ankit Kumar Rajpoot
quelle
Das hat mir bei meinem Problem geholfen, danke!
Fr0zenOfficial
0

Wir können CORS vermeiden und die Anforderungen stattdessen an den anderen Server weiterleiten:

// config:
var public_folder = __dirname + '/public'
var apiServerHost = 'http://other.server'

// code:
console.log("starting server...");

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

// serve static files
app.use(express.static(public_folder));

// if not found, serve from another server
app.use(function(req, res) {
    var url = apiServerHost + req.url;
    req.pipe(request(url)).pipe(res);
});

app.listen(80, function(){
    console.log("server ready");
});
Bernardo Ramos
quelle
1
Dies beantwortet nicht die gestellte Frage
david.barkhuizen
0

Ich habe die folgenden Schritte für meine Web-App ausgeführt und hatte Erfolg:

Fügen Sie das cors-Paket zum Express hinzu:

npm install cors --save

Fügen Sie nach der bodyParser-Konfiguration die folgenden Zeilen hinzu . Ich hatte einige Probleme beim Hinzufügen vor bodyParser:

 // enable cors to the server
const corsOpt = {
    origin: process.env.CORS_ALLOW_ORIGIN || '*', // this work well to configure origin url in the server
    methods: ['GET', 'PUT', 'POST', 'DELETE', 'OPTIONS'], // to works well with web app, OPTIONS is required
    allowedHeaders: ['Content-Type', 'Authorization'] // allow json and token in the headers
};
app.use(cors(corsOpt)); // cors for all the routes of the application
app.options('*', cors(corsOpt)); // automatic cors gen for HTTP verbs in all routes, This can be redundant but I kept to be sure that will always work.
Engelo Polotto
quelle
0

Am einfachsten ist es, das cors-Modul in Ihrem Projekt zu installieren, indem Sie Folgendes verwenden:

npm i --save cors

Importieren Sie es dann in Ihre Serverdatei wie folgt:

import cors from 'cors';

Verwenden Sie es dann einfach als Middleware wie folgt:

app.use(cors());

Hoffe das hilft!

Harshit Agarwal
quelle
0

Wenn ich Sie @OP wäre, würde ich mein Programmierparadigma ändern.

Angenommen, Sie blockieren diese CORS, weil Sie Anfragen an localhost oder ähnliches richten.

Wenn Sie in der Produktion Optoins wie Google Cloud Platformoder Herokuoder bereitstellen möchten , müssen Sie sich keine Gedanken über CORS machen, z. B. Herkunft zulassen oder was auch immer, wenn Sie in der Produktion sind.

Wenn Sie den Server testen, verwenden postmanSie ihn einfach und Sie werden CORS nicht blockieren. Stellen Sie anschließend Ihren Server bereit und arbeiten Sie dann an Ihrem Client.

Maddocks
quelle
0

/ * Zuallererst, und dies könnte das Problem bei Junior-Entwicklern da draußen sein, wie ich selbst: Stellen Sie sicher, dass Sie "Lambda" >>>> "` "und nicht" '"in Ihrem Abruf verwenden verwenden! * /

`` `const response = warte auf fetch ( https://api....);

/ plus, der folgende Artikel wird dringend empfohlen: https://developer.edamam.com/api/faq /

mila kohen
quelle
0

einfach ist schwer:

 let my_data = []
const promise = new Promise(async function (resolve, reject) {
    axios.post('https://cors-anywhere.herokuapp.com/https://maps.googleapis.com/maps/api/directions/json?origin=33.69057660000001,72.9782724&destination=33.691478,%2072.978594&key=AIzaSyApzbs5QDJOnEObdSBN_Cmln5ZWxx323vA'
        , { 'Origin': 'https://localhost:3000' })
        .then(function (response) {
            console.log(`axios response ${response.data}`)
            const my_data = response.data
            resolve(my_data)
        })
        .catch(function (error) {
            console.log(error)
            alert('connection error')
        })
})
promise.then(data => {
    console.log(JSON.stringify(data))
})
Rashid Iqbal
quelle
0

Versuchen Sie dies in Ihrer Haupt-JS-Datei:

app.use((req, res, next) => {
res.header("Access-Control-Allow-Origin", "*");
res.header(
  "Access-Control-Allow-Headers",
  "Authorization, X-API-KEY, Origin, X-Requested-With, Content-Type, Accept, Access-Control-Allow-Request-Method"
);
res.header("Access-Control-Allow-Methods", "GET, POST, OPTIONS, PUT, DELETE");
res.header("Allow", "GET, POST, OPTIONS, PUT, DELETE");
next();
});

Dies sollte Ihr Problem lösen

Enzo Barrera
quelle