iOS Safari и Mac OS Safari не отправляют файлы cookie - PullRequest
Новая
       38

iOS Safari и Mac OS Safari не отправляют файлы cookie

0 голосов
/ 08 июня 2018

У меня есть приложение Angular 5, которое пытается загрузить продукты через вызов HTTP-GET API и вылетает в iOS Safari и Mac OS Safari.

При первом доступе к странице все работает нормально, но послево второй раз мое приложение Angular аварийно завершает работу, потому что HTTP-GET не возвращает ожидаемые значения.

Я проверил консоль разработчика и оказалось, что Safari не отправляет файлы cookie из моего домена, которые требуются дляНАЧАЛО работать.

enter image description here Это говорит о том, что запрос пришел из кеша жесткого диска.Я проверил файлы журналов на моем сервере, и Safari фактически вызывает мой API (несмотря на то, что он использует кеш жесткого диска), но без файлов cookie.

HTTP-GET из моего приложения Angular выглядит следующим образом: 

this.noCacheHeader = new HttpHeaders()
              .append('Cache-Control', 'no-cache')
              .append('Cache-control', 'no-store')
              .append('Expires', '0')
              .append('Pragma', 'no-cache');

get<T>(url: string): Observable<T> {
        return this.http.get<T>(this.baseUrl + url, { withCredentials: true, headers: this.noCacheHeader });
      }

Я уже отключил кэширование из-за проблем с кэшированием в IE11.

Что я могу сделать, чтобы Safari всегда отправлял мои куки?

Обновление 1:

Я добавил параметр ticks в свой запрос HTTP-GET «products? Ticks = 1337», и теперь он работает.Так что это должно быть как-то связано с кэшированием.

1 Ответ

0 голосов
/ 08 июня 2018

Один из подходов заключается в использовании настраиваемого перехватчика Http: 

// custom.interceptor.ts
@Injectable()
export class CustomHttpInterceptor implements HttpInterceptor {

intercept (httpRequest: HttpRequest<any>, next: HttpHandler): 
  Observable<HttpEvent<any>> {
    const clonedRequest = httpRequest.clone({
      withCredentials: true
    });

    return next.handle(clonedRequest);
  }
}

Затем ссылка на перехватчик в вашем app.module.ts: 

import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { CustomHttpInterceptor } from 'your-module;

@NgModule({
  ...,
  imports: [
    ...,
    HttpClientModule,
  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: CustomHttpInterceptor,
      multi: true
    },
  ],
})

withCredentials: true является важной частьюперехватчик.Установка этой опции должна передавать куки обратно на каждый запрос.

См .: https://angular.io/api/http/RequestOptions и https://fetch.spec.whatwg.org/#cors-protocol-and-credentials для получения дополнительной информации.

Если вы уже делаете это,это, вероятно, проблема с кэшированием.Попробуйте установить более строгий заголовок Cache-Control: 

setHeaders: {
  "Cache-Control": "private, no-cache, no-store, must-revalidate"
}

или, наконец, добавьте параметр запроса в запрос, который всегда уникален, например отметку времени UNIX.

...