跨域 POST 不适用于 Angular HttpClient 但适用于 jQuery

Question

我正在迁移到 Angular 13，我想使用 HttpClient 而不是 jQuery.ajax。

以下 jquery 代码有效：

function asyncAjax(url: any){
  return new Promise(function(resolve, reject) {
          $.ajax({
            type: 'POST',
            crossDomain: true,
            xhrFields: {
              withCredentials: true
            },
            url: url,
            data: null,
            contentType: "text/plain; charset=utf-8",
            dataType: "json",
            success: function(data) {
              resolve(data) // Resolve promise and when success
            },
            error: function(err) {
                reject(err) // Reject the promise and go to catch()
            }
          });
  });
}
...
const json: any = await asyncAjax(url);

但是，当我使用 HttpClient 时：

private readonly _httpClient: HttpClient;

constructor(httpClient: HttpClient) {
  this._httpClient = httpClient;
}

...
const headers = new HttpHeaders({'Content-Type':'application/json; charset=utf-8'});
const json = await firstValueFrom(this._httpClient.post<T[]>(url, null, 
    { headers: headers, withCredentials: true}));

我得到：

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at [url]. (Reason: CORS request external redirect not allowed).

谁能告诉我如何让它与 HttpClient 一起工作？

Answer 1

在您的 jQuery 代码中，您发送 根本没有数据 并声称您发送 纯文本 .

data: null,
contentType: "text/plain; charset=utf-8",

在您的 Angular 代码中您仍然没有发送任何数据，但这次您声称您正在发送 JSON.

const headers = new HttpHeaders({'Content-Type':'application/json; charset=utf-8'});

JSON 不是数据类型 supported by HTML forms which means to send it on a cross-origin request the browser will send a preflight request.

服务器未在其对该预检请求的响应中使用 CORS 授予权限，而是似乎发出了重定向。

此处快速而肮脏的解决方案是发送与代码工作时相同的Content-Typeheader。

更好的解决方案是考虑您的 API 设计。为什么您首先使用 POST 请求而不是 POSTing 任何数据？可能这应该是 GET 或 DELETE 请求。

重定向的原因也可能是 url 的值已更改（可能从 http://example.com/foo/ 到 http://example.com/foo）并且需要更正。

跨域 POST 不适用于 Angular HttpClient 但适用于 jQuery

Cross-domain POST doesn't work with Angular HttpClient but works with jQuery

javascript

ajax

jquery

cross-domain

angular