<\/div>\n

Merhaba,<\/p>\n

\u00dczerine \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131z bir Angular 4 uygulamas\u0131nda harici bir kayna\u011fa Http servisini kullanarak ula\u015fmak istiyorsunuz ama nedense yapt\u0131\u011f\u0131n\u0131z in\u015fa ba\u015far\u0131l\u0131 sonu\u00e7 vermiyor ve hatta “Access-Control-Allow-Origin<\/em>” \u015feklinde bilinen hatayla kar\u015f\u0131la\u015f\u0131yorsan\u0131z e\u011fer sizde CROS g\u00fcvenli\u011finden kaynakl\u0131 hatayla art\u0131k tan\u0131\u015f\u0131yorsunuz demektir. Bu i\u00e7eri\u011fimizde CORS g\u00fcvenli\u011finden kaynakl\u0131 hatan\u0131n nedenini irdeleyecek ve nas\u0131l a\u015f\u0131ld\u0131\u011f\u0131n\u0131 ele alaca\u011f\u0131z.<\/p>\n

\u00d6ncelikle hatam\u0131z\u0131 tan\u0131mayla i\u015fe ba\u015flayal\u0131m. Access-Control-Allow-Origin<\/em> hatas\u0131n\u0131n metinsel hali a\u015fa\u011f\u0131daki gibidir;<\/p>\n

