उत्पत्ति <मूल> पहुँच-नियंत्रण-अनुमति-मूल द्वारा अनुमत नहीं है

Question

XMLHttpRequest cannot load http://localhost:8080/api/test. Origin http://localhost:3000 is not allowed by Access-Control-Allow-Origin. 

मैं क्रॉस डोमेन अजाक्स अनुरोधों के बारे में पढ़ता हूं, और अंतर्निहित सुरक्षा मुद्दे को समझता हूं। मेरे मामले में, 2 सर्वर स्थानीय रूप से चल रहे हैं, और परीक्षण के दौरान क्रॉस डोमेन अनुरोधों को सक्षम करना पसंद करते हैं।

localhost:8080 - Google Appengine dev server
localhost:3000 - Node.js server

localhost:8080 - GAE serverजब मेरा पृष्ठ नोड सर्वर से लोड किया जाता है तो मैं एक अजाक्स अनुरोध जारी कर रहा हूं । सबसे आसान और सबसे सुरक्षित क्या है ( disable-web-securityविकल्प के साथ क्रोम शुरू नहीं करना चाहते हैं )। अगर मुझे बदलना है 'Content-Type', तो क्या मुझे इसे नोड सर्वर पर करना चाहिए? कैसे?

Comments

एक तेज़ समाधान यहां पाया जा सकता है: stackoverflow.com/a/21622564/4455570

— गेब्रियल वामन्यू

Answer 1

चूंकि वे विभिन्न बंदरगाहों पर चल रहे हैं, वे अलग-अलग जावास्क्रिप्ट हैं origin। इससे कोई फर्क नहीं पड़ता कि वे एक ही मशीन / होस्टनाम पर हैं।

आपको सर्वर पर CORS को सक्षम करने की आवश्यकता है (लोकलहोस्ट: 8080)। इस साइट को देखें: http://enable-cors.org/

आपको बस सर्वर से HTTP हेडर जोड़ने की आवश्यकता है:

Access-Control-Allow-Origin: http://localhost:3000

या, सादगी के लिए:

Access-Control-Allow-Origin: *

यदि आपका सर्वर कुकी सेट करने का प्रयास कर रहा है और आप उपयोग करते हैं, तो "*" का उपयोग न करें withCredentials = true

क्रेडेंशियल अनुरोध का जवाब देते समय, सर्वर को एक डोमेन निर्दिष्ट करना चाहिए, और वाइल्ड कार्डिंग का उपयोग नहीं किया जा सकता है।

आप withCredentialsयहाँ के बारे में अधिक पढ़ सकते हैं

Comments

अगर हम इस हैडर को HTML में जोड़ना चाहते हैं तो हमें इसके लिए क्या करना चाहिए?

— आजम अलवी

मुझे नहीं लगता था कि पोर्ट आवश्यक था लेकिन यदि आप 3000 जैसे गैर-मानक पोर्ट का उपयोग कर रहे हैं तो आपको इसे CORS पॉलिसी में शामिल करना होगा।

— माइकल कॉनर

इस प्रतिक्रिया के लिए धन्यवाद। यहां मूल्य के रूप में '*' का उपयोग करने के सुरक्षा निहितार्थ को उजागर करना चाहते हैं। यह सभी उत्पत्ति की अनुमति देता है: developer.mozilla.org/en-US/docs/Web/HTTP/Headers/… पहला उदाहरण जैसे लगता है कि कम से कम पहुंच के मामले में सबसे अच्छा होगा। कई डोमेन के साथ ऐसा करने के बारे में विवरण यहाँ है: stackoverflow.com/a/1850482/1566623

— क्रिस्टोफर कुट्रुफ़

