Perché l'aggiunta delle intestazioni CORS a una route OPTIONS non consente ai browser di accedere alla mia API?

Sto cercando di supportare CORS nella mia applicazione Node.js che utilizza il framework Web Express.js. Ho letto una discussione di gruppo di Google su come gestirlo e ho letto alcuni articoli su come funziona CORS. Innanzitutto, l'ho fatto (il codice è scritto nella sintassi CoffeeScript):

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

Non sembra funzionare. Sembra che il mio browser (Chrome) non stia inviando la richiesta OPTIONS iniziale. Quando ho appena aggiornato il blocco per la risorsa, devo inviare una richiesta GET tra origini a:

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

Funziona (in Chrome). Questo funziona anche in Safari.

Ho letto che ...

In un browser che implementa CORS, ogni richiesta GET o POST di origine incrociata è preceduta da una richiesta OPTIONS che controlla se GET o POST sono corretti.

Quindi la mia domanda principale è: come mai questo non sembra accadere nel mio caso? Perché il mio blocco app.options non viene chiamato? Perché devo impostare le intestazioni nel mio blocco app.get principale?

Per rispondere alla domanda principale, le specifiche CORS richiedono solo la chiamata OPTIONS per precedere il POST o GET se il POST o GET contiene contenuti o intestazioni non semplici.

I tipi di contenuto che richiedono una richiesta pre-volo CORS (la chiamata OPTIONS) sono qualsiasi tipo di contenuto tranne i seguenti :

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

Qualsiasi altro tipo di contenuto diverso da quelli sopra elencati attiverà una richiesta pre-volo.

Per quanto riguarda le intestazioni, tutte le intestazioni di richiesta oltre a quanto segue attiveranno una richiesta pre-volo:

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

Qualsiasi altra intestazione richiesta attiverà la richiesta pre-volo.

Quindi, è possibile aggiungere un'intestazione personalizzata come:, x-Trigger: CORSche dovrebbe attivare la richiesta pre-volo e premere il blocco OPTIONS.

Vedere Riferimento API Web MDN - Richieste preflight CORS

Ho trovato il modo più semplice è quello di usare il pacchetto Node.JS cors . L'utilizzo più semplice è:

var cors = require('cors')

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

Esistono, ovviamente, molti modi per configurare il comportamento in base alle proprie esigenze; la pagina collegata sopra mostra una serie di esempi.

Prova a passare il controllo al prossimo percorso corrispondente. Se Express corrisponde prima al percorso app.get, non continuerà sul percorso opzioni a meno che non lo faccia (nota l'uso del prossimo) :

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

    next();
});

In termini di organizzazione del materiale CORS, lo inserisco in un middleware che funziona bene per me:

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

Per rimanere nella stessa idea di routing. Io uso questo codice:

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

Simile all'esempio http://enable-cors.org/server_expressjs.html

fare

npm install cors --save

e aggiungi semplicemente queste righe nel tuo file principale dove va la tua richiesta (mantienila prima di qualsiasi percorso).

const cors = require('cors');
const express = require('express');
let app = express();
app.use(cors());
app.options('*', cors());

Ho creato un middleware più completo adatto per express o connect. Supporta le OPTIONSrichieste di verifica preliminare. Si noti che consentirà l'accesso CORS a qualsiasi cosa, si consiglia di effettuare alcuni controlli se si desidera limitare l'accesso.

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

installa il modulo cors di expressjs. puoi seguire questi passaggi>

Installazione

npm install cors

Utilizzo semplice (abilita tutte le richieste CORS)

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

per maggiori dettagli vai a https://github.com/expressjs/cors

Fai qualcosa del genere:

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

Test eseguiti con express + node + ionic running in porte diverse.

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

prima installa semplicemente cors nel tuo progetto. Prendi terminal (prompt dei comandi) e cdnella directory del progetto ed esegui il comando seguente:

npm install cors --save

Quindi prendere il file server.js e modificare il codice per aggiungere quanto segue in esso:

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

Questo ha funzionato per me ..

Questo funziona per me, in quanto è una facile implementazione all'interno delle rotte, sto usando meanjs e funziona bene, safari, chrome, ecc.

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

    });

Qualche tempo fa, ho riscontrato questo problema, quindi l'ho fatto per consentire CORS nella mia app nodejs:

