Angular 5'te üstbilgiye CORS isteği nasıl eklenir

Başlığa CORS ekledim ancak isteğimde hala CORS sorununu alıyorum. Başlıklardaki CORS ve diğer istekleri eklemenin ve işlemenin doğru yolu nedir?

İşte servis dosyası kodu:

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', []))
    );
}

Hata:

Ön kontrol talebine verilen yanıt, erişim kontrol kontrolünü geçmiyor: İstenen kaynakta 'Access-Control-Allow-Origin' başlığı yok. Bu nedenle ' http: // localhost: 4200 ' kaynağına erişime izin verilmiyor

başarısız: HTTP hatası yanıtı (bilinmeyen url): 0 Bilinmeyen Hata

Sunucu tarafı kodumda, dizin dosyasına CORS ekledim.

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');

Deneyimlerime göre, eklentiler HTTP ile çalıştı ancak en son httpClient ile çalışmadı. Ayrıca, sunucuda CORS yanıt başlıklarını yapılandırmak gerçekten bir seçenek değildi. Bu yüzden, proxy.conf.jsonproxy sunucusu olarak davranacak bir dosya oluşturdum .

Bununla ilgili daha fazlasını buradan okuyun .

proxy.conf.json dosya:

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

Dosyayı aynı dizine proxy.conf.jsondosyanın hemen yanına yerleştirdim package.json.

Sonra package.json dosyasındaki start komutunu değiştirdim:

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

Uygulama bileşenimden gelen HTTP çağrısı:

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

Son olarak uygulamamı çalıştırmak için npm startveyang serve --proxy-config proxy.conf.json

Ayrıca fetchişlevi ve no-corsmodu deneyebilirsiniz . Bazen onu yapılandırmayı Angular'ın yerleşik http modülünden daha kolay buluyorum. Chrome Dev araçları ağ sekmesinde istekleri sağ tıklayabilir ve bunları getirme söz diziminde kopyalayabilirsiniz, bu harika.

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

Benim gibiyseniz ve yerel bir SMS Ağ Geçidi sunucusu kullanıyorsanız ve 192.168.0.xx gibi bir IP'ye GET talebinde bulunursanız, kesinlikle CORS hatası alacaksınız.

Maalesef Açısal bir çözüm bulamadım, ancak önceki bir tekrarın yardımıyla çözümümü aldım ve Angular 7 8 9 için güncellenmiş bir sürüm yayınlıyorum

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

Her zamanki gibi abone olun.

NG5'te HttpClient için başlığın şöyle görünmesini sağlayın:

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

Localhost url'nizle api araması yapabileceksiniz, bu benim için çalışıyor ..

• Lütfen başlıktaki parametreler sütununuzu asla unutmayın: örneğin params: new HttpParams (). Set ('program_id', this.program_id)

Angular 6'da httpClient ile bir POST da OPTIONS isteği yapıyordu:

Başlıklar Genel:

İstek URL'si: https: //hp-probook/perl-bin/muziek.pl/=/postData
İstek Yöntemi: SEÇENEKLER
Durum Kodu: 200 Tamam
Uzak Adres: 127.0.0.1: 443
Yönlendirme Politikası: eski sürüme geçildiğinde yönlendiren yok

Perl REST sunucum OPTIONS isteğini dönüş kodu 200 ile gerçekleştiriyor.

Sonraki POST isteği Üstbilgisi:

Kabul etmek:*/*
Accept-Encoding: gzip, deflate, br
Kabul-Dili: nl-NL, nl; q = 0.8, en-US; q = 0.6, en; q = 0.4
Erişim-Kontrol-İstek-Başlıkları: içerik türü
Erişim-Kontrol-İstek-Yöntemi: POST
Bağlantı: canlı tutma
Ana bilgisayar: hp-probook
Menşei: http: // localhost: 4200
Başvuran: http: // localhost: 4200 /
Kullanıcı Aracısı: Mozilla / 5.0 (X11; Linux x86_64) AppleWebKit / 537.36 (KHTML, Gecko gibi) Chrome / 59.0.3071.109 Safari / 537.36

Erişim-Kontrol-İsteği Başlıkları: içerik türü bildirimine bakın.

Bu nedenle, arka uç perl betiğim aşağıdaki başlıkları kullanıyor:

 - "Access-Control-Allow-Origin" => '*',
 - "Erişim Kontrolü-İzin Verme Yöntemleri" => 'GET, POST, PATCH, DELETE, PUT, OPTIONS',
 - "Access-Control-Allow-Headers" => 'Origin, Content-Type, X-Auth-Token, content-type',

Bu kurulumla GET ve POST benim için çalıştı!

lütfen açısal cors'tan istekleri içe aktarın

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

ve kodunuza aşağıdaki gibi istek seçenekleri ekleyin

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

api isteğinizde istek gönder seçeneği

aşağıdaki kod parçacığı-

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

ve arka uç PHP kodunuza tüm api isteğinin ilk geleceği yere CORS ekleyin.

bunu deneyin ve çalışıp çalışmadığını bana bildirin Aynı sorunla karşılaştım, çalışmayan angular5'ten CORS ekliyordum, ardından arka uca CORS ekledim ve benim için çalıştı

Aşağıdakiler saatlerce denedikten sonra benim için çalıştı

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

Ancak aşağıdaki kod işe yaramadı, nedenini tam olarak bilmiyorum, umarım birisi bu cevabı geliştirebilir.

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