Pourquoi l'ajout d'en-têtes CORS à une route OPTIONS ne permet-il pas aux navigateurs d'accéder à mon API?

J'essaie de prendre en charge CORS dans mon application Node.js qui utilise le cadre Web Express.js. J'ai lu une discussion de groupe Google sur la façon de gérer cela et lu quelques articles sur le fonctionnement de CORS. Tout d'abord, je l'ai fait (le code est écrit en syntaxe 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'
  # ...

Cela ne semble pas fonctionner. Il semble que mon navigateur (Chrome) n'envoie pas la demande OPTIONS initiale. Lorsque je viens de mettre à jour le bloc de la ressource, je dois soumettre une demande GET d'origine croisée à:

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

Cela fonctionne (dans Chrome). Cela fonctionne également dans Safari.

J'ai lu ça ...

Dans un navigateur implémentant CORS, chaque demande GET ou POST d'origine croisée est précédée d'une demande OPTIONS qui vérifie si le GET ou le POST est OK.

Donc, ma principale question est, comment se fait-il que cela ne semble pas se produire dans mon cas? Pourquoi mon bloc app.options n'est-il pas appelé? Pourquoi dois-je définir les en-têtes dans mon bloc app.get principal?

Pour répondre à votre question principale, la spécification CORS requiert uniquement l'appel OPTIONS pour précéder le POST ou GET si le POST ou GET contient un contenu ou des en-têtes non simples.

Les types de contenu qui nécessitent une demande de pré-vol CORS (l'appel OPTIONS) sont tout type de contenu, à l'exception des suivants :

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

Tout autre type de contenu en dehors de ceux énumérés ci-dessus déclenchera une demande de pré-vol.

En ce qui concerne les en-têtes, tout en-tête de demande en dehors des éléments suivants déclenchera une demande avant le vol:

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

Tout autre en-tête de demande déclenchera la demande de pré-vol.

Vous pouvez donc ajouter un en-tête personnalisé tel que: x-Trigger: CORS et cela devrait déclencher la demande de pré-vol et frapper le bloc OPTIONS.

Voir Référence de l'API Web MDN - Demandes de contrôle en amont CORS

J'ai trouvé la façon la plus simple est d'utiliser le package Node.js CORS . L'utilisation la plus simple est:

var cors = require('cors')

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

Il existe bien sûr de nombreuses façons de configurer le comportement selon vos besoins; la page liée ci-dessus montre un certain nombre d'exemples.

Essayez de passer le contrôle à la prochaine route correspondante. Si Express correspond d'abord à la route app.get, il ne continuera pas sur la route des options à moins que vous ne le fassiez (notez l'utilisation de la suivante) :

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

    next();
});

En termes d'organisation des trucs CORS, je l'ai mis dans un middleware qui fonctionne bien pour moi:

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

Pour rester dans la même idée de routage. J'utilise ce code:

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

Similaire à l' exemple http://enable-cors.org/server_expressjs.html

faire

npm install cors --save

et ajoutez simplement ces lignes dans votre fichier principal où va votre demande (conservez-la avant tout itinéraire).

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

J'ai réalisé un middleware plus complet adapté à l'express ou à la connexion. Il prend en charge les OPTIONSdemandes de contrôle en amont. Notez qu'il permettra à CORS d'accéder à tout, vous voudrez peut-être faire quelques vérifications si vous voulez limiter l'accès.

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

installer le module cors d'expressjs. vous pouvez suivre ces étapes>

Installation

npm install cors

Utilisation simple (activer toutes les demandes CORS)

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

pour plus de détails, rendez-vous sur https://github.com/expressjs/cors

Faites quelque chose comme ça:

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 effectué avec express + node + ionic fonctionnant dans différents ports.

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

installez simplement des cors dans votre projet. Prenez le terminal (invite de commande) et cdvotre répertoire de projet et exécutez la commande ci-dessous:

npm install cors --save

Prenez ensuite le fichier server.js et modifiez le code pour y ajouter les éléments suivants:

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

Cela a fonctionné pour moi ..

Cela fonctionne pour moi, car c'est une implémentation facile à l'intérieur des routes, j'utilise meanjs et son bon fonctionnement, safari, chrome, etc.

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

    });

Il y a quelque temps, j'ai rencontré ce problème, j'ai donc fait cela pour autoriser CORS dans mon application nodejs:

Vous devez d'abord installer cors en utilisant la commande ci-dessous:

npm install cors --save