स्पष्टता के लिए, जब यह कहा जाता है कि आपको "सर्वर से HTTP हेडर जोड़ने" की आवश्यकता है, तो इसका मतलब है कि दिए गए Access-Control-Allow-Originहेडर को HTTP प्रतिक्रियाओं का जोड़ा हेडर होना चाहिए जो सर्वर भेजता है। इस हेडर को सर्वर की प्रतिक्रिया का हिस्सा होने की आवश्यकता है , इसे क्लाइंट के अनुरोध का हिस्सा होने की आवश्यकता नहीं है । विशेष रूप से जो कुछ भी होता है उससे पहले ग्राहक आपके द्वारा वास्तविक अनुरोध करना चाहता है, ब्राउज़र OPTIONSइससे पहले एक अनुरोध भेजता है, और यदि उस OPTIONSअनुरोध के लिए सर्वर की प्रतिक्रिया में हेडर शामिल नहीं है, तो ब्राउज़र आपके वांछित अनुरोध को नहीं भेजेगा।

— अजाक्सलैंग

Enable-cors.org पर अपने बैकेंड सर्वर के लिए प्रासंगिक युक्तियों को पढ़ना महत्वपूर्ण है।

— कार्ल

Answer 2

यदि आपको ajax अनुरोधों के लिए Chrome में त्वरित कार्य की आवश्यकता है, तो यह क्रोम प्लगइन स्वचालित रूप से आपको उचित प्रतिक्रिया हेडर जोड़कर किसी भी स्रोत से किसी भी साइट तक पहुंचने की अनुमति देता है

क्रोम एक्सटेंशन अनुमति-नियंत्रण-अनुमति-उत्पत्ति: *

Comments

मुझे नहीं पता कि आप अधिक upvotes क्यों नहीं प्राप्त कर रहे हैं। यह क्रोम के साथ स्थानीयहोस्ट पर विकास के लिए कम से कम घुसपैठ है।

— डेविड बेत्ज़

निश्चित रूप से सहमत हैं। दूरस्थ सर्वर के लिए कॉन्फ़िगर बदलने के बिना एक दूरस्थ सर्वर के खिलाफ लोकलहोस्ट देव के लिए सक्षम करना आसान है।

— जेन्स वीगर

@DavidBetz: पर विचार आप विस्तार को सत्यापित करने और यह भरोसा जाहिर है;)

— haylem

इस शीर्ष शीर्ष पर होना चाहिए! खासकर जहां लोकलहोस्ट का संबंध है।

— श्री बेनेडिक्ट

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

— dolmen

Answer 3

आपको इसे हल करने के लिए कॉर्स को सक्षम करना होगा

यदि आपका ऐप साधारण नोड.जेएस के साथ बनाया गया है

इसे अपनी प्रतिक्रिया हेडर में सेट करें जैसे

var http = require('http');

http.createServer(function (request, response) {
response.writeHead(200, {
    'Content-Type': 'text/plain',
    'Access-Control-Allow-Origin' : '*',
    'Access-Control-Allow-Methods': 'GET,PUT,POST,DELETE'
});
response.end('Hello World\n');
}).listen(3000);

अगर आपका ऐप एक्सप्रेस फ्रेमवर्क के साथ बनाया गया है

जैसे कोर्स मिडलवेयर का उपयोग करें

var allowCrossDomain = function(req, res, next) {
    res.header('Access-Control-Allow-Origin', "*");
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
    res.header('Access-Control-Allow-Headers', 'Content-Type');
    next();
}

और के माध्यम से आवेदन करें

app.configure(function() {
    app.use(allowCrossDomain);
    //some other code
});    

यहाँ दो संदर्भ लिंक दिए गए हैं

1. कैसे करने के लिए अनुमति देते हैं-CORS में व्यक्त-NodeJS
2. डाइविंग-में- नोड- js-very-first-app #see अजाक्स अनुभाग

Comments

क्या आप निर्दिष्ट कर सकते हैं कि कैसे उपयोग करें config.allowedDomains। मेरे मामले में मुझे क्या कहना चाहिए?

— bsr

@bsr: आप का उपयोग कर सकते हैं *या specific domainआप तक पहुँच देना चाहते हैं।

— मृत्युंजय

तो क्या मैं केवल एक ही app.configure()फ़ंक्शन त्रुटि हूं ?

— प्रमेश बजराचार्य

@PrameshBajrachaya मैंने "app.configure" भाग को शामिल नहीं किया - केवल "app.use (allowCrossDomain)", और इसने मेरे लिए काम किया।

