AngularJS एक क्रॉस-ऑरिजनल रिसोर्स के लिए एक HTTP HTTP ऑप्शन करता है

264

मैं एक क्रॉस-ऑरिजनल संसाधन के साथ संचार करने के लिए AngularJS को सेटअप करने का प्रयास कर रहा हूं, जहां एसेट होस्ट जो मेरी टेम्पलेट फ़ाइलों को वितरित करता है, एक अलग डोमेन पर है और इसलिए XHR अनुरोध करता है कि कोणीय प्रदर्शन क्रॉस-डोमेन होना चाहिए। मैंने इस काम को करने के लिए HTTP अनुरोध के लिए अपने सर्वर में उचित CORS हेडर जोड़ा है, लेकिन यह काम नहीं करता है। समस्या यह है कि जब मैं अपने ब्राउज़र (क्रोम) में HTTP अनुरोधों का निरीक्षण करता हूं, तो एसेट फ़ाइल को भेजा गया अनुरोध एक विकल्प अनुरोध है (यह एक जीईटी अनुरोध होना चाहिए)।

मुझे यकीन नहीं है कि क्या यह एंगुलरजेएस में बग है या अगर मुझे कुछ कॉन्फ़िगर करने की आवश्यकता है। जो मैं समझता हूं कि एक्सएचआर आवरण एक विकल्प HTTP अनुरोध नहीं कर सकता है, इसलिए ऐसा लगता है कि ब्राउज़र यह पता लगाने की कोशिश कर रहा है कि क्या जीईटी अनुरोध करने से पहले संपत्ति को डाउनलोड करने की "अनुमति" है। यदि यह मामला है, तो क्या मुझे एसेट होस्ट के साथ कॉर्स हेडर (एक्सेस-कंट्रोल-एक्सेप्ट-ओरिजिन: http://assass.host .. ) भी सेट करने की आवश्यकता है ?

— मात्स्को
स्रोत

226

विकल्प अनुरोध किसी भी तरह से एक AngularJS बग नहीं है, यह है कि क्रॉस-ऑरिजनल संसाधन साझा करने के लिए मानक शासित ब्राउज़रों को कैसे व्यवहार करता है। कृपया इस दस्तावेज़ को देखें: https://developer.mozilla.org/en-US/docs/HTTP_access_control , जहां "अवलोकन" अनुभाग में यह कहा गया है:

क्रॉस-ऑरिजनल रिसोर्स शेयरिंग मानक नए HTTP हेडर को जोड़कर काम करता है जो सर्वरों की उत्पत्ति के सेट का वर्णन करने की अनुमति देता है जो वेब ब्राउज़र का उपयोग करके उस जानकारी को पढ़ने की अनुमति देता है। इसके अतिरिक्त, HTTP अनुरोध विधियों के लिए जो उपयोगकर्ता डेटा पर दुष्प्रभाव (विशेष रूप से, GET के अलावा HTTP विधियों के लिए या कुछ MIME प्रकारों के साथ POST उपयोग के लिए) पैदा कर सकते हैं। विनिर्देश यह कहता है कि ब्राउज़र अनुरोध को "प्रीफ़्लाइट" करता है, सर्वर से समर्थित तरीकों को HTTP विकल्प के साथ हेडर का अनुरोध करता है, और फिर, सर्वर से "अनुमोदन" पर, वास्तविक HTTP अनुरोध विधि के साथ वास्तविक अनुरोध भेज रहा है। सर्वर ग्राहकों को सूचित कर सकते हैं कि क्या "क्रेडेंशियल" (कुकीज़ और HTTP प्रमाणीकरण डेटा सहित) अनुरोधों के साथ भेजे जाने चाहिए।

एक सामान्य समाधान प्रदान करना बहुत कठिन है जो सभी WWW सर्वरों के लिए काम करेगा क्योंकि सेटअप स्वयं सर्वर और HTTP क्रियाओं के आधार पर अलग-अलग होगा जो आप समर्थन करना चाहते हैं। मैं आपको इस उत्कृष्ट लेख ( http://www.html5rocks.com/en/tutorials/cors/ ) पर जाने के लिए प्रोत्साहित करूंगा, जिसमें सटीक हेडर पर अधिक विवरण हैं जिन्हें सर्वर द्वारा भेजे जाने की आवश्यकता है।

— pkozlowski.opensource
स्रोत

23

@matsko क्या आपने इसे हल करने के लिए विस्तृत किया? मैं उसी मुद्दे का सामना कर रहा हूं जिससे एंगुलरजेएस $resource पोस्ट अनुरोध मेरे बैकएंड एक्सप्रेसजेएस सर्वर (एक ही होस्ट पर; लेकिन एक अलग पोर्ट) के लिए एक विकल्प अनुरोध उत्पन्न कर रहा है ।

— dbau

6

सभी डाउन-वोटरों के लिए - वहाँ बाहर सभी वेब सर्वरों के लिए सटीक कॉन्फ़िगरेशन सेटअप प्रदान करना असंभव के बगल में है - इस मामले में उत्तर में 10 पृष्ठ होंगे। इसके बजाय मैं एक लेख से जुड़ा हुआ हूं जो अधिक विवरण प्रदान करता है।

— pkozlowski.opensource

5

आप सही हैं कि आप एक उत्तर नहीं दे सकते हैं - आपको अपने विकल्प प्रतिक्रिया में हेडर जोड़ने की आवश्यकता होगी जो सभी हेडर को कवर करता है जो ब्राउज़र अनुरोध करता है, मेरे मामले में, क्रोम का उपयोग करके यह हेडर 'स्वीकार' और 'x' था। -requested-साथ '। क्रोम में, मुझे पता चला कि मुझे नेटवर्क अनुरोध को देखकर क्या जोड़ने की जरूरत थी और यह देखते हुए कि क्रोम क्या मांग रहा था। मैं नोड्ज / एक्सप्रेस का उपयोग कर रहा हूं क्योंकि यह बैकअप है इसलिए मैंने एक ऐसी सेवा बनाई है जो उन सभी अनुरोधों के लिए एक प्रतिक्रिया लौटाती है जो आवश्यक सभी शीर्षकों को शामिल करती हैं। -1 क्योंकि मैं इस जवाब का उपयोग नहीं कर सकता कि मुझे क्या करना है, इसे स्वयं पता लगाना था।

— एड साइक्स

2

मुझे पता है कि यह 2 + साल बाद है, लेकिन ... ओपी कई बार जीईटी अनुरोधों को संदर्भित करता है (मेरे द्वारा जोड़ा गया जोर): «[...] संपत्ति फ़ाइल के लिए भेजा गया अनुरोध एक विकल्प अनुरोध है ( यह एक जीईटी होना चाहिए) निवेदन ) » और «ब्राउज़र यह पता लगाने की कोशिश कर रहा है कि जीईटी अनुरोध करने से पहले संपत्ति को डाउनलोड करने की" अनुमति "क्या है »। फिर यह एक AngularJS बग कैसे नहीं हो सकता है? GET के लिए प्रीफ़्लाइट अनुरोधों को मना नहीं किया जाना चाहिए?

— पोलेटिक्स

4

यदि कस्टम हेडर का उपयोग किया जाता है तो @polettix भी GET अनुरोध ब्राउज़र में प्री-फ़्लाइट अनुरोध को ट्रिगर कर सकता है। मेरे द्वारा लिंक किए गए लेख में "नहीं-इतना-सरल अनुरोध" जांचें : html5rocks.com/en/tutorials/cors/#toc-making-a-cors-request । एक बार फिर, यह ब्राउज़र का तंत्र है, न कि AngularJS।

— pkozlowski.opensource

70

कोणीय 1.2.0rc1 + के लिए आपको एक रिसोर्सउलव्हीटेलिस्ट जोड़ना होगा।

1.2: रिलीज़ संस्करण उन्होंने एक एस्केपफ़ॉरगेक्सप फ़ंक्शन जोड़ा, ताकि आपको स्ट्रिंग्स से बचना न पड़े। आप सीधे url जोड़ सकते हैं

'http://sub*.assets.example.com/**'

उप फ़ोल्डर के लिए ** जोड़ना सुनिश्चित करें। यहाँ 1.2 के लिए एक कार्यशील jsbin है: http://jsbin.com/olavok/145/edit

1.2.0rc: यदि आप अभी भी एक rc संस्करण पर हैं, तो कोणीय 1.2.0rc1 समाधान ऐसा दिखता है:

.config(['$sceDelegateProvider', function($sceDelegateProvider) {
     $sceDelegateProvider.resourceUrlWhitelist(['self', /^https?:\/\/(cdn\.)?yourdomain.com/]);
 }])

यहाँ एक jsbin उदाहरण है जहाँ यह 1.2.0rc1 के लिए काम करता है: http://jsbin.com/olavok/144/edit

पूर्व 1.2: पुराने संस्करणों के लिए ( http://better-inter.net/en enable- cors-in- angular- js/ पर जाएं ) आपको निम्नलिखित 2 पंक्तियों को अपने विन्यास में जोड़ने की आवश्यकता है:

$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];

यहाँ एक jsbin उदाहरण है जहाँ यह पूर्व 1.2 संस्करणों के लिए काम करता है: http://jsbin.com/olavok/11/edit

— JStark
स्रोत

इसने मेरे लिए काम किया। यहाँ नोडज / एक्सप्रेस के साथ सर्वर साइड के लिए उपयुक्त जादू है: gist.github.com/dirkk0/5967221

— dirkk0

14

यह केवल GET अनुरोध के लिए काम करता है, फिर भी क्रॉस डोमेन पर POST अनुरोध के लिए समाधान नहीं ढूंढ सकता है।

— Pnct

2

उपयोक्ता2304582 उत्तर के साथ इस उत्तर को मिलाकर POST अनुरोधों के लिए काम करना चाहिए। आपको अपने सर्वर को बाहरी सर्वर से POST अनुरोधों को स्वीकार करने के लिए कहना होगा जो उसने भेजा था

— चार्ली मार्टिन

ऐसा नहीं लगता है कि यह अपने आप मेरे लिए काम करेगा ... इसलिए -1। आपको उसी URL पर कुछ चाहिए जो पूर्व-उड़ान चेक के भाग के रूप में एक विकल्प अनुरोध का जवाब देगा। क्या आप बता सकते हैं कि यह क्यों काम करेगा?

— एड साइक्स

1

@EdSykes, मैंने 1.2 के उत्तर को अपडेट किया है और एक कार्यशील jsbin उदाहरण जोड़ा है। उम्मीद है कि इसे आपके लिए हल करना चाहिए। सुनिश्चित करें कि आप "जेएस के साथ भागो" बटन दबाएं।

— जेस्टार्क

62

नोट: यह निश्चित नहीं है कि यह कोणीय के नवीनतम संस्करण के साथ काम करता है।

मूल:

यह विकल्प अनुरोध को ओवरराइड करना भी संभव है (केवल क्रोम में परीक्षण किया गया था):

app.config(['$httpProvider', function ($httpProvider) {
  //Reset headers to avoid OPTIONS request (aka preflight)
  $httpProvider.defaults.headers.common = {};
  $httpProvider.defaults.headers.post = {};
  $httpProvider.defaults.headers.put = {};
  $httpProvider.defaults.headers.patch = {};
}]);

— user2899845
स्रोत

1

क्रोम, एफएफ और आईई 10. आईई 9 के साथ मेरे लिए ठीक काम करता है और नीचे विंडोज 7 या एक्सपी मशीनों पर मूल रूप से परीक्षण किया जाना चाहिए।

— डोम

3

वैकल्पिक रूप से कोई इसे $ संसाधन की विधि पर अकेले सेट कर सकता है और विश्व स्तर पर नहीं:$resource('http://yourserver/yourentity/:id', {}, {query: {method: 'GET'});

— h7r

3

क्या इसके साथ कोई पकड़ है? यह इतना आसान लगता है, और अभी तक उत्तर धागे में इतना गहरा है? संपादित करें: बिल्कुल काम नहीं किया।

— सेबेस्टियलोनो

यह कोड कहां जाता है? app.js में, नियंत्रक। js या बिल्कुल कहाँ।

— मुरलीधर फिचडिया

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

— kushalvm

34

आपकी सेवा को OPTIONSइन जैसे हेडर के साथ अनुरोध का जवाब देना चाहिए :

Access-Control-Allow-Origin: [the same origin from the request]
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: [the same ACCESS-CONTROL-REQUEST-HEADERS from request]

यहाँ एक अच्छा डॉक्टर है: http://www.html5rocks.com/en/tutorials/cors/#toc-adding-cors-support-to-the-server

— user2304582
स्रोत

1

[अनुरोध के समान समान-नियंत्रण-अनुरोधकर्ता] भाग पर विस्तृत करने के लिए, जैसा कि मैंने एक अन्य उत्तर पर उल्लेख किया है, आपको उन विकल्पों के अनुरोध को देखने की आवश्यकता है जो आपका ब्राउज़र जोड़ रहा है। फिर, उन हेडर को उस सेवा पर जोड़ें, जिसे आप (या वेब सर्वर) बना रहे हैं। व्यक्त किए गए व्यक्त में: ejs.options (' ', function (रिक्वेस्ट, रिस्पांस) {response.header ('एक्सेस-कंट्रोल- अलाउंस -ओरिजिन', ' '); response.header ('एक्सेस-कंट्रोल-अलाउंस-मेथड्स) ',' GET, PUT, POST, DELETE '); response.header (' एक्सेस-कंट्रोल-एक्सेप्ट-हेडर्स ',' कंटेंट-टाइप, ऑथराइजेशन, एक्सेप्ट, x-request-with '); response.send (); });

— एड साइक्स

1

एड साइक्स की टिप्पणी बहुत सटीक है, इस बात से अवगत रहें कि विकल्प प्रतिक्रिया पर भेजे गए हेडर और पोस्ट प्रतिक्रिया पर भेजे गए उत्तर बिल्कुल समान होने चाहिए, उदाहरण के लिए: एक्सेस-कंट्रोल-अलाउंस-ओरिजिन: * एक्सेस के समान नहीं है। नियंत्रण-अनुमति-उत्पत्ति: * रिक्त स्थान के कारण।

— लूसिया

20

वही दस्तावेज कहता है

सरल अनुरोधों (ऊपर चर्चा की गई) के विपरीत, "पहले से बताए गए अनुरोध" पहले HTTP विकल्प भेजने का अनुरोध करते हैं, दूसरे डोमेन पर संसाधन के लिए हैडर, यह निर्धारित करने के लिए कि क्या वास्तविक अनुरोध भेजने के लिए सुरक्षित है। क्रॉस-साइट अनुरोध इस तरह से पूर्वनिर्मित हैं क्योंकि उनके उपयोगकर्ता डेटा के लिए निहितार्थ हो सकते हैं। विशेष रूप से, एक अनुरोध पूर्वनिर्धारित है यदि:

यह GET या POST के अलावा अन्य तरीकों का उपयोग करता है। इसके अलावा, अगर POST का उपयोग एप्लिकेशन / x-www-form-urlencoded, मल्टीपार्ट / फॉर्म-डेटा या टेक्स्ट / प्लेन के अलावा अन्य सामग्री-प्रकार के साथ अनुरोध डेटा भेजने के लिए किया जाता है, जैसे कि यदि POST अनुरोध सर्वर पर XML पेलोड भेजता है आवेदन / xml या पाठ / xml का उपयोग कर, तो अनुरोध पूर्वनिर्मित है।

यह अनुरोध में कस्टम हेडर सेट करता है (जैसे अनुरोध एक्स-पिंगोथ्रर जैसे हेडर का उपयोग करता है)

जब मूल अनुरोध कोई कस्टम हेडर के साथ प्राप्त होता है, तो ब्राउज़र को विकल्प अनुरोध नहीं करना चाहिए जो अब करता है। समस्या यह है कि यह एक हेडर एक्स-अनुरोधित उत्पन्न करता है-जिसके साथ विकल्प अनुरोध को मजबूर करता है। इस शीर्ष लेख को हटाने के बारे में https://github.com/angular/angular.js/pull/1454 देखें

— ग्राम केतमा
स्रोत

10

इससे मेरी समस्या ठीक हो गई:

$http.defaults.headers.post["Content-Type"] = "text/plain";

— Cem Arguvanlı
स्रोत

10

यदि आप एक नोडजेएस सर्वर का उपयोग कर रहे हैं, तो आप इस लाइब्रेरी का उपयोग कर सकते हैं, यह मेरे लिए ठीक काम किया है https://github.com/expressj//ors

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

app.use(cors());

और आप एक कर सकते हैं के बाद npm update।

— Zakaria.dem
स्रोत

4

इस तरह मैंने ASP.NET पर इस मुद्दे को ठीक किया

सबसे पहले, आपको nuget पैकेज Microsoft.AspNet.WebApi.Cors जोड़ना चाहिए

फिर फ़ाइल को संशोधित करें App_Start \ WebApiConfig.cs

public static class WebApiConfig    
{
   public static void Register(HttpConfiguration config)
   {
      config.EnableCors();

      ...
   }    
}

इस विशेषता को अपने नियंत्रक वर्ग पर जोड़ें

[EnableCors(origins: "*", headers: "*", methods: "*")]
public class MyController : ApiController
{  
    [AcceptVerbs("POST")]
    public IHttpActionResult Post([FromBody]YourDataType data)
    {
         ...
         return Ok(result);
    }
}

मैं इस तरह से कार्रवाई करने के लिए json भेजने में सक्षम था

$http({
        method: 'POST',
        data: JSON.stringify(data),
        url: 'actionurl',
        headers: {
            'Content-Type': 'application/json; charset=UTF-8'
        }
    }).then(...)

संदर्भ: ASP.NET वेब एपीआई 2 में क्रॉस-ऑरिजिनल अनुरोधों को सक्षम करना

— asfez
स्रोत

2

किसी तरह मैंने इसे बदलकर तय किया

<add name="Access-Control-Allow-Headers" 
     value="Origin, X-Requested-With, Content-Type, Accept, Authorization" 
     />

सेवा

<add name="Access-Control-Allow-Headers" 
     value="Origin, Content-Type, Accept, Authorization" 
     />

— वेद प्रकाश
स्रोत

0

पूरी तरह से pkozlowski की टिप्पणी में वर्णित है। मेरे पास AngularJS 1.2.6 और ASP.NET Web Api के साथ काम करने का हल था लेकिन जब मैंने AngularJS को 1.3.3 में अपग्रेड किया था तो अनुरोध विफल हो गया।

वेब आपी सर्वर के लिए समाधान कॉन्फ़िगरेशन विधि की शुरुआत में विकल्प अनुरोधों से निपटने को जोड़ना था ( इस ब्लॉग पोस्ट में अधिक जानकारी ):

app.Use(async (context, next) =>
{
    IOwinRequest req = context.Request;
    IOwinResponse res = context.Response;
    if (req.Path.StartsWithSegments(new PathString("/Token")))
    {
        var origin = req.Headers.Get("Origin");
        if (!string.IsNullOrEmpty(origin))
        {
            res.Headers.Set("Access-Control-Allow-Origin", origin);
        }
        if (req.Method == "OPTIONS")
        {
            res.StatusCode = 200;
            res.Headers.AppendCommaSeparatedValues("Access-Control-Allow-Methods", "GET", "POST");
            res.Headers.AppendCommaSeparatedValues("Access-Control-Allow-Headers", "authorization", "content-type");
            return;
        }
    }
    await next();
});

— जिए कावुलक
स्रोत

मेरे लिए उपरोक्त काम नहीं करता। ASP.NET WEB API 2.2 और बाद में AngularJS के साथ उपयोग के लिए CORS को सक्षम करने के लिए बहुत सरल उपाय है। Microsoft WebAPI CORS पैकेज को Nuget से अपनी WebAPI कॉन्फ़िग फ़ाइल में प्राप्त करें ... var cors = new EnableCorsAttribute ("www.example.com", " ", " "); config.EnableCors (CORS); विवरण Microsoft की साइट पर यहाँ हैं asp.net/web-api/overview/security/…

— kmcnamee

0

यदि आप REST API के लिए जर्सी का उपयोग कर रहे हैं तो आप नीचे बता सकते हैं

आपको अपने webservices कार्यान्वयन को बदलना नहीं है।

मैं जर्सी 2.x के लिए समझाऊंगा

1) सबसे पहले एक ResponseFilter जोड़ें जैसा कि नीचे दिखाया गया है

import java.io.IOException;

import javax.ws.rs.container.ContainerRequestContext;
import javax.ws.rs.container.ContainerResponseContext;
import javax.ws.rs.container.ContainerResponseFilter;

public class CorsResponseFilter implements ContainerResponseFilter {

@Override
public void filter(ContainerRequestContext requestContext,   ContainerResponseContext responseContext)
    throws IOException {
        responseContext.getHeaders().add("Access-Control-Allow-Origin","*");
        responseContext.getHeaders().add("Access-Control-Allow-Methods", "GET, POST, DELETE, PUT");

  }
}

2) फिर web.xml में, जर्सी सर्वलेट घोषणा में नीचे जोड़ें

    <init-param>
        <param-name>jersey.config.server.provider.classnames</param-name>
        <param-value>YOUR PACKAGE.CorsResponseFilter</param-value>
    </init-param>

