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

Question

मैं कई बार कॉर्स मुद्दों पर आया हूं और आमतौर पर इसे ठीक कर सकता हूं लेकिन मैं वास्तव में एक एमईएन स्टैक प्रतिमान को देखकर इसे समझना चाहता हूं।

इससे पहले कि मैं इन चीजों को पकड़ने के लिए बस अपने एक्सप्रेस सर्वर में मिडलवेयर जोड़ा, लेकिन ऐसा लगता है कि कुछ प्रकार का प्री-हुक है जो मेरे अनुरोधों को गलत कर रहा है।

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

मैंने मान लिया कि मैं ऐसा कर सकता हूं:

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Headers","*")
})

या समतुल्य लेकिन यह इसे ठीक करने के लिए प्रतीत नहीं होता है। मैंने भी जरूर कोशिश की

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Headers","Access-Control-Allow-Headers")
})

फिर भी नसीब नहीं।

Answer 1

जब आप कस्टम रिक्वेस्ट हेडर के साथ खेलना शुरू करते हैं तो आपको एक कॉर्स प्रीफ्लाइट मिलेगा। यह एक अनुरोध है जो HTTP OPTIONSक्रिया का उपयोग करता है और इसमें कई हेडर शामिल हैं, जिनमें से एक Access-Control-Request-Headersहेडर को सूचीबद्ध करना जो क्लाइंट अनुरोध में शामिल करना चाहता है।

इस कार्य को करने के लिए आपको उचित CORS हेडर के साथ उस CORS प्रीफ़्लाइट का उत्तर देना होगा। जिनमें से एक वास्तव में है Access-Control-Allow-Headers। उस शीर्ष लेख में उन्हीं मानों को समाहित करने की आवश्यकता होती है जो Access-Control-Request-Headersशीर्ष लेख में निहित हैं (या अधिक)।

https://fetch.spec.whatwg.org/#http-cors-protocol इस सेटअप को और अधिक विस्तार से बताता है।

Comments

यदि आप Chrome का उपयोग कर रहे हैं और यह सुनिश्चित नहीं कर रहे हैं कि हेडर के लिए क्या अनुरोध किया जा रहा है, तो डेवलपर कंसोल का उपयोग करें, नेटवर्क कॉल किए जा रहे कॉल का चयन करें और आप देख सकते हैं कि हेडर द्वारा क्या अनुरोध किया जा रहा हैAccess-Control-Request-Headers

— लियोनेल मॉरिसन

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

— सॉफ्टवेयर प्रोफेट्स

उदाहरण कृपया!

— Demodave

मेरे लिए @Demodave इसका उदाहरण थाheader("Access-Control-Allow-Headers: Content-Type")

— जोशुआ डक्सबरी

@ लियोनेलमोरिसन, हेडर के मिलान के लिए क्रोम देव टूल्स का उपयोग। अच्छी तरह से समझाया !!!

— सविना चंदला

Answer 2

इसे काम करने के लिए आपको जोड़ना होगा।

response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Credentials", "true");
response.setHeader("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT");
response.setHeader("Access-Control-Allow-Headers", "Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers");

यह देखने के लिए कि सर्वर पर होस्ट की गई सेवा को किसी भिन्न डोमेन पर ब्राउज़र से एक्सेस करने की अनुमति है या नहीं, यह देखने के लिए ब्राउज़र प्रीफ़लाइट अनुरोध (विधि प्रकार विकल्प के साथ) भेजता है। प्रीफ़्लाइट अनुरोध के जवाब में यदि आप हेडर के ऊपर इंजेक्ट करते हैं तो ब्राउज़र समझता है कि आगे कॉल करना ठीक है और मुझे मेरे वास्तविक GET / POST कॉल के लिए एक वैध प्रतिक्रिया मिलेगी। आप उस डोमेन को बाधित कर सकते हैं जिसके लिए एक्सेस-कंट्रोल-अलाउंस-ओरिजिन "," लोकलहोस्ट, xvz.com "के बजाय * का उपयोग करके दी गई है। (* सभी डोमेन को एक्सेस प्रदान करेगा)

Comments

आप के *लिए ...-Originऔर के trueलिए गठबंधन नहीं कर सकते ...-Credentials। यह गैर-क्रेडेंशियल अनुरोधों के लिए विफल नहीं होगा, लेकिन यह क्रेडेंशियल अनुरोधों के लिए भी काम नहीं करेगा। मैंने अपने उत्तर में जो लिंक पोस्ट किया है, उसे देखें।

— ऐनी

