एक विकल्प मार्ग में कॉर्स हेडर को जोड़ने से ब्राउज़र मेरे एपीआई तक पहुंचने की अनुमति क्यों नहीं देता है?


653

मैं अपने Node.js एप्लिकेशन में CORS का समर्थन करने का प्रयास कर रहा हूं जो Express.js वेब फ्रेमवर्क का उपयोग करता है। मैंने इस बारे में Google समूह चर्चा को पढ़ा है कि इसे कैसे संभालना है, और कुछ लेखों के बारे में पढ़ें कि कोर कैसे काम करता है। सबसे पहले, मैंने ऐसा किया (कोड कॉफीस्क्रिप्ट सिंटैक्स में लिखा गया है):

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

यह काम करने के लिए प्रतीत नहीं होता है। ऐसा लगता है कि मेरा ब्राउज़र (Chrome) प्रारंभिक विकल्प अनुरोध नहीं भेज रहा है। जब मैंने संसाधन के लिए ब्लॉक को अपडेट किया तो मुझे एक क्रॉस-ओरिजनल GET अनुरोध प्रस्तुत करना होगा:

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

यह (Chrome में) काम करता है। यह भी सफारी में काम करता है।

मैंने पढ़ा है कि ...

CORS को लागू करने वाले ब्राउज़र में, प्रत्येक क्रॉस-उत्पत्ति GET या POST अनुरोध एक विकल्प अनुरोध से पहले होता है जो यह जांचता है कि क्या GET या POST ठीक है।

तो मेरा मुख्य प्रश्न यह है कि मेरे मामले में ऐसा कैसे होता है? मेरे app.options ब्लॉक क्यों नहीं कहा जाता है? मुझे अपने मुख्य app.get ब्लॉक में हेडर सेट करने की आवश्यकता क्यों है?


2
CoffeeScript का सुनहरा नियम है: "यह सिर्फ जावास्क्रिप्ट है"।
एसएसएच यह

यह उत्तर शायद उपयोगी हो सकता है: stackoverflow.com/a/58064366/7059557
अमीरराजा-फरहलगा

जवाबों:


185

आपके मुख्य प्रश्न का उत्तर देने के लिए, CORS युक्ति को केवल POST या GET से पहले विकल्प की आवश्यकता होती है यदि POST या GET में कोई गैर-साधारण सामग्री या हेडर है।

सामग्री-प्रकार जिनके लिए एक पूर्व-उड़ान अनुरोध की आवश्यकता होती है (विकल्प कॉल) निम्नलिखित को छोड़कर कोई भी सामग्री-प्रकार हैं :

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

ऊपर सूचीबद्ध लोगों के अलावा कोई भी अन्य सामग्री-प्रकार पूर्व-उड़ान अनुरोध को ट्रिगर करेगा।

हेडर के रूप में, निम्नलिखित के अलावा कोई भी अनुरोध हेडर प्री-फ्लाइट अनुरोध को ट्रिगर करेगा:

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

कोई भी अन्य अनुरोध हेडर प्री-फ्लाइट अनुरोध को ट्रिगर करेगा।

तो, आप इस तरह के रूप में एक कस्टम हेडर जोड़ सकते हैं: x-Trigger: CORSऔर वह पूर्व-उड़ान अनुरोध को ट्रिगर करना चाहिए और विकल्प ब्लॉक को हिट करना चाहिए।

MDN वेब API संदर्भ देखें - CORS पूर्वनिर्धारित अनुरोध


11
क्या आप एक उदाहरण प्रदान कर सकते हैं?
ग्लेन पियर्स

3
लगता है कि मैंने जिस पेज से जोड़ा है, उसके कई उदाहरण हैं। क्या आप मुझे बता सकते हैं कि आपको क्या उदाहरण याद आ रहा है?
डोबेस वैंडर्मर

7
हालांकि, सामान्य तौर पर, लिंक-केवल उत्तर नाजुक होते हैं क्योंकि वे किसी भी समय टूट सकते हैं। उस ने कहा, यह जवाब काफी अच्छा लगता है कि यह सामान्य परिस्थितियों को उजागर कर रहा है जिसके तहत OPTIONSब्लॉक नहीं भेजते हैं। यदि यह स्वीकार की गई सूची HEADERS, या जिसकी content-typesआवश्यकता है OPTIONS, आदि की स्थिति में अच्छा होगा, लेकिन यह एक अच्छी शुरुआत है
dwanderson