— वर्णनातीत
स्रोत

0

मैंने इस मुद्दे को ठीक करने की कोशिश की।

मेरे IIS web.config में प्रासंगिक " Access-Control-Allow-Methods" था, मैंने अपने कोणीय कोड में कॉन्फ़िग सेटिंग्स को जोड़ने का प्रयोग किया, लेकिन कुछ घंटों तक जलने के बाद क्रोम को क्रॉस-डोमेन JSON वेब सेवा पर कॉल करने की कोशिश करने के बाद, मैंने बुरी तरह से हार मान ली।

अंत में, मैं एक, गूंगा ASP.Net हैंडलर वेबपेज मिला जोड़ा कि मेरी JSON वेब सेवा को कॉल, और परिणाम देने के। यह 2 मिनट में उठ गया था।

यहाँ मैं उपयोग किया गया कोड है:

public class LoadJSONData : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain";

        string URL = "......";

        using (var client = new HttpClient())
        {
            // New code:
            client.BaseAddress = new Uri(URL);
            client.DefaultRequestHeaders.Accept.Clear();
            client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));
            client.DefaultRequestHeaders.Add("Authorization", "Basic AUTHORIZATION_STRING");

            HttpResponseMessage response = client.GetAsync(URL).Result;
            if (response.IsSuccessStatusCode)
            {
                var content = response.Content.ReadAsStringAsync().Result;
                context.Response.Write("Success: " + content);
            }
            else
            {
                context.Response.Write(response.StatusCode + " : Message - " + response.ReasonPhrase);
            }
        }
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}

