Angular CLI Proxy Cors Yapılandırma

Angular CLI Proxy Cros nasıl yapılandırılır? Bilgi almak için kullandığımız API – Rest Access-Control-Allow-Origin Hatayla karşılaşıyorsak çözümü çok basit çokta karmaşık değil 🙂 Hadi takip edin.

Örnek Hata aşağıdaki gibidir.

Error: Access to XMLHttpRequest at 'ApiAddress' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

#1 – ANGULAR CLI PROXY İÇİN DOSYASINI OLUŞTURUN

proxy.conf.json isimli yeni bir dosya oluşturun. Aşağıdaki kodu kopyalayın ve kayıt edin. Nereye oluşturacağım diyorsanız uygulamanızın ana dizine angular.json bulunduğu yere veya src dizine de kayıt edebilirsiniz.

{
    "/api": {
      "target": "https://api.spotify.com/",
      "secure": true,
      "changeOrigin": true,
      "pathRewrite": {
        "^/api": ""
      }
    }
  }

target : İlgilendiğiniz yani ulaşmak istediğiniz hedefin api adresini belirtir.
/api : Proxy için tanımladığımız yolu belirtir.
secure : Hedefin http(false) üzerinden mi yoksa https(true) üzerinden mi?

#2 – ANGULAR.JSON AYARLAYIN

Şimdi proxy.conf.json oluşturduğumuz dosyayı her zaman yani standart proxy protokolünü çalıştırılmasını istersek architect yapılandırma nesnesinin altına ekleyin.

"serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "projectname:build",
            "proxyConfig": "./proxy.conf.json"
          },