CORS: credentials 모드는 include입니다.

CORS: credentials 모드는 include입니다.

네, 당신이 무슨 생각을 하는지 알아요. 또 다른 CORS 질문이지만, 이번에는 난감해요.

먼저 실제 오류 메시지:

XMLHttpRequest는 http://localhost/Foo.API/token을 로드할 수 없습니다.요청의 자격 증명 모드가 '포함'인 경우 응답의 'Access-Control-Allow-Origin' 헤더 값은 와일드카드 '*'가 될 수 없습니다.따라서 오리진 'http://localhost:5000'은 액세스가 허용되지 않습니다.XMLHttpRequest에 의해 시작된 요청의 credential 모드는 withCredentials Atribut에 의해 제어됩니다.

credentials 모드가 무엇을 의미하는지 'include'인지 잘 모르겠습니다.

따라서 우체부에서 요청을 수행할 때 다음과 같은 오류가 발생하지 않습니다.

그러나 angularjs 웹 앱에서 동일한 요청에 접속하면 이 오류로 인해 당황하게 됩니다.angualrjs 요청/응답입니다.보시는 바와 같이OK 200하지만 여전히 CORS 오류가 표시됩니다.

피들러 요청 및 응답:

다음 그림은 웹 프런트 엔드에서 API에 대한 요청과 응답을 보여줍니다.

그래서 내가 온라인에서 읽은 다른 모든 게시물을 보면, 내가 옳은 일을 하고 있는 것 같아, 그래서 나는 오류를 이해할 수 없다.마지막으로 angualrjs(로그인 팩토리) 내에서 사용하는 코드는 다음과 같습니다.

API에서의 CORS 실장 - 참조 목적:

방법 1:

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);
    }
}

방법 2:

public void Configuration(IAppBuilder app)
{
    HttpConfiguration config = new HttpConfiguration();
 
    ConfigureOAuth(app);
 
    WebApiConfig.Register(config);
    app.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll);
    app.UseWebApi(config);

}

이 문제는 Angular 코드에서 발생합니다.

언제withCredentialstrue로 설정되어 있는 경우, 요구와 함께 credential 또는 cookie를 송신하려고 합니다.이는 다른 오리진이 인증된 요청을 수행하려고 할 수 있음을 의미하므로 와일드카드("*")는 "Access-Control-Allow-Origin" 헤더로 허용되지 않습니다.

이 작업을 수행하려면 "Access-Control-Allow-Origin" 헤더에 요청을 작성한 오리진으로 명시적으로 응답해야 합니다.

인증된 요구를 할 수 있도록 허용하는 오리진을 명시적으로 화이트리스트에 추가할 것을 권장합니다.요구의 오리진으로 응답하는 것만으로, 유저가 유효한 세션을 가지고 있는 경우, 특정의 Web 사이트로부터 인증된 콜을 백엔드로 발신할 수 있기 때문입니다.

이 내용은 제가 예전에 쓴 기사에서 설명하겠습니다.

해 놓을 수 있어요.withCredentials 또는 implement or implemented or cred cred cred cred cred cred cred cred to to to to to to to to to to to to to to to to to to whenever whenever whenever CORS 합니다.

, 「CORS」를 는, 「CORS」를 송부합니다.withCredentialstrue는 CORS를 설정할 수 있습니다.boolean true, cors는 다음과 같습니다.

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

Angular 5 및 Spring Security용 CORS 커스터마이즈(Cookie 기반 솔루션)

Angular adding withCredentials: true'이것'은 다음과 같습니다.

constructor(public http: HttpClient) {
}

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

추가가 필요했습니다.CorsConfigurationSourceCORS:

@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)에서는, 「」를 사용합니다.corsConfigurationSource★★★★★★에http.cors()

를 사용하고 있는 경우.NET Core 에서는, 할 필요가 있습니다.스타트업에서 CORS를 설정할 때 AllowCredentials()를 선택합니다.CS.

Configure Services 내부

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

services.AddMvc();

다음으로 [Configure]의 내부:

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

제게는 특히 선택의 여지가 없었습니다.AllowCredentials()를 지정했습니다.일반적으로 CORS 문제가 있는 다른 사용자도 참고할 수 있도록 순서가 중요하며 Startup 클래스의 AddMVC() 전에 AddCors()를 등록해야 합니다.

만약 도움이 된다면, 저는 reactjs 앱에서 원심분리기를 사용하고 있었는데, 아래의 코멘트를 확인한 후, 제 버전에서는 다음과 같은 코드 조각이 있는 원심분리기.js 라이브러리 파일을 보았습니다.파일을 보았습니다.

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

이 세 줄을 제거했더니 역시 앱이 잘 작동했어요.

도움이 됐으면 좋겠다!

언급URL : https://stackoverflow.com/questions/42803394/cors-credentials-mode-is-include