कोणीय 5 में हेडर में कोर के अनुरोध को कैसे जोड़ा जाए

Question 1

मैंने हेडर में कोर्स को जोड़ा है, लेकिन मुझे अभी भी अपने अनुरोध में कॉर्स मुद्दा मिल रहा है। हेडर में CORS और अन्य अनुरोधों को जोड़ने और संभालने का सही तरीका क्या है?

यहाँ सेवा फ़ाइल कोड है:

import { HttpClient, HttpHeaders, HttpClientModule } from '@angular/common/http';
const httpOptions = {
  headers: new HttpHeaders({ 
    'Access-Control-Allow-Origin':'*',
    'Authorization':'authkey',
    'userid':'1'
  })
};

public baseurl = 'http://localhost/XXXXXX';

userAPI(data): Observable<any> {
  return this.http.post(this.baseurl, data, httpOptions)
    .pipe(
      tap((result) => console.log('result-->',result)),
      catchError(this.handleError('error', []))
    );
}

त्रुटि:

प्रीफ़्लाइट अनुरोध का उत्तर एक्सेस कंट्रोल चेक पास नहीं करता है: अनुरोधित संसाधन पर कोई 'एक्सेस-कंट्रोल-अनुमति-उत्पत्ति' हेडर मौजूद नहीं है। उत्पत्ति ' http: // localhost: 4200 ' इसलिए पहुंच की अनुमति नहीं है

विफल: (अज्ञात url) के लिए Http विफलता प्रतिक्रिया: 0 अज्ञात त्रुटि

अपने सर्वर-साइड कोड में, मैंने कोर को इंडेक्स फ़ाइल में जोड़ा है।

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS');
header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token');

Question 2

मेरे अनुभव में प्लगइन्स ने HTTP के साथ काम किया लेकिन नवीनतम httpClient के साथ नहीं। इसके अलावा, सर्वर पर CORS प्रतिक्रिया हेडर को कॉन्फ़िगर करना वास्तव में एक विकल्प नहीं था। इसलिए, मैंने proxy.conf.jsonप्रॉक्सी सर्वर के रूप में कार्य करने के लिए एक फ़ाइल बनाई ।

इसके बारे में यहाँ और अधिक पढ़ें ।

proxy.conf.json फ़ाइल:

{
  "/posts": {
    "target": "https://example.com",
    "secure": true,
    "pathRewrite": {
    "^/posts": ""
  },
    "changeOrigin": true
  }
}

मैंने फ़ाइल को उसी निर्देशिका में proxy.conf.jsonफ़ाइल के ठीक बगल में रखा package.json।

तब मैंने package.json फ़ाइल में स्टार्ट कमांड को संशोधित किया:

"start": "ng serve --proxy-config proxy.conf.json"

मेरे ऐप घटक से HTTP कॉल:

return this._http.get('/posts/pictures?method=GetPictures')
.subscribe((returnedStuff) => {
  console.log(returnedStuff);
});

अंत में अपना ऐप चलाने के लिए, मुझे उपयोग करना होगा npm startयाng serve --proxy-config proxy.conf.json

Question 3

आप fetchफ़ंक्शन और no-corsमोड भी आज़मा सकते हैं । मुझे कभी-कभी एंगुलर की अंतर्निहित http मॉड्यूल की तुलना में इसे कॉन्फ़िगर करना आसान लगता है। आप Chrome देव टूल नेटवर्क टैब में अनुरोधों पर राइट-क्लिक कर सकते हैं और उन्हें लाने के लिए सिंटैक्स ले सकते हैं, जो बहुत अच्छा है।

import { from } from 'rxjs';

// ...

result = from( // wrap the fetch in a from if you need an rxjs Observable
  fetch(
    this.baseurl,
    {
      body: JSON.stringify(data)
      headers: {
        'Content-Type': 'application/json',
      },
      method: 'POST',
      mode: 'no-cors'
    }
  )
);

Question 4

यदि आप मेरे जैसे हैं और आप एक स्थानीय एसएमएस गेटवे सर्वर का उपयोग कर रहे हैं और आप 192.168.0.xx जैसे आईपी के लिए एक GET अनुरोध करते हैं, तो आप सुनिश्चित करें कि कोर त्रुटि के लिए मिलेगा।

दुर्भाग्य से मुझे एक कोणीय समाधान नहीं मिला, लेकिन पिछले रिप्ले की मदद से मुझे अपना समाधान मिल गया और मैं कोणीय 7 8 9 के लिए एक अद्यतन संस्करण पोस्ट कर रहा हूं।

import {from} from 'rxjs';

getData(): Observable<any> {
    return from(
      fetch(
        'http://xxxxx', // the url you are trying to access
        {
          headers: {
            'Content-Type': 'application/json',
          },
          method: 'GET', // GET, POST, PUT, DELETE
          mode: 'no-cors' // the most important option
        }
      ));
  }

बस .subscribe हमेशा की तरह।