668

मैंने पाया कि सबसे आसान तरीका है नोड.जेएस पैकेज कॉर्स का उपयोग करना । सबसे सरल उपयोग है:

var cors = require('cors')

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

बेशक आपकी आवश्यकताओं के लिए व्यवहार को कॉन्फ़िगर करने के कई तरीके हैं; ऊपर लिंक किया गया पृष्ठ कई उदाहरण दिखाता है।


1
यह मेरे लिए विफल रहता है जब मैं इसे क्रेडेंशियल्स के साथ उपयोग करता हूं। :( बाकी सब कुछ एक आकर्षण की तरह काम करता है .. लेकिन इसका कोई फायदा नहीं है अगर यह विफल हो जाता है तो यह सच हो जाता है
शर्मा

इसके अजाक्स अनुरोध के लिए ठीक काम कर रहा है। मैं स्क्रिप्ट टैग और iFrame के लिए CORS कार्यान्वयन चाहता हूं क्योंकि इन अनुरोधों में उत्पत्ति अनुरोध शीर्षक में मौजूद नहीं है :( इसे लागू करने के लिए?
akashPatra

59
आपको यह भी निर्धारित करना होगाcors({credentials: true, origin: true})
nlawson

2
आप यहां विकल्प प्रीफ़्लाइट को कैसे सक्षम कर सकते हैं?
चॉवी

@nlawson आहह आपने मुझे बचाया
एड्रिन

446

अगले मिलान मार्ग पर नियंत्रण पास करने का प्रयास करें। यदि एक्सप्रेस पहले app.get मार्ग से मेल खा रहा है, तो यह विकल्प मार्ग पर जारी नहीं रहेगा जब तक कि आप ऐसा नहीं करते (अगले का नोट उपयोग) :

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

    next();
});

कॉर्स सामान को व्यवस्थित करने के संदर्भ में, मैंने इसे एक मिडलवेयर में रखा जो मेरे लिए अच्छा काम कर रहा है:

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

1
मेरा मानना ​​है कि विकल्प एक GET से पहले होता है, जबकि यदि आप एक POST कर रहे हैं - कोई विकल्प अनुरोध नहीं है ...
Nick

21
है config.allowedDomainsअल्पविराम से अलग किए स्ट्रिंग या किसी सरणी?
pixelfreak

2
config.allowedDomains को अंतरिक्ष से अलग किया गया सरणी होना चाहिए
mcfedr

1
अतिरिक्त सत्र को एक्सप्रेस मिडलवेयर ऑर्डर को पुन: व्यवस्थित करके हटा दिया गया था। एक और नोट पर, इसे थोड़ी अधिक सुरक्षा की आवश्यकता है। यदि मूल अनुमत डोमेन में नहीं है, तो अनुरोध अभी भी संसाधित है, केवल ब्राउज़र इसे देखने में सक्षम नहीं होगा और साथ ही मूल को खराब किया जा सकता है। मेरी सलाह होगी कि आप एक जांच करें और यदि मूल अनुमति सूची में नहीं है, तो तुरंत 403 वापस करें। इसके अलावा किसी भी संवेदनशील जानकारी को परोसा जा रहा है, सत्र के माध्यम से उपयोगकर्ता को मान्य करें।
ज़ेर्री

1
@mcfedr क्या आप बता सकते हैं कि आपको अंतरिक्ष से अलग सरणी से क्या मतलब है?
पूतज़्को

116

रूटिंग के एक ही विचार में रहने के लिए। मैं इस कोड का उपयोग करता हूं:

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 उदाहरण के समान


1
यह grunt.js फ़ाइल में जाता है?
ओलिवर डिक्सन

4
Preflight के बारे में क्या?
बैकडेस्क

नहीं @ ऑलिवरडिक्सन, यह सर्वर की ओर है
अलेक्जेंड्रे मैग्नो टेल्स ज़िमर

84

करना

npm install cors --save

और बस इन पंक्तियों को अपनी मुख्य फ़ाइल में जोड़ें जहाँ आपका अनुरोध चल रहा है (इसे किसी भी मार्ग से पहले रखें)।

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

3
app.options('*', cors())// अन्य मार्गों से पहले शामिल हैं
राजेश्वर

52

