为什么在我的 Angular 2 应用程序中发送 OPTIONS 请求而不是 PUT？ [复制]答案

【问题标题】：Why is an OPTIONS request sent instead of a PUT in my Angular 2 app? [duplicate]为什么在我的 Angular 2 应用程序中发送 OPTIONS 请求而不是 PUT？ [复制]
【发布时间】：2017-05-17 17:19:54
【问题描述】：

我正在尝试执行模型的更新功能，尝试通过 PUT 调用 API 中的 Update 方法。

这是我的服务客户端：

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 loadhttp://ip/api/client/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

为什么它是通过选项请求而不是 put 来的？ POST 方法适用于角度 2。

【问题讨论】：

标签： javascript api angular cors

【解决方案1】：

OPTIONS 是在某些 CORS 情况下由浏览器自动发送的预检请求。如果服务器没有响应预期的 CORS 标头（Access-Control-Allow-Origin 和其他标头），则浏览器根本不会发出 PUT 请求。

您需要配置服务器以响应预期的标头，以便能够直接从 Angular（或一般的 JS）使用此服务器

【讨论】：