Angular 4’de “No ‘Access-Control-Allow-Origin’ Header Is Present On The Requested Resource. Origin ‘XXX’ Is Therefore Not Allowed Access” Hatası ve Çözümü

Merhaba,

Üzerine çalıştığınız bir Angular 4 uygulamasında harici bir kaynağa Http servisini kullanarak ulaşmak istiyorsunuz ama nedense yaptığınız inşa başarılı sonuç vermiyor ve hatta “Access-Control-Allow-Origin” şeklinde bilinen hatayla karşılaşıyorsanız eğer sizde CROS güvenliğinden kaynaklı hatayla artık tanışıyorsunuz demektir. Bu içeriğimizde CORS güvenliğinden kaynaklı hatanın nedenini irdeleyecek ve nasıl aşıldığını ele alacağız.

Öncelikle hatamızı tanımayla işe başlayalım. Access-Control-Allow-Origin hatasının metinsel hali aşağıdaki gibidir;

Failed to load XXX: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘YYY’ is therefore not allowed access.

Hatamızı görsel olarak görmek isteyenler içinde aşağıda ekran görüntüsünü paylaşalım;

Bu Hatanın Sebebi Nedir?

Bu hata; front-end uygulamalarda farklı serverlara yapılacak talepler neticesinde devreye giren CORS güvenlik önleminden kaynaklanmaktadır.

Nasıl Çözülür?

CORS güvenliğinden kaynaklanan bu hatanın birçok çözümü mevcuttur. Lakin benim kullandığım ve tavsiye ettiğim yöntem proxy kullanmaktan geçer.

İçeriğimizin devamında nasıl oluşturulduğuna değineceğimiz proxy yapısını kullanarak, yapılan talepleri sanki aynı server üzerinde yapılmış gibi gösterecek ve CROSS-ORIGIN hatasına yakalanmadan işlemlerimize devam edeceğiz.

Şimdi olayı örnek bir durum üzerinden değerlendirelim.

import { Component, OnInit } from '@angular/core';
import { Http, Response } from '@angular/http';
import 'rxjs/add/operator/map'
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  datas;
  constructor(private http: Http) { }
  ngOnInit() {
    this.getDatas();
  }
  getDatas() {
    this.http.get("http://www.gencayyildiz.com/jsonveri.json")
      .map(response => response.json())
      .subscribe(data => this.datas = data);
  }
}

Yukarıdaki kod bloğunda görüldüğü üzere “http://www.gencayyildiz.com/jsonveri.json” adresindeki harici kaynağa talep gönderilmektedir. Bu talep neticesinde gelen veri html kısmında listelenmek istendiğinde şuanda değerlendirdiğimiz durumla karşılaşmaktayız ve CROSS-ORIGIN hatasını almaktayız.

Bu hatayı bir çözüme kavuşturmak için proxy yapılanmasına başlayalım ve projemizin ana dizininde “proxy.config.json” isminde bir dosya açarak içini aşağıdaki gibi inşa edelim.

{
    "/": {
        "target": "http://www.gencayyildiz.com",
        "secure": false
    }
}

Yukarıdaki “proxy.config.json” isimli Proxy dosyamızı incelerseniz eğer belli başlı ayarlar yapılmıştır. Bu ayarlara değinmek gerekirse eğer;
“/” parametresi ile harici kaynağın bulunduğu dizini belirtmekteyiz(Örn; /jsonveri.json). “target” parametresi ile de harici kaynağın adresini belirtmekteyiz(Örn; http://www.gencayyildiz.com/). Bu iki değeri birleştirdiğimiz zaman vekilimiz(proxy) “http://www.gencayyildiz.com/” adresinde harici kaynağın yolunu belirlemiş olacaktır.

Şimdi tek yapmamız gereken Angular 4 uygulamamızı bu proxy ile yayına almaktır. Bu işlem için aşağıdaki kodu çalıştırmanız yeterlidir.

ng serve --proxy-config proxy.config.json

Tabi bu adımdan sonra http servisine harici kaynağın yolunu aşağıdaki gibi vermeniz gerekmektedir.

    http.get("/jsonveri.json")

Çünkü, harici kaynağın bulunacağı dizini vekil aracılığıyla “http://www.gencayyildiz.com/” şeklinde olacağını belirtmiştik. Artık bu “/jsonveri.json” kaynağını “http://www.gencayyildiz.com/” adresinde “http://www.gencayyildiz.com/jsonveri.json” şeklinde aramaktadır.

Haliyle bu düzeltmeden sonra uygulamamızın harici kaynağa sorunsuz talep oluşturabildiğini ve verileri elde edebildiğini görmekteyiz.

Velev ki proxy dosyasını ana dizinde oluşturmadık ve velev ki harici kaynak bambaşka bir dizindeyse eğer o halde yukarıda anlattığım mantıkta çalışmamızı şekillendirecek ve kodlarımız üzerinde aşağıdaki gibi ufak değişiklikler sergileyeceğiz.

Proxy dosyamızın içini ilgili dizine özel ayarlayacağız. (Örn; veri dizini)

{
    "/veri": {
        "target": "http://www.gencayyildiz.com",
        "secure": false
    }
}

Uygulamayı proxy ile yayına alırken “proxy.config.json” dosyasının olduğu dizine uygun bir şekilde kod yazacağız. (Örn; src dizini)

ng serve --proxy-config src/proxy.config.json

Bu iki hususa dikkat ederseniz çalışmada bir kusur olmayacağından emin olabilirsiniz.

Evet…
Görüldüğü üzere Access-Control-Allow-Origin hatasından bu şekilde kurtulabilmekte ve çalışmalarımızı güvenle harici kaynaklarla sağlayabilmekteyiz…

Sonraki yazılarımda görüşmek üzere…
İyi çalışmalar…