मैंने एक्सप्रेस या कनेक्ट के लिए अधिक संपूर्ण मिडलवेयर को उपयुक्त बनाया है। यह OPTIONSप्रीफ़्लाइट चेकिंग के अनुरोधों का समर्थन करता है। ध्यान दें कि यह कुछ भी करने के लिए कॉर्स का उपयोग करने की अनुमति देगा, यदि आप एक्सेस को सीमित करना चाहते हैं, तो आप कुछ चेक में डालना चाह सकते हैं।

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

अरे, मैं आपके समाधान में आया था और सोच रहा था कि क्या हेडर में से एक का पता नहीं लगाया गया था, तो 'वनऑफ' ध्वज को झूठा होना चाहिए?
लियोनिदास

1
कुछ अनुरोधों में सभी हेडर नहीं होंगे। विशेष रूप से एक GET अनुरोध ब्राउज़र द्वारा भेजा जाएगा, और जब इसे एक सही अनुमति-मूल प्रतिक्रिया नहीं मिलती है तो js को एक त्रुटि दी जाती है। जहां एक POST अनुरोध के लिए, ऑप्‍शन अनुरोध पहले भेजा जाता है, अनुमति-विधि शीर्ष लेख के साथ, और उसके बाद ही, वास्तविक POST अनुरोध भेजा जाएगा।
mcfedr

1
ओह समझा। धन्यवाद। क्या आपने कभी रेस.एसएंड (200) नहीं लगाकर परेशानी में डाला, अगर रीक विधि 'विकल्प' थी?
लियोनिदास

मुझे नहीं लगता कि मैंने कुछ और भेजने की कोशिश की है, मुझे लगता है कि किसी भी अन्य प्रतिक्रिया से ब्राउज़र को उस अनुरोध को अस्वीकार करने का कारण होगा जो यह पूर्वनिर्मित है।
mcfedr

आकर्षण की तरह काम करता है, मैं सिर्फ अधिक सुरक्षा के लिए अधिकृत डोमेन की एक सूची जोड़
सेबस्टियन एच।

37

एक्सप्रेस के cors मॉड्यूल स्थापित करें। आप इन चरणों का अनुसरण कर सकते हैं>

स्थापना

npm install cors

सरल उपयोग (सभी कोर अनुरोधों को सक्षम करें)

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

अधिक जानकारी के लिए https://github.com/expressjs/cors पर जाएं


2
TypeError: Cannot read property 'headers' of undefinedसबसे बुनियादी ऐप सेटअप।
ओलिवर डिक्सन

क्या आप सुनिश्चित हैं कि आपके पास अनुरोध वस्तु है? :)
codebased

33

कुछ इस तरह से करें:

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

20

अलग-अलग बंदरगाहों में चल रहे एक्सप्रेस + नोड + आयनिक के साथ परीक्षण किया गया।

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

2
हमें किस फ़ाइल में इस लाइनों को जोड़ने की आवश्यकता है?
शेफाली चौधरी

20

पहले बस अपनी परियोजना में cors स्थापित करें। टर्मिनल (कमांड प्रॉम्प्ट) और cdअपनी परियोजना निर्देशिका में ले जाएं और नीचे कमांड चलाएं:

npm install cors --save

इसके बाद server.js फ़ाइल लें और इसमें निम्नलिखित जोड़ने के लिए कोड बदलें:

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

यह मेरे लिए काम किया ..


4
corsयदि आप res.headerसामान कर रहे हैं तो आपको इसकी आवश्यकता नहीं है । corsएक पुस्तकालय है कि आप के लिए सब संभालती है। अपनी पहली और तीसरी पंक्तियाँ (AKA सब कुछ के साथ cors) हटाएं और आप पाएंगे कि यह अभी भी काम करती है।
Thisissami

मुझे यकीन है कि मुझे पूरा यकीन है कि आपको वास्तव में इस लाइन की जरूरत हैres.header("Access-Control-Allow-Origin", "*");
Thisissami

हालांकि यह ध्यान रखें कि आप ऐसा करके अपनी सुरक्षा से समझौता कर रहे हैं। :)
यह

10

यह मेरे लिए काम करता है, क्योंकि मार्गों के अंदर इसका एक आसान कार्यान्वयन है, मतलब का उपयोग कर im और इसके ठीक काम, सफारी, क्रोम, आदि।

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

    });

10

कुछ समय पहले, मुझे इस समस्या का सामना करना पड़ा, इसलिए मैंने अपने नोडज एप्लिकेशन में कोर्स की अनुमति देने के लिए ऐसा किया:

पहले आपको नीचे दिए गए कमांड का उपयोग करके इंस्टॉल करना होगा cors :

npm install cors --save

अब अपने ऐप की शुरुआती फ़ाइल की तरह निम्न कोड जोड़ें ( 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);

cors स्थापित करने के बाद यह कोशिश की। Cors एक फ़ंक्शन नहीं है
कॉलिन रिकल्स

9

मेरे index.jsजोड़े में:

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

2
मुझे यह टिप्पणी करनी चाहिए Access-Control-Allow-Origin = *कि आप कुकीज़ को सर्वर पर भेजने में सक्षम नहीं होंगे, उन्हें CORS नीति - स्रोत: developer.mozilla.org/en-US/docs/Web/HTTP/… द्वारा अस्वीकार कर दिया जाएगा । यदि आप कुकीज़ का उपयोग करना चाहते हैं, तो इसका उपयोग न करें।
एक्कैप्सि

7

यदि आप इसे नियंत्रक विशिष्ट बनाना चाहते हैं, तो आप इसका उपयोग कर सकते हैं:

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

कृपया ध्यान दें कि इससे iframes की भी अनुमति होगी।


6

उसी के लिए नीचे दिए गए कोड का उल्लेख कर सकते हैं। स्रोत: एकेडमाइंड / नोड-रेस्टफुल-एपी

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

मैंने कई उत्तर देखे और यह कुछ ऐसा है जो आयातक है, मैंने कुछ अन्य कॉन्फ़िगरेशन के बाद कोड के इस हिस्से का उपयोग करने की कोशिश की और यह काम नहीं किया और किसी कारण से, मैंने ऐप const app = express();और कार्यों के बाद कोड डालने की कोशिश की ! मुझे लगता है कि इसका उल्लेख करना महत्वपूर्ण है।
rfcabal

4

एक्सप्रेस 4.2.0 (EDIT: 4.3.0 में काम नहीं करता है) के साथ मेरा सबसे सरल समाधान था:

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

मुझे लगता है कि काम app.all('/result', ...)करना भी होगा ...


3

सबसे आसान जवाब सिर्फ कॉर्स पैकेज का उपयोग करना है

const cors = require('cors');

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

यह बोर्ड भर में कोर को सक्षम करेगा। यदि आप सीखना चाहते हैं कि बिना बाहरी मॉड्यूल के कॉर्स को कैसे सक्षम किया जाए , तो आपको वास्तव में कुछ एक्सप्रेस मिडलवेयर की आवश्यकता होती है जो 'एक्सेस-कंट्रोल-अलाउंस-ओरिजिन' हेडर सेट करता है । वह न्यूनतम है जिसे आपको ब्राउज़र से अपने सर्वर पर क्रॉस-अनुरोध डोमेन की अनुमति देने की आवश्यकता है।

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

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

2

एक्सप्रेस मिडलवेयर का उपयोग करना मेरे लिए बहुत अच्छा काम करता है। यदि आप पहले से ही एक्सप्रेस का उपयोग कर रहे हैं, तो बस निम्न मिडलवेयर नियमों को जोड़ें। यह काम करना शुरू कर देना चाहिए।

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

संदर्भ


2

नीचे मेरे लिए काम किया, आशा है कि यह किसी की मदद करता है!

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 से संदर्भ प्राप्त करें


किस फ़ाइल में जाता है? peanutbutter.js?
एंड्रयू कोपर

मूंगफली के बारे में सुनिश्चित नहीं है। मेरे लिए, यह एक्सप्रेस है। जेएस। मूल रूप से, यह वह फ़ाइल होनी चाहिए जहां आपको अपने एक्सप्रेस ऐप की आवश्यकता हो, इसे इनिशियलाइज़ करें और रूट फ़ाइलों की आवश्यकता हो।
वत्सल शाह

1

मैंने इसे npm अनुरोध पैकेज ( https://www.npmjs.com/package/request) के साथ करना बहुत आसान पाया ) के

फिर मैंने इस पोस्ट 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'));
});

1

टाइपप्रति में, आप उपयोग करना चाहते हैं पैकेज 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;

यदि आप cors एरर हैंडलिंग के लिए थर्ड पार्ट लाइब्रेरीज़ का उपयोग नहीं करना चाहते हैं, तो आपको 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;

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

