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

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?

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

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.

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'));
});

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

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());

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();
    }
});

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

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();
});

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();
});

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 ..

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);

    });

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);

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();
}) 

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.

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
})

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 ...

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', '*');
});

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

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

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'));
});

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);

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 .

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();
});

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");
});

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.

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!

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.

/ * 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 /

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))
})

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