CORS: режим учетных данных - "включить"

Да, я знаю, о чем вы думаете - еще один вопрос CORS, но на этот раз я в тупике.

Итак, для начала фактическое сообщение об ошибке:

XMLHttpRequest не может загрузить http: //localhost/Foo.API/token . Значение заголовка «Access-Control-Allow-Origin» в ответе не должно быть подстановочным знаком «*», если режим учетных данных запроса - «включить» . Следовательно, к источнику ' http: // localhost: 5000 ' не разрешен доступ. Режим учетных данных запросов, инициированных XMLHttpRequest, управляется атрибутом withCredentials.

Я не уверен, что подразумевается под режимом учетных данных «включить» ?

Поэтому, когда я выполняю запрос в почтальоне, у меня нет такой ошибки:

Но когда я обращаюсь к тому же запросу через свое веб-приложение angularjs, эта ошибка меня ставит в тупик. Вот мой запрос / ответ angualrjs. Как вы увидите, ответ есть OK 200, но я все еще получаю ошибку CORS:

Запрос и ответ Fiddler:

Следующее изображение демонстрирует запрос и ответ от веб-интерфейса к API.

Итак, судя по всем остальным сообщениям, которые я читал в Интернете, кажется, что я поступаю правильно, поэтому я не могу понять ошибку. Наконец, вот код, который я использую в angualrjs (фабрика входа в систему):

Реализация CORS в API - Справочные цели:

Использованный метод 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:

Если withCredentialsустановлено значение true, он пытается отправить учетные данные или файлы cookie вместе с запросом. Поскольку это означает, что другой источник потенциально пытается выполнить аутентифицированные запросы, подстановочный знак («*») не разрешен в качестве заголовка «Access-Control-Allow-Origin».

Чтобы это сработало, вам нужно будет явно ответить источником, который сделал запрос, в заголовке «Access-Control-Allow-Origin».

Я бы порекомендовал явно занести в белый список источники, которым вы хотите разрешить выполнять аутентифицированные запросы, потому что простой ответ с источником из запроса означает, что любой данный веб-сайт может выполнять аутентифицированные вызовы на ваш сервер, если у пользователя есть действующий сеанс.

Я объясняю это в статье, которую написал некоторое время назад.

Таким образом, вы можете либо установить withCredentialsзначение false, либо реализовать белый список происхождения и отвечать на запросы CORS с действительным источником всякий раз, когда задействованы учетные данные.

Если вы используете промежуточное ПО CORS и хотите отправить withCredentialsлогическое значение true, вы можете настроить CORS следующим образом:

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

`

Настройка CORS для Angular 5 и Spring Security (базовое решение для файлов cookie)

На стороне Angular требуется добавить флаг опции withCredentials: trueдля транспорта Cookie:

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

Если это помогает, я использовал центрифугу с моим приложением reactjs, и, проверив некоторые комментарии ниже, я посмотрел на файл библиотеки centrifuge.js, который в моей версии имел следующий фрагмент кода:

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

После того, как я удалил эти три строки, приложение заработало нормально, как и ожидалось.

Надеюсь, это поможет!

Если вы используете .NET Core, вам придется использовать .AllowCredentials () при настройке CORS в Startup.CS.

Внутри ConfigureServices

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

Для меня это было просто отсутствие options.AllowCredentials (), которое вызывало указанную вами ошибку. В качестве дополнительного примечания для других, у которых также есть проблемы с CORS, порядок имеет значение, и AddCors () должны быть зарегистрированы перед AddMVC () внутри вашего класса Startup.