धन्यवाद मनीष अरोरा, मैंने आपके एपीआई में आपके समाधान का उपयोग किया और यह काम किया। HttpContext.Response.Headers.Add ("एक्सेस-कंट्रोल-अलाउंस-मेथड्स", "GET, HEAD, OPTIONS, POST, PUT"); HttpContext.Response.Headers.Add ("Access-Control-Allow-Headers", "Access-Control-Allow-Headers, Origin, Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access) नियंत्रण-अनुरोध-हेडर "); HttpContext.Response.Headers.Add ("एक्सेस-कंट्रोल-अलाउंस-ओरिजिन", " लोकलहोस्ट: 4200" );

— रामकृष्णंकट

यह सर्वर साइड कह रहा है यह सब प्रतिक्रिया हेडर मुंगिंग "प्रीफ़लाइट" के कारण आवश्यक है? क्यों? विशेष रूप से पूरी तरह से मानक हेडर के लिए? थोड़ी देर के लिए HTTP का उपयोग करने से मुझे यह खबर है कि इतनी बॉयलरप्लेट की आवश्यकता है।

— सामंथा एटकिंस

@ मनीष मेरे पास एक्सेस-कंट्रोल-अलाउंस-हेडर्स के लिए मूल्यों का एक अलग सेट था जो काम नहीं करता था। आपके मूल्यों का सेट किया। समय और हताशा को बचाने के लिए धन्यवाद।

— अजाकिम

वहाँ कुछ हेडर वाइल्डकार्ड के लिए एक रास्ता है? क्या सभी हेडर को वाइल्डकार्ड करना एक बुरा विचार है? जैसे कि response.setHeader("Access-Control-Allow-Headers", "*")? ऐसा करने का सुरक्षा निहितार्थ क्या है?

— वडकोरक्वेस्ट

Answer 3

इस समस्या से निजात मिली

 "Origin, X-Requested-With, Content-Type, Accept, Authorization"

मेरी परियोजना में विशेष (express.js / नोडज)

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization");
  next();
});

अपडेट करें:

हर बार त्रुटि: Access-Control-Allow-Headers is not allowed by itself in preflight responseत्रुटि आप देख सकते हैं कि क्रोम डेवलपर टूल में क्या गलत है :

उपरोक्त त्रुटि याद आ रही है Content-Typeइसलिए स्ट्रिंग Content-Typeको जोड़ेंAccess-Control-Allow-Headers

Comments

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

— सॉफ्टवेयर पैगंबर

यह भी सुनिश्चित करें कि आप प्राधिकरण कर रहे हैं अमेरिकी तरीका ब्रिटश तरीका नहीं है। मेरे जीवन का आधा घंटा मुझे वापस नहीं मिलेगा। Thx यूएसए! [sigh]

— भू

Answer 4

स्वीकृत उत्तर ठीक है, लेकिन मुझे इसे समझने में कठिनाई हुई। तो यहाँ एक सरल उदाहरण है इसे स्पष्ट करने के लिए।

मेरे अजाक्स अनुरोध में मेरे पास एक मानक प्राधिकरण हेडर था।

