CORS : 자격 증명 모드는 '포함'입니다.

Question 1

네, 당신이 무슨 생각을하는지 알고 있습니다. 또 다른 CORS 질문이지만 이번에는 난처합니다.

따라서 시작하려면 실제 오류 메시지 :

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

자격 증명 모드의 의미 가 '포함' 인지 잘 모르겠습니다 .

따라서 우편 배달부에서 요청을 수행 할 때 이러한 오류가 발생 하지 않습니다 .

그러나 angularjs 웹 앱을 통해 동일한 요청에 액세스 할 때이 오류로 인해 당황합니다. 여기 내 angualrjs 요청 / 응답이 있습니다. 보시다시피 응답은 OK 200이지만 여전히 CORS 오류가 발생합니다.

Fiddler 요청 및 응답 :

다음 이미지는 웹 프런트 엔드에서 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);

}

미리 감사드립니다!

Question 2

문제는 Angular 코드에서 비롯됩니다.

이 withCredentialstrue로 설정 되면 요청과 함께 자격 증명 또는 쿠키를 보내려고합니다. 다른 오리진이 잠재적으로 인증 된 요청을 시도하고 있음을 의미하므로 와일드 카드 ( "*")는 "Access-Control-Allow-Origin"헤더로 허용되지 않습니다.

이 작업을 수행하려면 "Access-Control-Allow-Origin"헤더에서 요청을 만든 출처로 명시 적으로 응답해야합니다.

요청의 출처로 간단히 응답하면 사용자가 유효한 세션을 갖게되면 지정된 웹 사이트에서 백엔드에 인증 된 호출을 할 수 있기 때문에 인증 된 요청을 허용하려는 출처를 명시 적으로 허용 목록에 추가하는 것이 좋습니다.

나는 내가 오래전에 쓴 이 기사 에서 이것을 설명한다 .

따라서 withCredentialsfalse로 설정 하거나 원본 허용 목록을 구현하고 자격 증명이 관련 될 때마다 유효한 원본으로 CORS 요청에 응답 할 수 있습니다.

Question 3

CORS 미들웨어를 사용 중이고 withCredentials부울 true 를 전송 하려면 다음과 같이 CORS를 구성 할 수 있습니다.

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

스 니펫 확장

`

Question 4

Angular 5 및 Spring Security를위한 CORS 커스터마이징 (쿠키 기반 솔루션)

Angular 측 withCredentials: true에서 쿠키 전송을위한 옵션 플래그 를 추가해야합니다 .

constructor(public http: HttpClient) {
}

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

Java 서버 측 CorsConfigurationSource에서 구성 CORS 정책에 필요한 추가 :

@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()

Question 5

도움이된다면 reactjs 앱과 함께 centrifuge를 사용하고 있었고, 아래 댓글을 확인한 후 centrifuge.js 라이브러리 파일을 살펴 보았습니다.이 파일은 제 버전에 다음 코드 스 니펫이 있습니다.

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

이 세 줄을 제거한 후 앱이 예상대로 제대로 작동했습니다.

도움이 되었기를 바랍니다.

Question 6

.NET Core를 사용하는 경우 Startup.CS에서 CORS를 구성 할 때 .AllowCredentials ()가 필요합니다.

ConfigureServices 내부

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

services.AddMvc();

그런 다음 구성 내부 :

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

저에게는 특별히 언급 한 오류를 일으킨 options.AllowCredentials ()가 누락되었습니다. CORS 문제가있는 다른 사람들에게도 일반적으로 부수적으로, 순서 문제와 AddCors ()는 Startup 클래스 내에서 AddMVC () 전에 등록되어야합니다.

Question 7

클라이언트 측에서 Axios.defaults.withCredentials=true( {credentials: true}) 대신 추가 하고 다음 app.use(cors())으로 변경하십시오 .

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