1
"यदि सर्वर टाइपस्क्रिप्ट में लिखा है" - यह नहीं है। प्रश्न कहता है कि यह कॉफीस्क्रिप्ट में लिखा गया है।
क्वेंटिन

1
@ क्वेंटिन मैं सिर्फ टाइपस्ट्रिप में एक विकल्प दिखाना चाहता था, उम्मीद है कि यह किसी की मदद कर सकता है।
overcomer

1

यह पैट के अंतर के साथ अंतर है जो मैं res.sendStatus (200) के साथ समाप्त करता हूं; अगले के बजाय ();

कोड विधि प्रकार विकल्प के सभी अनुरोधों को पकड़ लेगा और एक्सेस-कंट्रोल-हेडर्स को वापस भेज देगा।

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

प्रश्न में अनुरोध के अनुसार कोड सभी उत्पत्ति से CORS स्वीकार करता है। हालांकि, दुरुपयोग को रोकने के लिए एक विशिष्ट मूल अर्थात http: // localhost: 8080 के साथ * को प्रतिस्थापित करना बेहतर होगा ।

चूँकि हम app.useions-method के बजाय app.options-method का उपयोग करते हैं, इसलिए हमें यह जाँच करने की आवश्यकता नहीं है:

req.method === 'OPTIONS'

जिसे हम कुछ अन्य उत्तरों में देख सकते हैं।

मुझे यहाँ उत्तर मिला: http://johnzhang.io/options-request-in-express


1

आप एक्सप्रेस मिडलवेयर का उपयोग कर सकते हैं, अपने डोमेन और विधियों को ब्लॉक कर सकते हैं।

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

इससे मुझे अपनी समस्या में मदद मिली, धन्यवाद!
19

0

हम कोर से बच सकते हैं और इसके बजाय अन्य सर्वर के अनुरोधों को अग्रेषित कर सकते हैं:

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

1
यह पूछे गए सवाल का जवाब नहीं देता है
david.barkhuizen 12

0

मैंने अपने वेब ऐप में निम्नलिखित चरणों का उपयोग किया और मुझे सफलता मिली:

एक्सप्रेस में कॉर्स पैकेज जोड़ें:

npm install cors --save

बॉडीपार कॉन्फ़िगरेशन के बाद निम्न पंक्तियाँ जोड़ें । मुझे बॉडीपार करने से पहले कुछ परेशानियों का सामना करना पड़ा:

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

0

सबसे सरल दृष्टिकोण का उपयोग कर अपनी परियोजना में cors मॉड्यूल स्थापित करें:

npm i --save cors

फिर आपकी सर्वर फ़ाइल में निम्नलिखित का उपयोग करके इसे आयात करें:

import cors from 'cors';

तो बस इसे इस तरह एक मिडलवेयर के रूप में उपयोग करें:

app.use(cors());

उम्मीद है की यह मदद करेगा!


0

अगर मैं आप होते तो @OP मैं अपना प्रोग्रामिंग प्रतिमान बदल देता।

यह मानते हुए कि आप इन CORS को अवरुद्ध कर रहे हैं क्योंकि आप लोकलहोस्ट या कुछ इसी तरह के अनुरोध कर रहे हैं।

आखिरकार, यदि आप उत्पादन पसंद करने के लिए तैनात करने जा रहे हैं जैसे Google Cloud Platformया Heroku, तो आपको कॉर्स के बारे में चिंता करने की कोई ज़रूरत नहीं होगी जैसे कि उत्पादन की अनुमति या जब भी उत्पादन में।

इसलिए जब सर्वर का परीक्षण किया जाता है postmanऔर आप अपने सर्वर को तैनात करते हैं और उसके बाद अपने क्लाइंट पर काम करते हैं, तो आपको कोर ब्लॉक नहीं मिलेगा।


0

अपने सुनिश्चित करें कि "लैम्ब्डा" >>>> "` "और नहीं" ' "में उपयोग करने के लिए: / * सब से पहले, और इस जूनियर devs वहाँ, अपने आप की तरह बाहर के बीच समस्या हो सकती है लाने विधि ! * /

`` `प्रतिक्रियाhttps://api.... );

/ प्लस, निम्नलिखित लेख अत्यधिक अनुशंसित है: https://developer.edamam.com/api/faq /


0

सरल कठिन है:

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

0

इसे अपने मुख्य 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();
});

इससे आपकी समस्या का समाधान हो जाना चाहिए

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.