Почему в приложении Angular 2 отправляется запрос OPTIONS вместо PUT?

Question

Я пытаюсь выполнить функцию обновления модели, пытаюсь вызвать метод обновления в API через PUT.

Это мой сервисный клиент:

import { Injectable } from '@angular/core';
import { Http, Headers, RequestOptions, RequestMethod, Response } from '@angular/http';
import 'rxjs/add/operator/toPromise';

[...]

    updateClients(client_id, data){
        let headers = new Headers({ 'Content-Type': 'application/json' });

              let body = JSON.stringify(data);

              return this.http.put(`${this.baseUrl}/client/`+client_id, body, headers)
                .toPromise()
                .then(response => response.json().data)
                .then(items => items.map((item, idx)  => {
                  return{
                    id: item.id
                  };
                }));
    }

Но это не работает, так как метод идет по OPTIONS, а не PUT. И в моей консоли браузера это выходит: XMLHttpRequest can not load HTTP: // IP / API / клиент / 5. Method PUT is not allowed by Access-Control-Allow-Methods in preflight response.

Но в API (Laravel 5.3) метод PUT включен. Я попробовал это с POSTMAN, и это работает. И в моем ответе заголовки:

Access-Control-Allow-Origin: *
Allow: GET, HEAD, PUT, PATCH, DELETE
Cache-Control: no-cache
Connection: keep-alive

Почему он приходит через опцию запроса, а не ставится? Метод POST работает в угловых 2.

Answer 1

OPTIONS это предполетный запрос, автоматически отправляемый браузером в некоторых ситуациях CORS. Если сервер не отвечает с ожидаемыми заголовками CORS (Access-Control-Allow-Origin и другие) браузер не сделает PUT запрос на все.

Вам необходимо настроить сервер так, чтобы он отвечал ожидаемыми заголовками, чтобы иметь возможность использовать этот сервер напрямую из Angular (или JS в целом).