$$(document).on('ajaxStart', function(e){
var auth_token = localStorage.getItem(SB_TOKEN_MOBILE);
if( auth_token ) {
    var xhr = e.detail.xhr;

    xhr.setRequestHeader('**Authorization**', 'Bearer ' + auth_token);
}

यह कोड प्रश्न में त्रुटि पैदा करता है। मुझे अपने नोडज सर्वर में क्या करना था, अनुमति प्राप्त हेडर में प्राधिकरण जोड़ना था:

res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type,**Authorization**');

Answer 5

अन्य उत्तरों में जोड़ने के लिए। मुझे भी यही समस्या थी और यह वह कोड है जिसका उपयोग मैंने अपने एक्सप्रेस सर्वर में REST कॉल की अनुमति देने के लिए किया था:

app.all('*', function(req, res, next) {
  res.header('Access-Control-Allow-Origin', 'URLs to trust of allow');
  res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
  res.header('Access-Control-Allow-Headers', 'Content-Type');
  if ('OPTIONS' == req.method) {
  res.sendStatus(200);
  } else {
    next();
  }
});

यह कोड मूल रूप से क्या करता है सभी अनुरोधों को स्वीकार करता है और कॉर्स हेडर जोड़ता है, फिर मेरे सामान्य मार्गों के साथ जारी रखें। जब कोई विकल्प होता है तो वह केवल कोर हेडर के साथ प्रतिक्रिया करता है।

संपादित करें: मैं एक ही मशीन पर दो अलग-अलग नोडज एक्सप्रेस सर्वर के लिए इस फिक्स का उपयोग कर रहा था। अंत में मैंने एक साधारण प्रॉक्सी सर्वर के साथ समस्या को ठीक किया।

Comments

धन्यवाद! क्या आप इस बारे में विस्तृत जानकारी दे सकते हैं कि आपने एक साधारण प्रॉक्सी सर्वर का उपयोग कैसे किया?

— austin_ce

Answer 6

मैं खुद इस मुद्दे पर भाग गया, ASP.NET के संदर्भ में सुनिश्चित करें कि आपका Web.config इस तरह दिखता है:

  <system.webServer>
<modules>
  <remove name="FormsAuthentication" />
</modules>

<handlers>
  <remove name="ExtensionlessUrlHandler-Integrated-4.0" />
  <!--<remove name="OPTIONSVerbHandler"/>-->
  <remove name="TRACEVerbHandler" />
  <!--
  <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
  -->
</handlers>

<httpProtocol>
  <customHeaders>
    <add name="Access-Control-Allow-Origin" value="*" />
    <add name="Access-Control-Allow-Headers" value="Content-Type, Authorization" />
    <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
  </customHeaders>
</httpProtocol>

Access-Control-Allow-Headersकुंजी के लिए प्राधिकरण मान पर ध्यान दें । मुझे प्राधिकरण मान याद आ रहा था, यह कॉन्फिगरेशन मेरी समस्या को हल करता है।

Answer 7

बहुत अच्छा मैं इसे एक silex परियोजना पर इस्तेमाल किया

$app->after(function (Request $request, Response $response) {
        $response->headers->set('Access-Control-Allow-Origin', '*');
        $response->headers->set("Access-Control-Allow-Credentials", "true");
        $response->headers->set("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT");
        $response->headers->set("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization");
    });

Comments

हालांकि यह कोड प्रश्न का उत्तर दे सकता है, लेकिन यह समस्या का हल कैसे और / या इसके बारे में अतिरिक्त संदर्भ प्रदान करता है, इससे उत्तर के दीर्घकालिक मूल्य में सुधार होगा।

— बडाकाडबरा

Answer 8

क्रोम में:

अनुरोध हेडर फ़ील्ड X-Requested-With को प्रीफ़्लाइट प्रतिक्रिया में Access-Control-Allow-Headers द्वारा अनुमति नहीं है।

मेरे लिए, यह त्रुटि इस कॉल के URL में अनुगामी स्थान द्वारा ट्रिगर की गई थी ।

jQuery.getJSON( url, function( response, status, xhr ) {
   ...
}

Answer 9

बस यह जोड़ने के लिए कि आप उन हेडर को भी Webpack config फाइल में डाल सकते हैं। मुझे अपने मामले में उनकी आवश्यकता थी क्योंकि मैं वेबपैक देव सर्वर चला रहा था।

devServer: {
    headers: {
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Credentials": "true",
      "Access-Control-Allow-Methods": "GET,HEAD,OPTIONS,POST,PUT",
      "Access-Control-Allow-Headers": "Origin, X-Requested-With, Content-Type, Accept, Authorization"
},

Answer 10

res.setHeader ('पहुंच-नियंत्रण-अनुमति-हेडर्स', '*');

Answer 11

मुझे ओपी ने Django, React और django-cors-headers lib का उपयोग करते हुए त्रुटि प्राप्त की। इस स्टैक के साथ इसे ठीक करने के लिए, निम्नलिखित करें:

सेटिंग्स में, आधिकारिक दस्तावेज के अनुसार नीचे जोड़ें ।

from corsheaders.defaults import default_headers

CORS_ALLOW_HEADERS = default_headers + (
'YOUR_HEADER_NAME',
)

Answer 12

यह समस्या तब होती है जब हम अनुरोध के लिए कस्टम हेडर बनाते हैं। यह अनुरोध HTTP OPTIONSजिसमें कई हेडर का उपयोग करता है और शामिल होता है।

इस अनुरोध के लिए आवश्यक हेडर है Access-Control-Request-Headers, जो प्रतिक्रिया हेडर का हिस्सा होना चाहिए और सभी मूल से अनुरोध की अनुमति होनी चाहिए। कभी-कभी Content-Typeप्रतिक्रिया के शीर्षलेख में भी इसकी आवश्यकता होती है । तो आपकी प्रतिक्रिया हैडर जैसी होनी चाहिए -

response.header("Access-Control-Allow-Origin", "*"); // allow request from all origin
response.header("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT");
response.header("Access-Control-Allow-Headers", "Access-Control-Allow-Headers, Origin, X-Requested-With, Content-Type, Accept, Authorization");

Answer 13

पोस्ट एपीआई कॉल में हम रिक्वेस्ट बॉडी में डेटा भेज रहे हैं। इसलिए अगर हम एपीआई कॉल में कोई अतिरिक्त हेडर जोड़कर डेटा भेजेंगे। फिर पहले OPTIS API कॉल होगी और फिर पोस्ट कॉल होगा। इसलिए, आपको पहले OPTION API कॉल को हैंडल करना होगा।

आप एक फ़िल्टर लिखकर समस्या को संभाल सकते हैं और इसके अंदर आपको विकल्प कॉल एपीआई कॉल की जांच करनी होगी और 200 ओके स्टेटस वापस करना होगा। नीचे नमूना कोड है:

package com.web.filter;

import java.io.IOException;

import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.catalina.connector.Response;

public class CustomFilter implements Filter {
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain)
            throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) res;
        HttpServletRequest httpRequest = (HttpServletRequest) req;
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, PUT, OPTIONS, DELETE");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "x-requested-with, Content-Type");
        if (httpRequest.getMethod().equalsIgnoreCase("OPTIONS")) {
            response.setStatus(Response.SC_OK);
        }
        chain.doFilter(req, res);
    }

    public void init(FilterConfig filterConfig) {
        // TODO
    }

    public void destroy() {
        // Todo
    }

}

Answer 14

यदि आप अनुरोध हेडर पर एक कस्टम हेडर जोड़ने की कोशिश कर रहे हैं, तो आपको सर्वर को यह बताना होगा कि विशिष्ट हेडर को लेने की अनुमति है। ऐसा करने का स्थान उस श्रेणी में है जो अनुरोधों को फ़िल्टर करता है। नीचे दिखाए गए उदाहरण में, कस्टम हेडर का नाम "प्रकार" है:

public class CorsFilter implements Filter {
    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
        HttpServletRequest request = (HttpServletRequest) req;
        HttpServletResponse response = (HttpServletResponse) res;
        response.setHeader("Access-Control-Allow-Origin",  request.getHeader("Origin"));
        response.setHeader("Access-Control-Allow-Credentials", "true");
        response.setHeader("Access-Control-Allow-Methods", "GET,PUT,POST,DELETE,PATCH,OPTIONS");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "Content-Type, Accept, X-Requested-With, remember-me, Authorization, type ");
        response.setHeader("Access-Control-Expose-Headers","Authorization");
    }
}

