CORS: kimlik bilgileri modu "dahil et" dir

Evet, ne düşündüğünüzü biliyorum - bir başka CORS sorusu, ama bu sefer şaşkınım.

Yani başlamak için gerçek hata mesajı:

XMLHttpRequest http: //localhost/Foo.API/token'ı yükleyemiyor . Yanıttaki 'Access-Control-Allow-Origin' başlığının değeri, isteğin kimlik bilgileri modu 'include' olduğunda '*' joker karakteri olmamalıdır . Bu nedenle ' http: // localhost: 5000 ' kaynağına erişime izin verilmiyor. XMLHttpRequest tarafından başlatılan isteklerin kimlik bilgileri modu withCredentials özniteliği tarafından kontrol edilir.

Kimlik bilgileri modu ile ne kastedildiğinden emin değilim 'dahil et' ?

Ben postacı isteği gerçekleştirirken Yani, tecrübe yok böyle hata:

Ancak aynı isteğe angularjs web uygulamam aracılığıyla eriştiğimde, bu hata beni şaşırttı. İşte angualrjs isteğim / cevabım. Göreceğiniz gibi yanıt şudur OK 200, ancak yine de CORS hatasını alıyorum:

Fiddler İsteği ve Yanıtı:

Aşağıdaki görüntü, web ön ucundan API'ye olan isteği ve yanıtı göstermektedir

İnternette okuduğum diğer tüm gönderilere bakılırsa , doğru şeyi yapıyorum gibi görünüyor , bu yüzden hatayı anlayamıyorum. Son olarak, angualrjs'de kullandığım kod (giriş fabrikası):

API'de CORS Uygulaması - Referans amaçları:

Yöntem 1 kullanıldı:

public static class WebApiConfig
{
    public static void Register(HttpConfiguration config)
    {
        EnableCrossSiteRequests(config);
    }

    private static void EnableCrossSiteRequests(HttpConfiguration config)
    {
        var cors = new EnableCorsAttribute("*", "*", "*")
        {
            SupportsCredentials = true
        };
        config.EnableCors(cors);
    }
}

Yöntem 2 kullanıldı:

public void Configuration(IAppBuilder app)
{
    HttpConfiguration config = new HttpConfiguration();

    ConfigureOAuth(app);

    WebApiConfig.Register(config);
    app.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll);
    app.UseWebApi(config);

}

Şimdiden çok teşekkürler!

Sorun, Angular kodunuzdan kaynaklanıyor:

Ne zaman withCredentialstrue olarak ayarlanır, istekle birlikte kimlik bilgilerini veya çerezleri göndermeye çalışıyor. Bu, başka bir kaynağın potansiyel olarak kimliği doğrulanmış istekler yapmaya çalıştığı anlamına geldiğinden, joker karaktere ("*") "Access-Control-Allow-Origin" başlığı olarak izin verilmez.

Bunun çalışması için "Access-Control-Allow-Origin" başlığındaki isteği yapan kaynak ile açıkça yanıt vermeniz gerekir.

Kimliği doğrulanmış isteklerde bulunmasına izin vermek istediğiniz kaynakları açık bir şekilde beyaz listeye eklemenizi tavsiye ederim, çünkü yalnızca istekten gelen kaynakla yanıt vermek, kullanıcının geçerli bir oturumu varsa, herhangi bir web sitesinin arka ucunuza kimliği doğrulanmış çağrılar yapabileceği anlamına gelir.

Bunları bir süre önce yazdığım bu yazıda anlatıyorum.

Böylece withCredentials, yanlış olarak ayarlayabilir veya bir kaynak beyaz listesi uygulayabilir ve kimlik bilgileri dahil olduğunda CORS isteklerine geçerli bir kaynakla yanıt verebilirsiniz

CORS ara yazılımını kullanıyorsanız ve withCredentialsboolean true göndermek istiyorsanız, CORS'u şu şekilde yapılandırabilirsiniz:

var cors = require('cors');    
app.use(cors({credentials: true, origin: 'http://localhost:5000'}));

'

Angular 5 ve Spring Security için CORS'u özelleştirme (Çerez temel çözümü)

Açısal tarafta withCredentials: trueÇerez aktarımı için seçenek işaretinin eklenmesi gerekiyordu :

constructor(public http: HttpClient) {
}

public get(url: string = ''): Observable<any> {
    return this.http.get(url, { withCredentials: true });
}

Java sunucu tarafında CorsConfigurationSource, yapılandırma CORS ilkesinin eklenmesi gerekir :

@Configuration
@EnableWebSecurity
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {

    @Bean
    CorsConfigurationSource corsConfigurationSource() {
        CorsConfiguration configuration = new CorsConfiguration();
        // This Origin header you can see that in Network tab
        configuration.setAllowedOrigins(Arrays.asList("http:/url_1", "http:/url_2")); 
        configuration.setAllowedMethods(Arrays.asList("GET","POST"));
        configuration.setAllowedHeaders(Arrays.asList("content-type"));
        configuration.setAllowCredentials(true);
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", configuration);
        return source;
    }

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.cors().and()...
    }
}

configure(HttpSecurity http)Varsayılan olarak yöntem corsConfigurationSourceiçin kullanacakhttp.cors()

Yardımcı oluyorsa, reactjs uygulamamla santrifüj kullanıyordum ve aşağıdaki bazı yorumları kontrol ettikten sonra, sürümümde aşağıdaki kod parçacığına sahip olan centrifuge.js kitaplık dosyasına baktım:

if ('withCredentials' in xhr) {
 xhr.withCredentials = true;
}

Bu üç satırı kaldırdıktan sonra, uygulama beklendiği gibi iyi çalıştı.

Umarım yardımcı olur!

.NET Core kullanıyorsanız, Startup.CS'de CORS'u yapılandırırken .AllowCredentials () yapmanız gerekecektir.

ConfigureServices'in İçinde

services.AddCors(o => {
    o.AddPolicy("AllowSetOrigins", options =>
    {
        options.WithOrigins("https://localhost:xxxx");
        options.AllowAnyHeader();
        options.AllowAnyMethod();
        options.AllowCredentials();
    });
});

services.AddMvc();

Ardından Configure'ün içinde:

app.UseCors("AllowSetOrigins");
app.UseMvc(routes =>
    {
        // Routing code here
    });

Benim için, bahsettiğiniz hataya neden olan, özellikle eksik options.AllowCredentials (). Genel olarak CORS sorunları olan diğerleri için bir yan not olarak, sipariş önemlidir ve AddCors (), Başlangıç ​​sınıfınızın içinde AddMVC () 'den önce kaydedilmelidir.

Sadece eklemek Axios.defaults.withCredentials=trueyerine (bir {credentials: true}istemci tarafında) ve değişim app.use(cors())için

app.use(cors(
  {origin: ['your client side server'],
  methods: ['GET', 'POST'],
  credentials:true,
}
))