और मेरे कोणीय नियंत्रक में ...

$http.get("/Handlers/LoadJSONData.ashx")
   .success(function (data) {
      ....
   });

मुझे यकीन है कि ऐसा करने का एक सरल / अधिक सामान्य तरीका है, लेकिन जीवन बहुत छोटा है ...

यह मेरे लिए काम किया, और मैं अब सामान्य काम करने के साथ मिल सकता हूँ !!

— माइक गिल्डहिल
स्रोत

0

IIS MVC 5 / Angular CLI के लिए (हां, मुझे अच्छी तरह से पता है कि आपकी समस्या Angular JS के साथ है) API के साथ प्रोजेक्ट मैंने निम्नलिखित किया है:

<system.webServer>नोड के तहत web.config

    <staticContent>
      <remove fileExtension=".woff2" />
      <mimeMap fileExtension=".woff2" mimeType="font/woff2" />
    </staticContent>
    <httpProtocol>
      <customHeaders>
        <clear />
        <add name="Access-Control-Allow-Origin" value="*" />
        <add name="Access-Control-Allow-Headers" value="Content-Type, atv2" />
        <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS"/>
      </customHeaders>
    </httpProtocol>

global.asax.cs

protected void Application_BeginRequest() {
  if (Request.Headers.AllKeys.Contains("Origin", StringComparer.OrdinalIgnoreCase) && Request.HttpMethod == "OPTIONS") {
    Response.Flush();
    Response.End();
  }
}

