CORS: режим облікових даних - "включити"

Так, я знаю, про що ти думаєш - ще одне запитання CORS, але цього разу я обдурений.

Отже, для початку, власне повідомлення про помилку:

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

Я не впевнений, що мається на увазі під режимом облікових даних - "включати" ?

Тому, коли я виконую запит у листоноші, у мене не виникає такої помилки:

Але коли я отримую доступ до того самого запиту через свою веб-програму angularjs, ця помилка мене вражає. Ось мій запит / відповідь angualrjs. Як ви побачите, відповідь є OK 200, але я все одно отримую помилку CORS:

Запит скрипта та відповідь:

Наступне зображення демонструє запит та відповідь веб-інтерфейсу на 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)

На кутовій стороні потрібно додати прапорець опції 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()

Якщо це допомагає, я використовував центрифугу з моєю програмою responsejs, і, перевіривши деякі коментарі нижче, я переглянув файл бібліотеки 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
    });

Для мене конкретно просто бракувало опцій. AllowCredentials (), що спричинило згадану вами помилку. Як додаткове зауваження в цілому для інших, хто також має проблеми з CORS, порядок має значення та AddCors () повинні бути зареєстровані перед AddMVC () всередині вашого класу Startup.

Просто додайте Axios.defaults.withCredentials=trueзамість ( {credentials: true}) на стороні клієнта та змініть app.use(cors())на

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