शीर्ष लेख फ़ील्ड पहुँच-नियंत्रण-अनुमति-हेडर्स पहुँच-नियंत्रण-अनुमति-हेडर्स द्वारा अनुमति नहीं है


224

मैं पोस्ट अनुरोध के साथ अपने सर्वर पर फाइल भेजने की कोशिश कर रहा हूं, लेकिन जब यह भेजता है तो यह त्रुटि का कारण बनता है:

हेडर फ़ील्ड सामग्री-प्रकार एक्सेस-कंट्रोल-अनुमति-हेडर्स द्वारा अनुमति नहीं है।

इसलिए मैंने त्रुटि को नजरअंदाज किया और हेडर जोड़ा:

$http.post($rootScope.URL, {params: arguments}, {headers: {
    "Access-Control-Allow-Origin" : "*",
    "Access-Control-Allow-Methods" : "GET,POST,PUT,DELETE,OPTIONS",
    "Access-Control-Allow-Headers": "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With"
}

फिर मुझे त्रुटि मिलती है:

शीर्ष लेख फ़ील्ड पहुँच-नियंत्रण-अनुमति-मूल पहुँच-नियंत्रण-अनुमति-हेडर्स द्वारा अनुमति नहीं है

इसलिए मैंने उस पर ध्यान दिया और मेरे द्वारा पूछे गए एकमात्र प्रश्न का आधा उत्तर प्रदान किया गया और फिर विषय के रूप में बंद कर दिया गया। मुझे क्या हेडर जोड़ने / हटाने चाहिए?


ये हेडर सर्वर से ब्राउज़र में भेजे जाते हैं ताकि ब्राउज़र तय कर सके कि जेएस को प्रतिक्रिया को पार्स करने की अनुमति है या नहीं। अनुरोध में उन्हें जोड़ने का कोई मूल्य नहीं है।
पेल्लाडोल्फो

जवाबों:


189

सर्वर (कि पोस्ट अनुरोध करने के लिए भेज दिया जाता है) को शामिल करने की जरूरत है Access-Control-Allow-Headersहैडर (आदि) अपने जवाब में । क्लाइंट से उन्हें आपके अनुरोध में डालने से कोई प्रभाव नहीं पड़ता है।

ऐसा इसलिए है क्योंकि यह निर्दिष्ट करने के लिए सर्वर पर निर्भर है कि वह क्रॉस-ऑरिजनल रिक्वेस्ट स्वीकार करता है (और यह Content-Typeरिक्वेस्ट हैडर को अनुमति देता है , और इसी तरह) - क्लाइंट खुद तय नहीं कर सकता है कि किसी दिए गए सर्वर को कॉर्स की अनुमति देनी चाहिए।


5
मैं बैकएंड में हेडर कैसे सेट करूं?
user3194367

11
@ user3194367: आपके बैकएंड पर निर्भर करता है।
फेलिक्स क्लिंग

14
मुझे लगता है कि मुझे अपने सर्वर आदमी से बात करनी होगी।
user3194367

2
response.addHeader ("एक्सेस-कंट्रोल-अलाउंस-हेडर्स", "yourKey");
मयूरेश

2
@ मयूरेश तुम्हारा क्या है? Content-Type?
गुए में zhuguowei

240

मुझे भी यही समस्या थी। JQuery के दस्तावेज़ में मैंने पाया:

क्रॉस-डोमेन अनुरोधों के लिए, सामग्री के प्रकार को इसके अलावा किसी अन्य चीज़ पर सेट करना application/x-www-form-urlencoded , multipart/form-dataया text/plainएक preflight विकल्प सर्वर से अनुरोध भेजने के लिए ब्राउज़र ट्रिगर किया जाएगा।

इसलिए हालांकि सर्वर क्रॉस ओरिजिनल रिक्वेस्ट की अनुमति देता है लेकिन अनुमति नहीं देता है Access-Control-Allow-Headers, यह त्रुटियों को फेंक देगा। डिफ़ॉल्ट रूप से कोणीय सामग्री प्रकार है application/json, जो एक विकल्प अनुरोध भेजने की कोशिश कर रहा है। कोणीय डिफ़ॉल्ट हेडर को अधिलेखित करने या Access-Control-Allow-Headersसर्वर के अंत में अनुमति देने का प्रयास करें । यहाँ एक कोणीय नमूना है:

$http.post(url, data, {
    headers : {
        'Content-Type' : 'application/x-www-form-urlencoded; charset=UTF-8'
    }
});

28
यह एक स्वीकृत उत्तर होना चाहिए, अन्य की तुलना में बहुत अधिक जानकारीपूर्ण!
बजे माइक सज़ींडेल

1
मुझे मल्टीपार्ट / फॉर्म-डेटा पसंद है क्योंकि मैं कुछ करना चाहता हूं
व्लादो पांडेसिक

3
or allow Access-Control-Allow-Headers in server endकैसे?
उमर

1
@omar यह निर्भर करता है कि आप किस सर्वर प्लेटफॉर्म का उपयोग कर रहे हैं। अगर जावा अन्य उत्तरों पर उदाहरण है यदि php है तो headerप्रतिक्रिया के हेडर को सेट करने के लिए एक फ़ंक्शन नाम है
मछुआरे

1
अंत में, दो दिनों के शोध के बाद। मुझे आपको धन्यवाद देने के लिए कोई शब्द नहीं मिला है!
मिक सलारिया

51

अगर वह किसी की मदद करता है, (भले ही यह उस तरह का गरीब हो जैसा कि हमें केवल देव उद्देश्य के लिए अनुमति देना चाहिए) यहाँ एक जावा समाधान है क्योंकि मैंने उसी मुद्दे का सामना किया था। [संपादित करें] जंगली कार्ड का उपयोग न करें * क्योंकि यह एक बुरा समाधान है, localhostअगर आपको वास्तव में स्थानीय स्तर पर कुछ काम करने की आवश्यकता है तो इसका उपयोग करें ।

public class SimpleCORSFilter implements Filter {

public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
    HttpServletResponse response = (HttpServletResponse) res;
    response.setHeader("Access-Control-Allow-Origin", "my-authorized-proxy-or-domain");
    response.setHeader("Access-Control-Allow-Methods", "POST, GET");
    response.setHeader("Access-Control-Max-Age", "3600");
    response.setHeader("Access-Control-Allow-Headers", "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With");
    chain.doFilter(req, res);
}

public void init(FilterConfig filterConfig) {}

public void destroy() {}

}

जैसा कि एक्सेस-कंट्रोल-रिक्वेस्ट-हेडर्स के लिए कई उत्तरों द्वारा देखा गया है, विभिन्न वातावरणों के कारण स्पष्ट रूप से अंतर हैं। मेरे लिए जो काम किया गया था, वह अनुरोध ऑब्जेक्ट तक पहुंच सके और हेडर के लिए मानों को डंप कर दे, लेकिन विशेष रूप से "एक्सेस-कंट्रोल-रिक्वेस्ट-हेडर्स" के लिए हेडर का मूल्य। फिर, इसे अपनी प्रतिक्रिया में कॉपी / पेस्ट करें। हेटहेडर ("एक्सेस-कंट्रोल-अलाउंस-हेडर्स", "{पेस्ट यहाँ}}); मैं जावा का भी उपयोग कर रहा हूं, लेकिन मुझे अतिरिक्त मूल्यों की आवश्यकता है और कुछ इस उत्तर में उल्लेखित हैं जिनकी मुझे आवश्यकता नहीं थी।
सॉफ्टवेयर पैगंबर 13

यह लोगों की मदद करने और एक साल पहले सुराग साझा करने के लिए एक आंशिक (और जैसा कि कहा गया है, खराब) समाधान था। मैं नीचे मतदान की बात नहीं देखता, लेकिन यह आपकी स्वतंत्रता है। विचार यह है कि सर्वर की ओर हेडर को अनुमति देने के लिए है, जब एक विकल्प अनुरोध पोस्ट किया जाता है, क्लाइंट / ब्राउज़र जानता है कि हेडर की अनुमति है। मैं स्वीकार करता हूं कि थोड़ा भ्रम है, तब से मेरा CORS फ़िल्टर बहुत बदल गया है। एक बेहतर अभ्यास के रूप में, एक्सेस-कंट्रोल-अनुमति-उत्पत्ति कभी नहीं होनी चाहिए *; मेरे कार्यान्वयन में, यह एक संपत्ति द्वारा निर्धारित है।
16

समाधान को सर्वोत्तम प्रथाओं को शामिल करने के लिए संपादित किया गया है
लेक्सेंट

16

सर्वर (जिसे POST अनुरोध भेजा गया है) को अपनी प्रतिक्रिया में सामग्री-प्रकार हेडर शामिल करने की आवश्यकता है ।

यहाँ शामिल करने के लिए विशिष्ट हेडरों की एक सूची है, जिसमें एक कस्टम "X_ACCESS_TOKEN" शीर्षक शामिल है:

"X-ACCESS_TOKEN", "Access-Control-Allow-Origin", "Authorization", "Origin", "x-requested-with", "Content-Type", "Content-Range", "Content-Disposition", "Content-Description"

यह वही है जो आपके http सर्वर आदमी को उस वेब सर्वर के लिए कॉन्फ़िगर करने की आवश्यकता है जिसे आप अपने अनुरोध भेज रहे हैं।

आप "सामग्री-लंबाई" शीर्षक को उजागर करने के लिए अपने सर्वर के आदमी से पूछना चाह सकते हैं।

वह इसे क्रॉस-ओरिजनल रिसोर्स शेयरिंग (कोर) अनुरोध के रूप में पहचानेंगे और उन सर्वर कॉन्फ़िगरेशन को बनाने के निहितार्थ को समझना चाहिए।

विवरण के लिए देखें:


13

आप इसके साथ PHP में उचित शीर्ष लेख को सक्रिय कर सकते हैं:

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

4
कृपया बताएं कि आपका उत्तर अन्य उत्तरों से कैसे भिन्न है। बस कुछ कोड पोस्ट करना बहुत मददगार नहीं है।
--२२

1
आप एक रॉक-स्टार हैं, बाकी उत्तर तकनीकी पक्ष में हैं। तुम्हारा मेरे तरीके को ठीक करता है, उन तरीकों को निर्दिष्ट करके जिन्हें अनुमति दी जानी चाहिए!
डैनियल ZA

1
@DanielZA यद्यपि मैं समझता हूं कि "तकनीकी उत्तरों में आपके द्वारा दिए गए उत्तर" का मतलब क्या है, जैसा कि आप बस yout कोड रन बनाना चाहते हैं, इसलिए SO का मतलब चीजों के तकनीकी पक्ष में तल्लीन करना है क्योंकि आपको पता होना चाहिए कि चीजें सिर्फ काम क्यों कर रही हैं फिर कैसे काम करें। समाधान पर टिप्पणी करते समय इस व्यवहार को न करें ...
निकोलसस्सी 18

8

नोडज के साथ मेरे लिए निम्नलिखित काम करता है:

xServer.use(function(req, res, next) {
  res.setHeader("Access-Control-Allow-Origin", 'http://localhost:8080');
  res.setHeader('Access-Control-Allow-Methods', 'POST,GET,OPTIONS,PUT,DELETE');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type,Accept');

  next();
});

पहुँच-नियंत्रण-अनुमति-विधियों का क्रम क्या मायने रखता है?
विनी

@vini, मुझे लगता है कि इससे कोई फर्क नहीं पड़ता।
निंजा कोडिंग

4

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

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


मैं बैकएंड में हेडर कैसे सेट करूं?
user3194367

@ user3194367 - यह आपके बैकएंड पर निर्भर करता है। मुझे नहीं पता कि आप किस HTTP सर्वर या प्रोग्रामिंग भाषा का अनुरोध कर रहे हैं।
क्वेंटिन

मुझे लगता है कि मुझे अपने सर्वर आदमी से बात करनी होगी।
user3194367

3

यदि कोई एक्सप्रेस सर्वर के साथ इस समस्या का अनुभव करता है, तो निम्न मिडिलवेयर जोड़ें

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

3

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

mayba प्राप्त अनुरोधों की आवश्यकता के बिना काम करेगा, लेकिन पोस्ट और डालता है और हटाता है आपको समस्याओं के बिना परीक्षण के लिए cors प्लगइन स्थापित करने की आवश्यकता होगी, यह निश्चित नहीं कि ठंडा नहीं है, लेकिन मुझे नहीं पता कि लोग इसे CORS प्लगइन के बिना कैसे करते हैं।

और यह भी सुनिश्चित करें कि कुछ जोंस की स्थिति से json प्रतिक्रिया 400 वापस नहीं आ रही है


3

यह बैकएंड समस्या है। अगर बैकएंड चेंजर्स c.js पर sails api का उपयोग करते हैं और अपने दायर को यहाँ जोड़ें

module.exports.cors = {
  allRoutes: true,
  origin: '*',
  credentials: true,
  methods: 'GET, POST, PUT, DELETE, OPTIONS, HEAD',
  headers: 'Origin, X-Requested-With, Content-Type, Accept, Engaged-Auth-Token'
};

3

में Asp नेट कोर , जल्दी से हो यह विकास के लिए काम करने के लिए; में Startup.cs, Configure methodजोड़ें

app.UseCors(options => options.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader());

2

मेरे मामले में, मुझे वेब सेवा विधि में @HeaderParam के रूप में कई पैरामीटर प्राप्त हो रहे हैं।

इन मापदंडों को आपके कोर फ़िल्टर में इस तरह घोषित किया जाना चाहिए:

@Provider
public class CORSFilter implements ContainerResponseFilter {

    @Override
    public void filter(ContainerRequestContext requestContext, ContainerResponseContext responseContext) throws IOException {

        MultivaluedMap<String, Object> headers = responseContext.getHeaders();

        headers.add("Access-Control-Allow-Origin", "*");
        ...
        headers.add("Access-Control-Allow-Headers", 
        /*
         * name of the @HeaderParam("name") must be declared here (raw String):
         */
        "name", ...);
        headers.add("Access-Control-Allow-Credentials", "true");
        headers.add("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS, HEAD");   
    }
}

2

Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headersत्रुटि का अर्थ है कि Access-Control-Allow-OriginHTTP हेडर का क्षेत्र प्रतिक्रिया द्वारा संभाला या अनुमति नहीं है। Access-Control-Allow-Originअनुरोध शीर्ष लेख से फ़ील्ड निकालें ।


2

यदि आप उपयोग कर रहे हैं localhostऔर PHP इस मुद्दे को हल करने के लिए सेट है:

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Headers: Content-Type'); 

अपने फ्रंट-एंड उपयोग से:

{headers: {"Content-Type": "application/json"}}

और उछाल से कोई और अधिक मुद्दों localhost!

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