SEÇENEKLER yoluna CORS başlıkları eklemek neden tarayıcıların API'ma erişmesine izin vermiyor?

Express.js web çerçevesini kullanan Node.js uygulamamda CORS'i desteklemeye çalışıyorum. Bunun nasıl ele alınacağı hakkında bir Google grubu tartışması ve CORS'in nasıl çalıştığı hakkında birkaç makale okudum. İlk olarak, bunu yaptım (kod CoffeeScript sözdiziminde yazılır):

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

Çalışmıyor gibi görünüyor. Tarayıcım (Chrome) ilk OPTIONS isteğini göndermiyor gibi görünüyor. Ben sadece kaynak bloğunu güncellediğimde, çapraz kökenli bir GET isteği göndermem gerekiyor:

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

Çalışıyor (Chrome'da). Bu Safari'de de çalışır.

Bunu okudum ...

CORS uygulayan bir tarayıcıda, her bir çapraz kökenli GET veya POST isteğinden önce, GET veya POST'un uygun olup olmadığını kontrol eden bir SEÇENEK isteği gelir.

Yani asıl sorum şu, benim durumumda bu nasıl görünmüyor? App.options bloğum neden çağrılmıyor? Ana app.get bloğumdaki başlıkları neden ayarlamam gerekiyor?

Ana sorunuza cevap vermek için, CORS spesifikasyonu sadece POST veya GET içinde basit olmayan herhangi bir içerik veya başlık varsa POST veya GET'ten önce OPTIONS çağrısını gerektirir.

Uçuş öncesi CORS isteği gerektiren İçerik Türleri (OPTIONS çağrısı) , aşağıdakiler dışında herhangi bir İçerik Türüdür :

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

Yukarıda listelenenler dışında kalan diğer İçerik Türleri bir uçuş öncesi isteği tetikler.

Üstbilgilere gelince , aşağıdakilerin dışındaki tüm İstek Üstbilgileri bir uçuş öncesi isteği tetikler:

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

Diğer tüm İstek Başlıkları uçuş öncesi isteği tetikler.

Bu nedenle,: gibi özel bir üstbilgi ekleyebilirsiniz; bu x-Trigger: CORS, uçuş öncesi isteği tetiklemeli ve OPTIONS bloğuna basmalıdır.

Bkz. MDN Web API Başvurusu - CORS Preflighted istekleri

Ben en kolay yolu node.js paket cors kullanmak olduğunu buldum . En basit kullanım:

var cors = require('cors')

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

Elbette davranışı ihtiyaçlarınıza göre yapılandırmanın birçok yolu vardır; yukarıda bağlantı verilen sayfa birkaç örnek gösterir.

Denetimi bir sonraki eşleşen rotaya aktarmayı deneyin. Express ilk olarak app.get rotasını eşlerse, siz bunu yapmadığınız sürece seçenekler rotasında devam etmez (bir sonrakine dikkat edin) :

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

    next();
});

CORS şeylerini organize etmek açısından, benim için iyi çalışan bir ara katmana koydum:

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

Aynı yönlendirme fikrinde kalmak. Bu kodu kullanıyorum:

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

Http://enable-cors.org/server_expressjs.html örneğine benzer

yapmak

npm install cors --save

ve bu satırları isteğinizin gittiği ana dosyaya ekleyin (herhangi bir rotadan önce saklayın).

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

Ekspres veya bağlantı için daha eksiksiz bir ara katman yazılımı yaptım. OPTIONSÖn kontrol için talepleri destekler . CORS'nin herhangi bir şeye erişmesine izin vereceğini unutmayın, erişimi sınırlamak istiyorsanız bazı kontroller yapmak isteyebilirsiniz.

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

expressjs cors modülünü yükleyin. bu adımları takip edebilirsiniz>

Kurulum

npm install cors

Basit Kullanım (Tüm CORS İsteklerini Etkinleştir)

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

daha fazla ayrıntı için https://github.com/expressjs/cors adresini ziyaret edin

Bunun gibi bir şey yapın:

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 farklı portlarda ekspres + düğüm + iyonik çalışma ile yapılır.

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

önce projenize cors takın. Terminali (komut istemi) ve cdproje dizininize götürün ve aşağıdaki komutu çalıştırın:

npm install cors --save

Sonra server.js dosyasını alın ve içine aşağıdakileri eklemek için kodu değiştirin:

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

Bu benim için çalıştı.

Bu benim için işe yarar, çünkü rotaları içinde kolay bir uygulama, im meanjs ve onun çalışma para cezası, safari, krom, vb kullanarak.

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

    });

Bir süre önce, bu sorunla karşılaştım, bu yüzden nodejs uygulamamda CORS'ye izin verdim:

Öncelikle aşağıdaki komutu kullanarak yüklemeniz gerekir cors :

npm install cors --save