एमवीसी और वेबएपीआई दोनों के लिए अपने मुद्दों को ठीक करना चाहिए बिना अन्य सभी को चलाने के। मैंने तब Angular CLI प्रोजेक्ट में एक HttpInterceptor बनाया था जो संबंधित हेडर जानकारी में स्वचालित रूप से जोड़ा गया था। आशा है कि यह किसी को एक समान स्थिति में मदद करता है।

— दमन ड्रेक
स्रोत

0

थोड़ी देर पार्टी में,

यदि आप API के रूप में Angular 7 (या 5/6/7) और PHP का उपयोग कर रहे हैं और फिर भी यह त्रुटि हो रही है, तो शीर्ष लेख विकल्पों को अंतिम बिंदु (PHP API) में जोड़ने का प्रयास करें।

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

नोट : क्या केवल आवश्यकता है Access-Control-Allow-Methods। लेकिन, मैं यहां अन्य दो को चिपका रहा हूं, Access-Control-Allow-Originऔर Access-Control-Allow-Headersसिर्फ इसलिए कि आपको अपने एपीआई से ठीक से बात करने के लिए इन सभी को सही ढंग से सेट करने की जरूरत होगी।

आशा है कि यह किसी की मदद करता है।

चीयर्स।

— अंजना सिल्वा
स्रोत