Ajoutez maintenant le code suivant au fichier de démarrage de votre application comme ( 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);

Dans mon index.jsj'ai ajouté:

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

Si vous souhaitez le rendre spécifique au contrôleur, vous pouvez utiliser:

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

Veuillez noter que cela autorisera également les iframes.

Peut se référer au code ci-dessous pour la même chose. Source: 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
})

Ma solution la plus simple avec Express 4.2.0 (EDIT: ne semble pas fonctionner dans 4.3.0) était:

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

Je suppose que ça app.all('/result', ...)marcherait aussi ...

La réponse la plus simple est d'utiliser simplement le package cors .

const cors = require('cors');

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

Cela permettra à CORS dans tous les domaines. Si vous voulez apprendre à activer CORS sans modules externes , tout ce dont vous avez vraiment besoin est un middleware Express qui définit l'en -tête «Access-Control-Allow-Origin» . C'est le minimum dont vous avez besoin pour autoriser les domaines de demande croisée d'un navigateur à votre serveur.

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

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

L'utilisation d'Express Middleware me convient parfaitement. Si vous utilisez déjà Express, ajoutez simplement les règles de middleware suivantes. Il devrait commencer à fonctionner.

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

Référence

Ci-dessous a fonctionné pour moi, j'espère que cela aide quelqu'un!

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

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

Obtenu une référence de https://expressjs.com/en/resources/middleware/cors.html#configuring-cors

J'ai trouvé qu'il était extrêmement facile de le faire avec le package de demande npm ( https://www.npmjs.com/package/request )

Ensuite, j'ai basé ma solution sur ce 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'));
});

En dactylographie, si vous souhaitez utiliser le package node.js cors

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

Si vous ne souhaitez pas utiliser de bibliothèques tierces pour la gestion des erreurs cors, vous devez modifier la méthode 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;

Pour utiliser le fichier 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);

Ceci est similaire à la réponse de Pat avec la différence que je termine avec res.sendStatus (200); au lieu de next ();

Le code interceptera toutes les requêtes du type de méthode OPTIONS et renverra les en-têtes de contrôle d'accès.

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

Le code accepte CORS de toutes origines comme demandé dans la question. Cependant, il serait préférable de remplacer le * par une origine spécifique, par exemple http: // localhost: 8080 pour éviter les abus.

Puisque nous utilisons la méthode app.options au lieu de la méthode app.use, nous n'avons pas besoin de faire cette vérification:

req.method === 'OPTIONS'

que nous pouvons voir dans certaines des autres réponses.

J'ai trouvé la réponse ici: http://johnzhang.io/options-request-in-express .

Vous pouvez utiliser le middleware Express, bloquer votre domaine et vos méthodes.

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

Nous pouvons éviter CORS et transmettre les demandes à l'autre serveur à la place:

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

J'ai utilisé les étapes suivantes pour mon application Web et j'ai réussi:

Ajoutez le package cors à l'express:

npm install cors --save

Ajoutez les lignes suivantes après la configuration bodyParser . J'ai eu quelques problèmes à ajouter avant 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'approche la plus simple consiste à installer le module cors dans votre projet en utilisant:

npm i --save cors

Ensuite, dans votre fichier serveur, importez-le en utilisant ce qui suit:

import cors from 'cors';

Ensuite, utilisez-le simplement comme un middleware comme celui-ci:

app.use(cors());

J'espère que cela t'aides!

Si j'étais vous @OP, je changerais mon paradigme de programmation.

en supposant que vous obtenez ces CORS bloqués parce que vous faites des demandes à localhost ou quelque chose de similaire.

Finalement, si vous allez déployer des optoins de production comme Google Cloud Platformou Herokuou, vous n'aurez pas à vous soucier de CORS comme autoriser l'origine ou quoi que ce soit lorsqu'il est en production.

Ainsi, lors du test du serveur, utilisez simplement postmanet vous ne bloquerez pas CORS, après cela, déployez votre serveur et travaillez sur votre client.

/ * tout d'abord, et cela pourrait être le problème parmi les développeurs juniors, comme moi: assurez-vous d'utiliser "lambda" >>>> "` "et non" '"dans votre méthode de récupération ! * /

`` `réponse const = attendre fetch ( https://api....);

/ plus, l'article suivant est fortement recommandé: https://developer.edamam.com/api/faq /

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

Essayez ceci dans votre fichier js principal:

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

Cela devrait résoudre votre problème