Şimdi uygulamanızın başlangıç ​​dosyasına ( ) gibi aşağıdaki kodu ekleyinapp.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 my index.jsekledim:

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

Denetleyiciyi özel yapmak istiyorsanız, şunları kullanabilirsiniz:

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

Bunun iframe'lere de izin vereceğini lütfen unutmayın.

Aynı kod için aşağıdaki kodu başvurabilir. Kaynak: 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
})

Express 4.2.0 ile en basit çözüm (EDIT: 4.3.0'da çalışmıyor gibi görünüyor):

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

Sanırım yapmak app.all('/result', ...)da işe yarar ...

En kolay cevap sadece cors paketini kullanmaktır .

const cors = require('cors');

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

Bu, CORS'in tüm yönetimini mümkün kılacaktır. Dış modüller olmadan CORS'u nasıl etkinleştireceğinizi öğrenmek istiyorsanız , gerçekten ihtiyacınız olan tek şey 'Access-Control-Allow-Origin' başlığını ayarlayan bazı Express ara katman yazılımıdır . Tarayıcıdan sunucunuza çapraz istekli alan adlarına izin vermeniz için gereken minimum değer budur.

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

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

Express Middleware kullanmak benim için harika. Zaten Express kullanıyorsanız, aşağıdaki ara katman yazılımı kurallarını eklemeniz yeterlidir. Çalışmaya başlamalıdır.

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

Referans

Aşağıda benim için çalıştı, umarım birine yardımcı olur!

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

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

Https://expressjs.com/en/resources/middleware/cors.html#configuring-cors adresinden referans aldı

Bunu npm istek paketi ile yapmanın son derece kolay olduğunu gördüm ( https://www.npmjs.com/package/request )

Sonra çözümümü bu yazıya dayandım 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'));
});

Daktiloda, node.js paket korselerini kullanmak istiyorsanız

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

Üçüncü hata kitaplıklarını cors hata işleme için kullanmak istemiyorsanız, handleCORSErrors () yöntemini değiştirmeniz gerekir.

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

App.ts dosyasını kullanmak için

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

Bu, res.sendStatus (200) ile bitirdiğim farkla Pat'ın cevabına benziyor; next () yerine;

Kod, OPTIONS yöntem türünün tüm isteklerini yakalar ve erişim-denetim-başlıklarını geri gönderir.

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, soruda istendiği gibi her kaynaktan CORS'yi kabul eder. Ancak, belirli bir kökeni yani birlikte * yerine daha iyi olurdu http: // localhost: 8080 kötüye kullanılmasını önlemek için.

App.use yöntemi yerine app.options yöntemini kullandığımız için bu denetimi yapmamız gerekmez:

req.method === 'OPTIONS'

diğer cevapların bazılarında görebiliyoruz.

Cevabı burada buldum: http://johnzhang.io/options-request-in-express .

Express ara katman yazılımını kullanabilir, alan adınızı ve yöntemlerinizi engelleyebilirsiniz.

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

CORS'den kaçınabilir ve istekleri bunun yerine diğer sunucuya iletebiliriz:

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

Web uygulamama aşağıdaki adımları uyguladım ve başarılı oldum:

Cors paketini eksprese ekleyin:

npm install cors --save

BodyParser yapılandırmasından sonra aşağıdaki satırları ekleyin . Ben bodyParser önce ekleyerek bazı sorunlar vardı:

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

En basit yaklaşım, projenize cors modülünü kullanarak aşağıdakileri kullanarak kurulum yapmaktır:

npm i --save cors

Daha sonra sunucu dosyanızda aşağıdakileri kullanarak içe aktarın:

import cors from 'cors';

Sonra sadece böyle bir ara katman yazılımı olarak kullanın:

app.use(cors());

Bu yardımcı olur umarım!

Eğer @OP olsaydım programlama paradigmamı değiştirirdim.

localhost veya benzeri bir şey için istekte bulunduğunuz için bu CORS'leri engellediğinizi varsayarsak.

Sonunda Google Cloud Platformveya gibi üretim optoinlerine dağıtılacaksanız Heroku, kaynak izni veya üretimde ne olursa olsun CORS hakkında endişelenmenize gerek kalmayacaktır.

sunucuyu test ederken sadece kullanın postmanve CORS bloke olmaz, bundan sonra sunucunuzu dağıtın ve sonra istemciniz üzerinde çalışın.

/ * her şeyden önce, bu benim gibi genç geliştiriciler arasında sorun olabilir: getirme yönteminizde "lambda" >>>> "" "kullandığınızdan emin olun ! * /

`` const yanıtı = fetch ( https://api....) bekleniyor ;

/ artı, aşağıdaki makale şiddetle tavsiye edilir: https://developer.edamam.com/api/faq /

basit zordur:

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

Bunu ana js dosyanızda deneyin:

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

bu probleminizi çözmeli