Innanzitutto è necessario installare cors utilizzando il comando seguente:

npm install cors --save

Ora aggiungi il seguente codice al tuo file di avvio dell'app come ( 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);

Nel mio index.jsho aggiunto:

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

Se vuoi renderlo specifico per il controller, puoi usare:

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

Si noti che ciò consentirà anche iframe.

Può fare riferimento al codice seguente per lo stesso. Fonte: 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
})

La mia soluzione più semplice con Express 4.2.0 (EDIT: non sembra funzionare in 4.3.0) era:

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

Suppongo che anche app.all('/result', ...)farebbe ...

La risposta più semplice è usare semplicemente il pacchetto cors .

const cors = require('cors');

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

Ciò consentirà CORS su tutta la linea. Se vuoi imparare come abilitare CORS senza moduli esterni , tutto ciò di cui hai veramente bisogno è un middleware Express che imposta l' intestazione 'Access-Control-Allow-Origin' . Questo è il minimo necessario per consentire domini su richiesta incrociata da un browser al tuo server.

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

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

L'uso di Express Middleware funziona perfettamente per me. Se stai già utilizzando Express, aggiungi le seguenti regole del middleware. Dovrebbe iniziare a funzionare.

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

Riferimento

Di seguito ha funzionato per me, spero che aiuti qualcuno!

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

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

Ottenuto riferimento da https://expressjs.com/en/resources/middleware/cors.html#configuring-cors

Ho trovato estremamente facile farlo con il pacchetto di richiesta npm ( https://www.npmjs.com/package/request )

Quindi ho basato la mia soluzione su questo post 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 dattiloscritto, se si desidera utilizzare il pacchetto cors cors.js

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

Se non si desidera utilizzare librerie di terze parti per la gestione degli errori cors, è necessario modificare il metodo handleCORSErrors ().

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

Per l'utilizzo del file 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);

Questo è simile alla risposta di Pat con la differenza che finisco con res.sendStatus (200); invece di next ();

Il codice raccoglierà tutte le richieste del tipo di metodo OPTIONS e invierà le intestazioni di controllo dell'accesso.

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

Il codice accetta CORS da tutte le origini come richiesto nella domanda. Tuttavia, sarebbe meglio sostituire * con un'origine specifica, ad es. Http: // localhost: 8080 per evitare l'uso improprio.

Poiché utilizziamo il metodo app.options anziché il metodo app.use, non è necessario effettuare questo controllo:

req.method === 'OPTIONS'

che possiamo vedere in alcune delle altre risposte.

Ho trovato la risposta qui: http://johnzhang.io/options-request-in-express .

È possibile utilizzare il middleware Express, bloccare il dominio e i metodi.

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

Possiamo evitare CORS e inoltrare invece le richieste all'altro server:

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

Ho utilizzato i seguenti passaggi per la mia app Web e ho avuto successo:

Aggiungi il pacchetto cors a express:

npm install cors --save

Aggiungi le seguenti righe dopo la configurazione bodyParser . Ho avuto qualche problema con l'aggiunta prima di 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.

L'approccio più semplice è installare il modulo cors nel tuo progetto usando:

npm i --save cors

Quindi nel file del tuo server importalo usando il seguente:

import cors from 'cors';

Quindi utilizzalo semplicemente come middleware come questo:

app.use(cors());

Spero che sia di aiuto!

Se fossi in te @OP, cambierei il mio paradigma di programmazione.

supponendo che tu stia bloccando questi CORS perché stai facendo richieste a localhost o qualcosa di simile.

Alla fine, se hai intenzione di implementare optoin di produzione come Google Cloud Platformo Herokuo, non dovrai preoccuparti di CORS come consentire l'origine o qualsiasi altra cosa durante la produzione.

quindi durante il test del server basta usare postmane non si bloccherà CORS, dopodiché distribuire il server e quindi lavorare sul client.

/ * prima di tutto, e questo potrebbe essere il problema tra i giovani sviluppatori là fuori, come me: assicurati di usare "lambda" >>>> "` "e non" "nel tuo metodo di recupero ! * /

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

/ Inoltre, si consiglia vivamente il seguente articolo: https://developer.edamam.com/api/faq /

semplice è difficile:

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

Prova questo nel tuo file js principale:

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

Questo dovrebbe risolvere il tuo problema