Failed to load XXX: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘YYY’ is therefore not allowed access.<\/strong><\/em><\/p><\/blockquote>\n
Hatam\u0131z\u0131 g\u00f6rsel olarak g\u00f6rmek isteyenler i\u00e7inde a\u015fa\u011f\u0131da ekran g\u00f6r\u00fcnt\u00fcs\u00fcn\u00fc payla\u015fal\u0131m;
\n $\"Angular$ <\/a><\/p>\n
Bu Hatan\u0131n Sebebi Nedir?<\/h4>\n
Bu hata; front-end uygulamalarda farkl\u0131 serverlara yap\u0131lacak talepler neticesinde devreye giren CORS g\u00fcvenlik \u00f6nleminden kaynaklanmaktad\u0131r.<\/p>\n
Nas\u0131l \u00c7\u00f6z\u00fcl\u00fcr?<\/h4>\n
CORS g\u00fcvenli\u011finden kaynaklanan bu hatan\u0131n bir\u00e7ok \u00e7\u00f6z\u00fcm\u00fc mevcuttur. Lakin benim kulland\u0131\u011f\u0131m ve tavsiye etti\u011fim y\u00f6ntem proxy kullanmaktan ge\u00e7er.<\/p>\n
\u0130\u00e7eri\u011fimizin devam\u0131nda nas\u0131l olu\u015fturuldu\u011funa de\u011finece\u011fimiz proxy yap\u0131s\u0131n\u0131 kullanarak, yap\u0131lan talepleri sanki ayn\u0131 server \u00fczerinde yap\u0131lm\u0131\u015f gibi g\u00f6sterecek ve CROSS-ORIGIN hatas\u0131na yakalanmadan i\u015flemlerimize devam edece\u011fiz.<\/p>\n
\u015eimdi olay\u0131 \u00f6rnek bir durum \u00fczerinden de\u011ferlendirelim.<\/p>\n
\r\nimport { Component, OnInit } from '@angular\/core';\r\nimport { Http, Response } from '@angular\/http';\r\nimport 'rxjs\/add\/operator\/map'\r\n@Component({\r\n selector: 'app-root',\r\n templateUrl: '.\/app.component.html',\r\n styleUrls: ['.\/app.component.css']\r\n})\r\nexport class AppComponent implements OnInit {\r\n datas;\r\n constructor(private http: Http) { }\r\n ngOnInit() {\r\n this.getDatas();\r\n }\r\n getDatas() {\r\n this.http.get("http:\/\/www.gencayyildiz.com\/jsonveri.json")\r\n .map(response => response.json())\r\n .subscribe(data => this.datas = data);\r\n }\r\n}\r\n<\/pre>\n
Yukar\u0131daki kod blo\u011funda g\u00f6r\u00fcld\u00fc\u011f\u00fc \u00fczere “http:\/\/www.gencayyildiz.com\/jsonveri.json” adresindeki harici kayna\u011fa talep g\u00f6nderilmektedir. Bu talep neticesinde gelen veri html k\u0131sm\u0131nda listelenmek istendi\u011finde \u015fuanda de\u011ferlendirdi\u011fimiz durumla kar\u015f\u0131la\u015fmaktay\u0131z ve CROSS-ORIGIN hatas\u0131n\u0131 almaktay\u0131z.<\/p>\n
Bu hatay\u0131 bir \u00e7\u00f6z\u00fcme kavu\u015fturmak i\u00e7in proxy yap\u0131lanmas\u0131na ba\u015flayal\u0131m ve projemizin ana dizininde “proxy.config.json” isminde bir dosya a\u00e7arak i\u00e7ini a\u015fa\u011f\u0131daki gibi in\u015fa edelim.<\/p>\n
\r\n{\r\n "\/": {\r\n "target": "http:\/\/www.gencayyildiz.com",\r\n "secure": false\r\n }\r\n}\r\n<\/pre>\n
Yukar\u0131daki “proxy.config.json” isimli Proxy dosyam\u0131z\u0131 incelerseniz e\u011fer belli ba\u015fl\u0131 ayarlar yap\u0131lm\u0131\u015ft\u0131r. Bu ayarlara de\u011finmek gerekirse e\u011fer;
\n“\/” parametresi ile harici kayna\u011f\u0131n bulundu\u011fu dizini belirtmekteyiz(\u00d6rn; \/jsonveri.json)<\/spam>. “target” parametresi ile de harici kayna\u011f\u0131n adresini belirtmekteyiz(\u00d6rn; http:\/\/www.gencayyildiz.com\/)<\/spam>. Bu iki de\u011feri birle\u015ftirdi\u011fimiz zaman vekilimiz(proxy) “http:\/\/www.gencayyildiz.com\/” adresinde harici kayna\u011f\u0131n yolunu belirlemi\u015f olacakt\u0131r.<\/p>\n
\u015eimdi tek yapmam\u0131z gereken Angular 4 uygulamam\u0131z\u0131 bu proxy ile yay\u0131na almakt\u0131r. Bu i\u015flem i\u00e7in a\u015fa\u011f\u0131daki kodu \u00e7al\u0131\u015ft\u0131rman\u0131z yeterlidir.<\/p>\n
\r\nng serve --proxy-config proxy.config.json\r\n<\/pre>\n
$\"Angular$ <\/a>
\nTabi bu ad\u0131mdan sonra http servisine harici kayna\u011f\u0131n yolunu a\u015fa\u011f\u0131daki gibi vermeniz gerekmektedir.<\/p>\n
\r\n http.get("\/jsonveri.json")\r\n<\/pre>\n
\u00c7\u00fcnk\u00fc, harici kayna\u011f\u0131n bulunaca\u011f\u0131 dizini vekil arac\u0131l\u0131\u011f\u0131yla “http:\/\/www.gencayyildiz.com\/” \u015feklinde olaca\u011f\u0131n\u0131 belirtmi\u015ftik. Art\u0131k bu “\/jsonveri.json” kayna\u011f\u0131n\u0131 “http:\/\/www.gencayyildiz.com\/” adresinde “http:\/\/www.gencayyildiz.com\/jsonveri.json” \u015feklinde aramaktad\u0131r.<\/p>\n
Haliyle bu d\u00fczeltmeden sonra uygulamam\u0131z\u0131n harici kayna\u011fa sorunsuz talep olu\u015fturabildi\u011fini ve verileri elde edebildi\u011fini g\u00f6rmekteyiz.<\/p>\n
Velev ki proxy dosyas\u0131n\u0131 ana dizinde olu\u015fturmad\u0131k ve velev ki harici kaynak bamba\u015fka bir dizindeyse e\u011fer o halde yukar\u0131da anlatt\u0131\u011f\u0131m mant\u0131kta \u00e7al\u0131\u015fmam\u0131z\u0131 \u015fekillendirecek ve kodlar\u0131m\u0131z \u00fczerinde a\u015fa\u011f\u0131daki gibi ufak de\u011fi\u015fiklikler sergileyece\u011fiz.<\/p>\n
Proxy dosyam\u0131z\u0131n i\u00e7ini ilgili dizine \u00f6zel ayarlayaca\u011f\u0131z. (\u00d6rn; veri dizini)<\/p>\n
\r\n{\r\n "\/veri": {\r\n "target": "http:\/\/www.gencayyildiz.com",\r\n "secure": false\r\n }\r\n}\r\n<\/pre>\n
Uygulamay\u0131 proxy ile yay\u0131na al\u0131rken “proxy.config.json” dosyas\u0131n\u0131n oldu\u011fu dizine uygun bir \u015fekilde kod yazaca\u011f\u0131z. (\u00d6rn; src dizini)<\/p>\n
\r\nng serve --proxy-config src\/proxy.config.json\r\n<\/pre>\n
Bu iki hususa dikkat ederseniz \u00e7al\u0131\u015fmada bir kusur olmayaca\u011f\u0131ndan emin olabilirsiniz.<\/p>\n
Evet…
\nG\u00f6r\u00fcld\u00fc\u011f\u00fc \u00fczere Access-Control-Allow-Origin hatas\u0131ndan bu \u015fekilde kurtulabilmekte ve \u00e7al\u0131\u015fmalar\u0131m\u0131z\u0131 g\u00fcvenle harici kaynaklarla sa\u011flayabilmekteyiz…<\/p>\n
Sonraki yaz\u0131lar\u0131mda g\u00f6r\u00fc\u015fmek \u00fczere…
\n\u0130yi \u00e7al\u0131\u015fmalar…<\/p>\n","protected":false},"excerpt":{"rendered":"
Merhaba, \u00dczerine \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131z bir Angular 4 uygulamas\u0131nda harici bir kayna\u011fa Http servisini kullanarak ula\u015fmak istiyorsunuz ama nedense yapt\u0131\u011f\u0131n\u0131z in\u015fa ba\u015far\u0131l\u0131 sonu\u00e7 vermiyor ve hatta “Access-Control-Allow-Origin” \u015feklinde bilinen hatayla kar\u015f\u0131la\u015f\u0131yorsan\u0131z e\u011fer sizde CROS g\u00fcvenli\u011finden kaynakl\u0131...<\/p>\n","protected":false},"author":1,"featured_media":3223,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2144,258],"tags":[2235,2237,2238,2236,2240,2241,2243,2242,849,1083,2239],"class_list":["post-7550","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular-4","category-hata-cozumleri","tag-access-control-allow-origin","tag-access-control-allow-origin-hata","tag-angular-4-hata","tag-cors","tag-cors-guvenlik-onlemi","tag-cross","tag-cross-origin","tag-cross-origin-hatasi","tag-hata-cozumleri","tag-hata-ve-cozumu","tag-hatalar"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/7550","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/comments?post=7550"}],"version-history":[{"count":0,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/7550\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media\/3223"}],"wp:attachment":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media?parent=7550"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=7550"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=7550"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}