Dlaczego dodanie nagłówków CORS do trasy OPTIONS nie pozwala przeglądarkom na dostęp do mojego interfejsu API?

Usiłuję obsługiwać CORS w mojej aplikacji Node.js korzystającej z frameworka internetowego Express.js. Przeczytałem dyskusję grupy Google na temat tego, jak sobie z tym poradzić i przeczytałem kilka artykułów o tym, jak działa CORS. Najpierw zrobiłem to (kod jest napisany w składni 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'
  # ...

Wydaje się, że to nie działa. Wygląda na to, że moja przeglądarka (Chrome) nie wysyła początkowego żądania OPTIONS. Kiedy właśnie zaktualizowałem blok zasobu, muszę przesłać żądanie GET krzyżowania do:

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

Działa (w Chrome). Działa to również w przeglądarce Safari.

Przeczytałem, że ...

W przeglądarce implementującej CORS każde żądanie GET lub POST pochodzące z różnych źródeł poprzedza żądanie OPTIONS, które sprawdza, czy GET lub POST jest w porządku.

Więc moje główne pytanie brzmi: dlaczego tak się nie dzieje w moim przypadku? Dlaczego mój blok app.options nie jest wywoływany? Dlaczego muszę ustawić nagłówki w głównym bloku app.get?

Aby odpowiedzieć na twoje główne pytanie, specyfikacja CORS wymaga tylko wywołania OPTIONS poprzedzającego POST lub GET, jeśli POST lub GET zawiera nie-prostą treść lub nagłówki.

Typy treści, które wymagają żądania CORS przed lotem (wywołanie OPTIONS), to dowolne typy treści, z wyjątkiem następujących :

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

Wszelkie inne typy treści oprócz wymienionych powyżej spowodują żądanie przed lotem.

Jeśli chodzi o Nagłówki, wszelkie Nagłówki Żądania oprócz poniższych wywołują żądanie przed lotem:

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

Wszelkie inne nagłówki żądań wywołają żądanie poprzedzające lot.

Możesz więc dodać niestandardowy nagłówek, taki jak x-Trigger: CORS:, który powinien wywołać żądanie przed lotem i nacisnąć blok OPCJE.

Zobacz MDN Web API Reference - CORS Wstępnie sprawdzone żądania

Uważam, że najprostszym sposobem jest użycie node.js pakiet Cors . Najprostsze użycie to:

var cors = require('cors')

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

Istnieje oczywiście wiele sposobów skonfigurowania zachowania do własnych potrzeb; powyższa strona zawiera szereg przykładów.

Spróbuj przekazać kontrolę do następnej pasującej trasy. Jeśli Express najpierw dopasowuje trasę app.get, to nie przejdzie do trasy opcji, chyba że to zrobisz (pamiętaj o użyciu następnej) :

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

    next();
});

Jeśli chodzi o organizowanie rzeczy CORS, umieściłem je w oprogramowaniu pośrednim, które działa dobrze dla mnie:

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

Aby pozostać w tej samej idei routingu. Używam tego kodu:

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

Podobne do przykładu http://enable-cors.org/server_expressjs.html

zrobić

npm install cors --save

i po prostu dodaj te wiersze do głównego pliku, do którego kierowane jest Twoje żądanie (zachowaj go przed każdą trasą).

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

Stworzyłem pełniejsze oprogramowanie pośrednie odpowiednie do ekspresowego lub połączenia. Obsługuje OPTIONSprośby o sprawdzenie podczas inspekcji wstępnej. Zauważ, że pozwoli to CORSowi na dostęp do czegokolwiek, możesz chcieć sprawdzić, czy chcesz ograniczyć dostęp.

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

zainstaluj moduł cors w expressjs. możesz wykonać następujące kroki>

Instalacja

npm install cors

Proste użycie (Włącz wszystkie żądania CORS)

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

Aby uzyskać więcej informacji, przejdź do https://github.com/expressjs/cors

Zrób coś takiego:

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

Testy przeprowadzone z ekspresowym + węzłem + jonowym działającym w różnych portach.

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

najpierw po prostu zainstaluj cors w swoim projekcie. Weź terminal (wiersz polecenia) cddo katalogu projektu i uruchom poniższe polecenie:

npm install cors --save

Następnie weź plik server.js i zmień kod, aby dodać w nim następujące elementy:

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

To działało dla mnie ..

Działa to dla mnie, ponieważ jest to łatwa implementacja w obrębie tras, używam meanjs i działa dobrze, safari, chrome itp.

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

    });

Jakiś czas temu napotkałem ten problem, więc zrobiłem to, aby umożliwić CORS w mojej aplikacji nodejs:

Najpierw musisz zainstalować cors , używając poniższego polecenia:

npm install cors --save

Teraz dodaj następujący kod do pliku początkowego aplikacji, takiego jak ( 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);

W moim index.jsdodałem:

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

Jeśli chcesz, aby był specyficzny dla kontrolera, możesz użyć:

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

Pamiętaj, że pozwoli to również na użycie ramek iframe.

Może odnieść się do kodu poniżej dla tego samego. Źródło: 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
})

Moje najprostsze rozwiązanie z Express 4.2.0 (EDYCJA: Wydaje się, że nie działa w 4.3.0) to:

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

Podejrzewam, app.all('/result', ...)że działanie też by działało ...

Najprostszą odpowiedzią jest użycie pakietu cors .

const cors = require('cors');

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

Umożliwi to CORS na całej planszy. Jeśli chcesz dowiedzieć się, jak włączyć CORS bez modułów zewnętrznych , tak naprawdę potrzebujesz tylko ekspresowego oprogramowania pośredniego, które ustawia nagłówek „Kontrola dostępu - Zezwalaj na pochodzenie” . Jest to minimum potrzebne do zezwolenia na domeny z żądaniami krzyżowymi z przeglądarki na serwer.

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

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

Korzystanie z Express Middleware działa dla mnie świetnie. Jeśli już korzystasz z Express, po prostu dodaj następujące reguły oprogramowania pośredniego. Powinno zacząć działać.

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

Odniesienie

Poniżej działało dla mnie, mam nadzieję, że to komuś pomoże!

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

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

Otrzymałem referencję od https://expressjs.com/en/resources/middleware/cors.html#configuring-cors

Przekonałem się, że jest to niezwykle łatwe dzięki pakietowi żądania npm ( https://www.npmjs.com/package/request )

Następnie oparłem swoje rozwiązanie na tym poście 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'));
});

W maszynopisie, jeśli chcesz używać node.js pakiet 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;

Jeśli nie chcesz używać bibliotek trzeciej części do obsługi błędów cors, musisz zmienić metodę 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;

Do korzystania z pliku 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);

Jest to podobne do odpowiedzi Pat z tą różnicą, że kończę na res.sendStatus (200); zamiast next ();

Kod przechwytuje wszystkie żądania typu metody OPTIONS i odsyła nagłówki kontroli dostępu.

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

Kod akceptuje CORS ze wszystkich źródeł, zgodnie z żądaniem w pytaniu. Lepiej byłoby jednak zastąpić * określonym źródłem, np. Http: // localhost: 8080, aby zapobiec niewłaściwemu użyciu.

Ponieważ używamy metody app.options zamiast metody app.use, nie musimy tego sprawdzać:

req.method === 'OPTIONS'

co możemy zobaczyć w niektórych innych odpowiedziach.

Znalazłem odpowiedź tutaj: http://johnzhang.io/options-request-in-express .

Możesz korzystać z oprogramowania pośredniego Express, blokować domenę i metody.

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

Możemy uniknąć CORS i zamiast tego przesłać żądania do innego serwera:

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

W swojej aplikacji internetowej wykonałem następujące kroki i odniosłem sukces:

Dodaj pakiet cors do ekspresu:

npm install cors --save

Dodaj następujące wiersze po konfiguracji bodyParser . Miałem pewne problemy z dodaniem przed 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.

Najprostszym podejściem jest instalacja modułu cors w projekcie za pomocą:

npm i --save cors

Następnie w pliku serwera zaimportuj go, wykonując następujące czynności:

import cors from 'cors';

Następnie użyj go jako takiego oprogramowania pośredniego:

app.use(cors());

Mam nadzieję że to pomoże!

Gdybym był na @OP, zmieniłbym mój paradygmat programowania.

zakładając, że blokujesz te CORS, ponieważ wysyłasz żądania do localhost lub czegoś podobnego.

W końcu, jeśli zamierzasz wdrożyć optoiny produkcyjne, takie jak Google Cloud Platformlub Herokulub, nie będziesz musiał martwić się o CORS, takie jak zezwolenie na pochodzenie lub cokolwiek innego podczas produkcji.

więc podczas testowania serwera po prostu użyj postmani nie dostaniesz blokady CORS, po tym wdróż serwer, a następnie pracuj na kliencie.

/ * po pierwsze, i może to być problem wśród młodszych deweloperów, takich jak ja: pamiętaj, aby użyć metody „lambda” >>>> „'”, a nie „” w metodzie pobierania ! * /

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

/ plus, wysoce zalecany jest następujący artykuł: https://developer.edamam.com/api/faq /

proste jest trudne:

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

Wypróbuj to w swoim głównym pliku js:

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

To powinno rozwiązać twój problem