Question 5

शीर्ष लेख को NG5 में HttpClient के लिए इस तरह बनाएं:

let httpOptions = {
      headers: new HttpHeaders({
        'Content-Type': 'application/json',
        'apikey': this.apikey,
        'appkey': this.appkey,
      }),
      params: new HttpParams().set('program_id', this.program_id)
    };

आप अपने लोकलहोस्ट यूआरएल के साथ एपि कॉल कर पाएंगे, यह मेरे लिए काम करता है ।।

कृपया शीर्षलेख में अपने परम कोलम को कभी न भूलें: जैसे कि परम: नया HttpParams () सेट। ('program_id', this.program_id)

Question 6

एंगुलर 6 में httpClient के साथ एक पोस्ट भी एक विकल्प अनुरोध कर रहा था:

हेडर जनरल:

अनुरोध URL: https: //hp-probook/perl-bin/muziek.pl/=/postData
अनुरोध विधि: विकल्प
स्थिति कोड: 200 ठीक है
दूरस्थ पता: 127.0.0.1: 443
रेफ़रर पॉलिसी: नो-रेफ़रर-जब-डाउनग्रेड

मेरा पर्ल रीस्ट सर्वर रिटर्न कोड 200 के साथ विकल्प अनुरोध को लागू करता है।

अगले पोस्ट अनुरोध हैडर:

स्वीकार करना:*/*
स्वीकार-एनकोडिंग: gzip, deflate, br
स्वीकार करें-भाषा: nl-NL, nl, q = 0.8, en-US; q = 0.6, एन, क्यू = 0.4
पहुंच-नियंत्रण-अनुरोध-हेडर: सामग्री प्रकार
पहुंच-नियंत्रण-अनुरोध-विधि: पोस्ट
कनेक्शन: रखें जिंदा
मेजबान: HP-PROBOOK
उत्पत्ति: http: // localhost: 4200
संदर्भित: http: // localhost: 4200 /
उपयोगकर्ता-एजेंट: मोज़िला / 5.0 (X11; लिनक्स x86_64) AppleWebKit / 537.36 (KHTML, जैसे गेको) Chrome / 59.0.3071.109 Safari / 537.36

सूचना पहुँच-नियंत्रण-अनुरोध-हेडर्स: सामग्री-प्रकार।

तो, मेरी बैकेंड पर्ल स्क्रिप्ट निम्नलिखित हेडर का उपयोग करती है:

 - "अभिगम-नियंत्रण-अनुमति-उत्पत्ति" => '*',
 - "एक्सेस-कंट्रोल-अलाउंस-मेथड्स" => 'GET, POST, PATCH, DELETE, PUT, OPTIONS',
 - "एक्सेस-कंट्रोल-अनुमति-हेडर्स" => 'उत्पत्ति, सामग्री-प्रकार, एक्स-प्रामाणिक-टोकन, सामग्री-प्रकार'

इस सेटअप के साथ GET और POST ने मेरे लिए काम किया!

Question 7

कृपया कोणीय कोर्स से अनुरोधों को आयात करें

    import {RequestOptions, Request, Headers } from '@angular/http';

और नीचे दिए गए अपने कोड में अनुरोध विकल्प जोड़ें

    let requestOptions = new RequestOptions({ headers:null, withCredentials: 
    true });

अपने एपीआई अनुरोध में अनुरोध विकल्प भेजें

नीचे कोड स्निपेट-

     let requestOptions = new RequestOptions({ headers:null, 
     withCredentials: true });
     return this.http.get(this.config.baseUrl + 
     this.config.getDropDownListForProject, requestOptions)
     .map(res => 
     {
      if(res != null)
      { 
        return res.json();
        //return true;
      }
    })
  .catch(this.handleError);
   }

और अपने बैकएंड PHP कोड में CORS जोड़ें जहां सभी एपीआई अनुरोध पहले उतरेंगे।

इसे आज़माएं और मुझे बताएं कि क्या यह काम कर रहा है या नहीं, मेरे पास एक ही मुद्दा था मैं कोणीय 5 से कॉर्स जोड़ रहा था जो काम नहीं कर रहा था, तो मैंने कॉर्स को बैकेंड में जोड़ा और यह मेरे लिए काम कर गया

Question 8

निम्नलिखित ने घंटों की कोशिश के बाद मेरे लिए काम किया

      $http.post("http://localhost:8080/yourresource", parameter, {headers: 
      {'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' } }).

हालाँकि निम्नलिखित कोड काम नहीं किया, मैं स्पष्ट नहीं हूँ कि क्यों, उम्मीद है कि कोई इस उत्तर को सुधार सकता है।

          $http({   method: 'POST', url: "http://localhost:8080/yourresource", 
                    parameter, 
                    headers: {'Content-Type': 'application/json', 
                              'Access-Control-Allow-Origin': '*',
                              'Access-Control-Allow-Methods': 'POST'} 
                })