Answer 15

लगभग एक दिन बिताने के बाद, मुझे सिर्फ यह पता चला कि नीचे दिए गए दो कोड जोड़ने से मेरी समस्या हल हो गई।

इसे Global.asax में जोड़ें

protected void Application_BeginRequest()
{
  if (Request.HttpMethod == "OPTIONS")
  {
    Response.StatusCode = (int)System.Net.HttpStatusCode.OK;             
    Response.End();
  }
}

और वेब कॉन्फ़िगरेशन में नीचे जोड़ें

<httpProtocol>
  <customHeaders>
    <add name="Access-Control-Allow-Origin" value="*" />        
    <add name="Access-Control-Allow-Methods" value="*" />
    <add name="Access-Control-Allow-Headers" value="Content-Type, Authorization" />
  </customHeaders>
</httpProtocol>

Answer 16

मुझे भी कोणीय 6 में एक ही समस्या का सामना करना पड़ा। मैंने नीचे दिए गए कोड का उपयोग करके समस्या को हल किया। घटक .ts फ़ाइल में कोड जोड़ें।

import { HttpHeaders } from '@angular/common/http';

headers;

constructor() {
    this.headers = new HttpHeaders();
    this.headers.append('Access-Control-Allow-Headers', 'Authorization');
}

getData() {
    this.http.get(url,this.headers). subscribe (res => {
    // your code here...
})}

Answer 17

मैं उसी मुद्दे का सामना कर रहा था।

मैंने एक साधारण बदलाव किया।

  <modulename>.config(function($httpProvider){
    delete $httpProvider.defaults.headers.common['X-Requested-With'];
});

Answer 18

संदेश स्पष्ट है कि एपीआई में 'प्राधिकरण' की अनुमति नहीं है।
पहुँच-नियंत्रण-अनुमति-हेडर सेट करें : "सामग्री-प्रकार, प्राधिकरण"

Answer 19

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

app.get('/with-cors', cors(), (req, res, next) => {
  res.json({ msg: 'WHOAH with CORS it works! 🔝 🎉' })
})

समारोह में cors जोड़ना मेरे लिए क्या काम कर रहा है