— गियोरगोस स्फ़िकस

Answer 4

मैं स्वीकार करता हूं @ लॉकेट हज़्म के उत्तर के रूप में यह मुझे समाधान तक ले जाता है। यह वास्तव में जीएई सर्वर पर था जिसे मुझे हेडर सेट करने की आवश्यकता थी। मुझे ये सेट करना था

"Access-Control-Allow-Origin" -> "*"
"Access-Control-Allow-Headers" -> "Origin, X-Requested-With, Content-Type, Accept"

सेटिंग "Access-Control-Allow-Origin" ने केवल त्रुटि दी

Request header field X-Requested-With is not allowed by Access-Control-Allow-Headers.

इसके अलावा, अगर टोकन को भेजने की आवश्यकता है, तो इसे भी जोड़ें

"Access-Control-Allow-Credentials" -> "true"

इसके अलावा, क्लाइंट पर, सेट करें withCredentials

यह सर्वर को भेजे जाने के लिए 2 अनुरोध करता है, एक के साथ OPTIONS। प्रामाणिक कुकी इसके साथ नहीं भेजी जाती है, इसलिए बाहर की ओर उपचार करने की आवश्यकता है।

Answer 5

राऊटर में.जेएस को कॉल / पोस्ट करने के तरीकों से पहले कोड जोड़ें। यह मेरे लिए त्रुटियों के बिना काम करता है।

//Importing modules @Brahmmeswar
const express = require('express');
const router = express.Router();

const Contact = require('../models/contacts');

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

Answer 6

क्रोम से अजाक्स का उपयोग करते हुए क्रॉस ओरिजिनल संसाधन को कॉल करते समय मुझे एक समस्या का सामना करना पड़ रहा था।

मैंने अपने नोड js ऐप को तैनात करने के लिए नोड js और स्थानीय http सर्वर का उपयोग किया है।

जब मुझे क्रॉस ओरिजिनल रिसोर्सेज का एक्सेस मिला, तो मुझे एरर रिस्पॉन्स मिल रहा था

मुझे उस पर एक समाधान मिला,

1) मैंने अपने app.js फ़ाइल में कोड नीचे जोड़ा है

res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "X-Requested-With");

2) मेरे html पेज में क्रॉस ओरिजिनल रिसोर्स का उपयोग किया गया है $.getJSON();

$.getJSON("http://localhost:3000/users", function (data) {
    alert("*******Success*********");
    var response=JSON.stringify(data);
    alert("success="+response);
    document.getElementById("employeeDetails").value=response;
});

Answer 7

यदि आप एक्सप्रेस का उपयोग कर रहे हैं, तो आप निम्नानुसार सेर्स मिडलवेयर का उपयोग कर सकते हैं:

var express = require('express')
var cors = require('cors')
var app = express()

app.use(cors())

Answer 8

आयात के नीचे इसे अपने NodeJS सर्वर में जोड़ें:

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

Answer 9

यदि आपको इसके बाद 403 मिला है, तो कृपया निम्नलिखित में WEB.XML टॉमकैट कॉन्फिगरेशन के फिल्टर को कम करें:

<filter>
  <filter-name>CorsFilter</filter-name>
  <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
  <init-param>
    <param-name>cors.allowed.origins</param-name>
    <param-value>*</param-value>
  </init-param>
  <init-param>
    <param-name>cors.allowed.methods</param-name>
    <param-value>GET,POST,HEAD,OPTIONS,PUT</param-value>
  </init-param>
  <init-param>
    <param-name>cors.allowed.headers</param-name>
    <param-value>Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers</param-value>
  </init-param>
  <init-param>
    <param-name>cors.exposed.headers</param-name>
    <param-value>Access-Control-Allow-Origin,Access-Control-Allow-Credentials</param-value>
  </init-param>
</filter>

Answer 10

मुझे आखिरकार Apache Tomcat8 का जवाब मिल गया

आपको tomcat web.xml फ़ाइल को संपादित करना होगा।

संभावित रूप से यह वेबैप फ़ोल्डर के अंदर होगा,

