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

Odkryłem, że najprostszym sposobem jest użycie węzła.pakiet js cors . Najprostsze użycie to:

var cors = require('cors')

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

Istnieje oczywiście wiele sposobów, aby skonfigurować zachowanie do swoich potrzeb; strona podlinkowana powyżej pokazuje kilka przykładów.

Spróbuj przekazać kontrolę do następnej pasującej trasy. Jeśli Express pasuje do aplikacji.get route first, then it won ' t continued on the options route unless you do this (zauważ użycie next):

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

    next();
});

Jeśli chodzi o organizowanie rzeczy CORS, umieściłem je w middleware, który 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 http://enable-cors.org/server_expressjs.html przykład

Do

npm install cors --save

I po prostu dodaj te linie do pliku głównego, gdzie będzie twoje żądanie (zachowaj je przed jakąkolwiek trasą).

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

Stworzyłem bardziej kompletne oprogramowanie pośrednie odpowiednie dla express lub connect. Obsługuje OPTIONS żądania sprawdzania wstępnego. Zauważ, że pozwoli CORS dostęp do wszystkiego, może chcesz umieścić w niektórych kontroli, jeśli 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

Simple Usage (Enable All CORS Requests)

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

Testowanie wykonane z express + node + ionic 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) i cd do katalogu projektu i uruchom poniższe polecenie:

npm install cors --save

Następnie weź serwer.plik js i zmień kod, aby dodać do niego:

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

Jakiś czas temu spotkałem się z tym problemem, 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 startowego aplikacji, 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);

To działa dla mnie, ponieważ jest to łatwa implementacja wewnątrz tras, używam meanjs i jego 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);

    });

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

Należy pamiętać, że pozwoli to również na iframes.

Może odnieść się do poniższego kodu 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
})

Najprostszą odpowiedzią jest użycie pakietu cors .

const cors = require('cors');

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

, które umożliwią KORSOWANIE całej planszy. Jeśli chcesz dowiedzieć się, jak włączyć CORS bez zewnętrznych modułów, wszystko, czego naprawdę potrzebujesz, to Express middleware, który ustawia 'Access-Control-Allow-Origin' nagłówek. To minimum, którego potrzebujesz, aby zezwolić domenom typu cross-request 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', '*');
});

W moim index.js dodał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();
}) 

Moim najprostszym rozwiązaniem z Expressem 4.2.0 (EDIT: chyba nie działa w 4.3.0) było:

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

Przypuszczam, że robienie app.all('/result', ...) też by zadziałało...

W maszynopisie, jeśli chcesz użyć węzła.pakiet 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;

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;

Za korzystanie z aplikacji.plik 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);

Korzystanie z oprogramowania pośredniczącego Express działa dla mnie świetnie. Jeśli używasz już programu Express, po prostu dodaj następujące reguły oprogramowania pośredniczącego. 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 pracował 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

Okazało się, że bardzo łatwo jest to zrobić z pakietem npm request ( https://www.npmjs.com/package/request )

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

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

Kod wychwyci wszystkie żądania opcji typu metody i odeśle nagłówki access-control.

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

Kodeks przyjmuje Kors ze wszystkich źródeł, zgodnie z żądaniem w pytaniu. Jednak lepiej byłoby zastąpić * określonym pochodzeniem, tj. http://localhost:8080 aby zapobiec nadużyciom.

Ponieważ używamy aplikacji.opcje-metoda zamiast aplikacji.use-method we don ' t need to make this check:

req.method === 'OPTIONS'

Które możemy zobaczyć w innych odpowiedziach.

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

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

npm i --save cors

Następnie w pliku serwera zaimportuj go za pomocą następującego polecenia:

import cors from 'cors';

Następnie po prostu użyj go jako oprogramowania pośredniczącego, takiego jak:

app.use(cors());

Możesz używać oprogramowania pośredniczącego 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();
});

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

Spróbuj tego w 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

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

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

Użyłem następujących kroków do mojej aplikacji internetowej i odniosłem sukces:

Dodaj pakiet cors do ekspresu:

npm install cors --save

Dodaj następujące linie Po konfiguracji bodyParser . Miałem problemy z dodaniem przed bodyparserem:

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

Na Twoim miejscu zmieniłbym mój paradygmat programowania.

Zakładając, że blokujesz te Kors, ponieważ składasz żądania do localhost lub czegoś podobnego.

W końcu, jeśli zamierzasz wdrożyć do produkcji optoiny, takie jak Google Cloud Platform lub Heroku lub, nie będziesz musiał martwić się o Kors, takich jak allow origin lub cokolwiek w produkcji.

Więc podczas testowania serwera po prostu użyj postman i nie dostaniesz Kors zablokowany, po tym wdrożyć serwer, a następnie popracuj nad swoim Klientem.

/ * Po pierwsze, i to może być problemem wśród młodszych programistów, takich jak ja: upewnij się, że używasz "lambda">>>"`", a nie "'" w swojej metodzie fetch! */

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

/dodatkowo zaleca się następujący artykuł: https://developer.edamam.com/api/faq/