Angular 5 Http POST请求转向OPTIONS并返回404

Question

使用:

import { HttpClient, HttpHeaders } from '@angular/common/http';

const httpOptions = {
    headers: new HttpHeaders({
        'Content-Type: ['application/json']
        })
    }

@Injectable()
export class MyService {
    constructor (private http: HttpClient) {}
    private myUrl = 'http://localhost:3000/my-service';
    private postBody = 
    `
    [
     { "a": ["complex"],
       "serialized": "data",
       "set": [],
      },{
       "in": "json",
       "format": []
      }
    ]
    `;

    getData(): Observable<ExpectedResponseType> {
        return this.http.post<ExpectedResponseType>(this.myUrl, this.postBody, httpOptions);
    }
}

当我订阅此服务时，浏览器会向 localhost:3000/my-service 发送预检 OPTIONS 请求，返回 404。如果我删除 httpOptions 从请求中，它成功地发布了我想要的正文，但没有将 Content-Type 设置为 application/json 因此服务器返回 500.

如何在 Angular 5 中发送内容类型为 json 的 POST 请求？服务器提供来自 Postman 的预期结果，但我不确定如何说服 Angular 简单地发送带有我想要的 header 的 POST。

Answer 1

OPTIONS 请求不是 Angular 问题，而是浏览器问题。

当浏览器发出跨域请求时，它会(对于大多数请求，取决于您请求的内容和使用的方法)首先执行 OPTIONS 请求。

OPTIONS 请求的目的是检查服务器是否允许您的客户端(浏览器)向它发出请求。这由服务器 CORS 响应 header 确定。如果 OPTIONS 请求失败，则浏览器知道它是不允许的，因此不会费心发出您想要的实际请求。

这仅由浏览器强制执行，因此 POSTMAN 可以正常工作。

请将 CORS header 添加到您的服务器响应中，并确保您的服务器支持 OPTIONS 请求。

参见 https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin

参见 https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

如果您真的不介意 CORS，则将请求发送到同一域并让您的网络服务器重写 URL。请注意，您还必须在生产服务器中重复重写逻辑。