sudo gedit /opt/tomcat/webapps/your_directory/WEB-INF/web.xml

इसे ढूंढें और इसे संपादित करें

<web-app>


<filter>
  <filter-name>CorsFilter</filter-name>
  <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
  <init-param>
    <param-name>cors.allowed.origins</param-name>
    <param-value>*</param-value>
  </init-param>
  <init-param>
    <param-name>cors.allowed.methods</param-name>
    <param-value>GET,POST,HEAD,OPTIONS,PUT</param-value>
  </init-param>
  <init-param>
    <param-name>cors.allowed.headers</param-name>
    <param-value>Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers</param-value>
  </init-param>
  <init-param>
    <param-name>cors.exposed.headers</param-name>
    <param-value>Access-Control-Allow-Origin,Access-Control-Allow-Credentials</param-value>
  </init-param>
  <init-param>
    <param-name>cors.support.credentials</param-name>
    <param-value>true</param-value>
  </init-param>
  <init-param>
    <param-name>cors.preflight.maxage</param-name>
    <param-value>10</param-value>
  </init-param>
</filter>


<filter-mapping>
  <filter-name>CorsFilter</filter-name>
  <url-pattern>/*</url-pattern>
</filter-mapping>



</web-app>

यह सभी मेजबानों तक पहुंच-नियंत्रण-अनुमति-उत्पत्ति की अनुमति देगा। यदि आपको इसे सभी होस्ट से केवल अपने होस्ट में बदलने की आवश्यकता है जिसे आप संपादित कर सकते हैं

<param-name>cors.allowed.origins</param-name>
<param-value>http://localhost:3000</param-value>

उपरोक्त कोड * से आपके http: // your_public_IP या http://www.example.com पर

आप यहाँ Tomcat फ़िल्टर प्रलेखन का उल्लेख कर सकते हैं

धन्यवाद

Answer 11

हाय यह नोड में कॉर्स की समस्या को हल करने का तरीका है। बस इन पंक्तियों को Node.js (या कभी आपका सर्वर फ़ाइल) में सर्वर "एपी" साइड पर जोड़ें, जो "कॉर्स" स्थापित करना सुनिश्चित करें

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

Answer 12

डेटा टाइप का उपयोग करें: 'jsonp', मेरे लिए काम करता है।

   async function get_ajax_data(){

       var _reprojected_lat_lng = await $.ajax({

                                type: 'GET',

                                dataType: 'jsonp',

                                data: {},

                                url: _reprojection_url,

                                error: function (jqXHR, textStatus, errorThrown) {

                                    console.log(jqXHR)

                                },

                                success: function (data) {

                                    console.log(data);



                                    // note: data is already json type, you just specify dataType: jsonp

                                    return data;

                                }

                            });





 } // function               

Answer 13

PHP के लिए, हेडर सेट करने के लिए इसका उपयोग करें।

header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: PUT, GET, POST");
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");

Answer 14

router.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Methods", "*");
res.header("Access-Control-Allow-Headers", "*");
next();});

इसे अपने मार्गों में जोड़ें जिन्हें आप फ्रंट-एंड से कॉल कर रहे हैं। Ex- अगर आप http: // localhost: 3000 / users / रजिस्टर के लिए कॉल करते हैं, तो आपको इस कोड के टुकड़े को अपने बैक-एंड .js फ़ाइल पर जोड़ना होगा जो यह मार्ग देता है।

Answer 15

यदि कोई व्यक्ति समाधान की खोज कर रहा है, यदि आप यहां एक्सप्रेस का उपयोग कर रहे हैं, तो त्वरित समाधान है।

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

1) npm का उपयोग कर cors स्थापित करें npm install cors --save

2) इसे आयात करें [आवश्यकता] const cors = require('cors')

3) इसे मिडलवेयर के रूप में उपयोग करें app.use(cors())

विवरण के लिए insatll और cors का उपयोग । यह वह है, उम्मीद है कि यह काम करता है।

Answer 16

यदि आप Google Chrome में हैं, तो इस ऐड-ऑन को स्थापित करने का प्रयास करें:

https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi/related