Angular2 to REST WebApi CORS issue

Question

Angular2 ön uç ve WebApi arka uç kullanıyorum. WebAPI CORS

var cors = new EnableCorsAttribute("*", "*", "*"); 
GlobalConfiguration.Configuration.EnableCors(cors); 

etkin olduğunu ve farklı siteleri bu API kullanmak (jQuery/JavaScript) çünkü o, çalışır. Ama açısal2 ile değil. uçuş öncesi isteğine

Tepki erişim kontrollerine geçemezse: şu mesajı alıyorum No 'Erişim-Control-Allow-Origin' başlığı istenen kaynak üzerinde bulunur.

Belki "uçuş öncesi isteği" ile ilgili bir şeydir?

Answer 1

Kişisel hata mesajı çağrının yanıt olarak hiçbir Access-Control-Allow-Origin olmadığını söyler. Bu istek için CORS'i etkinleştirmek için gerekli bir şey. Angular2 ile ilgili bir şey değil.

Bu

istekte Origin başlığının eklenmesiyle istemci tarafında tetiklenir. İsteğiniz için bu başlığa sahip misiniz? Diğer uygulamalarınızda önceden aydınlatılmış istekleri kullanıyor musunuz?

• Basit istekleri: Bir hatırlatma olarak. Bu kullanım durumu, HTTP GET, HEAD ve POST yöntemlerini kullanırsak uygulanır. POST yöntemlerinde, yalnızca aşağıdaki değerlere sahip içerik türleri desteklenir: text/plain, application/x-www-form-urlencoded ve multipart/form-data.
• Önceden aydınlatılmış istekler. "Basit istekler" kullanım durumu geçerli olmadığında, etki alanları arası istekler bağlamında neler yapılabileceğini kontrol etmek için ilk istek (HTTP OPTIONS yöntemiyle) yapılır.

Belki de OPTIONS istekleri sunucu tarafında doğru şekilde işlenemiyor (doğru üstbilgileri döndürme ...).

ne ilgi olacağını hata oluşur istekleri hangi bize anlatmak için: SEÇENEKLER bir veya hedef isteği.

• http://restlet.com/blog/2015/12/15/understanding-and-using-cors/
• http://www.asp.net/web-api/overview/security/enabling-cross-origin-requests-in-web-api#enable-cors

it Umut: Sen CORS nasıl çalıştığını

hakkında daha fazla ayrıntı için bu bağlantıları bakınız ... DevTools'un içinde Ağ sekmesine bir göz olabilir Thierry

, size yardımcı olur

Answer 2

herhangi seçenekler içine belirledik mı senin cors için web.config dosyası? <add name="Access-Control-Allow-Origin" value="*"/>

gibi yani bir şey evet sadece kodu ile Cors o kaldırmak ve kontrol etmek emin olun.

Yanıt here size yardımcı olacaktır.

Answer 3

Angular2 uygulamasında aynı sorunu yaşadım. Sorun, daha önce de belirtildiği gibi, istemcinin yaptığı her istek öncesinde ön kontrol isteğinin sunucuya gönderilmesidir.

istek Bu tür

, A tipi OPTIONS var ve bu durum 200 ve müşteriden istekleri kabul için belirlenen başlıklara sahip bir uçuş öncesi tepkiyi geri göndermek için sunucu görevi. Gördüğünüz gibi

// Domain you wish to allow 
res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000'); 

// Request methods you wish to allow 
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE'); 

// Request headers you wish to allow 
res.setHeader('Access-Control-Allow-Headers', 'YOUR-CUSTOM-HEADERS-HERE'); 

// Set to true if you need the website to include cookies in requests 
res.setHeader('Access-Control-Allow-Credentials', true); 

// Check if preflight request 
if (req.method === 'OPTIONS') { 
    res.status(200); 
    res.end(); 
} 
else { 
    // Pass to next layer of middleware 
    next(); 
} 

i başlıklarını ayarlayın ve sonra istek türü SEÇENEKLER ise getirme:

Bu

(express) ile benim çözümdür. Bu durumda bir durumu 200 geri gönderir ve yanıtı sonlandırır.

Bu şekilde, müşteri yetkilendirilecek ve ayrıca özel isteklerinizi tüm isteklere göre ayarlayabileceksiniz.

Answer 4

Sorunun PHP kodunu sormadığını biliyorum. Bu ön-olay ve Angular2 yüzünden buraya geldim. Matteo'nun cevabına baktığımda, sunucumun isteğinin neden 401 ile geri geldiğini anladım. Bunun nedeni, ön kontrol tarayıcısında Yetkilendirme belirtecini göndermemesi ve bu nedenle sunucunun 401 ile geri gelmesi ve tarayıcının CORS'e izin verilmemesi olduğunu düşünüyor. . Lütfen aşağıdaki kodun ne yaptığınızı bilmediğiniz sürece yalnızca geliştirme sunucusunda kullanılması gerektiğini unutmayın.

PHP bunu yapabilirsiniz:

if (strtolower($_SERVER['REQUEST_METHOD']) === 'options') { 
     header('Access-Control-Allow-Origin: ' . $_SERVER['HTTP_ORIGIN']); 
     header('Access-Control-Allow-Methods: POST, GET, OPTIONS'); 
     header('Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Range, Content-Disposition, Content-Type, Authorization'); 
     header('Access-Control-Allow-Credentials: true'); 
     echo 'Allowed'; 
     exit; 
} 

VEYA Nginx

if ($request_method = 'OPTIONS') { 
     add_header 'Access-Control-Allow-Origin' '*'; 
     add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; 
     # 
     # Custom headers and headers various browsers *should* be OK with but aren't 
     # 
     add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type'; 
     # 
     # Tell client that this pre-flight info is valid for 20 days 
     # 
     add_header 'Access-Control-Max-Age' 1728000; 
     add_header 'Content-Type' 'text/plain charset=UTF-8'; 
     add_header 'Content-Length' 0; 
     return 204; 
    } 

diğer türlü sen eklenmesi gerekir sunucuya gönderiyoruz başlıkları Hatırla-Access-Kontrol Allow-Başlıkları liste. Ben API ön uç ve nodeJS (Expressjs) için Eğik 2 ile çalışıyorum

Answer 5

Eğik 2 localhost altında çalışıyor: 3000 ve ekspres localhost üzerinde çalışıyor: 8000

sorun localhost: 3000, POST yöntemiyle bir URL'yi çağırmayı denediğinde gerçekleşir ... ExpressJS sunucusu, başka bir sunucudan (veya bağlantı noktasından) geldiği için çağrıyı reddeder

Sorunu çözmek için ; localhost: 3000 server ...

You can find a library (CORS) to avoid this problem in this link:

Answer 6

Firefox tarayıcınıza bir eklenti ekleyebilirsiniz. Firefox tarayıcınızda cazibe gibi çalışacaktır. Cors Everywhere problemimi çözdü. https://addons.mozilla.org/en-US/firefox/addon/cors-everywhere/