Angular - 加载资源失败：预检响应不成功

Posted 2023-02-27

【中文标题】Angular - 加载资源失败：预检响应不成功

【英文标题】：Angular - Failed to load resource: Preflight response was not successful

【发布时间】：2018-08-23 14:30:46

【问题描述】：

我正在尝试从 Angular 访问 API 端点以取回 JSON 数据。我的代码如下：

import  Component, OnInit  from '@angular/core';
import HttpClient from '@angular/common/http';
import  HttpHeaders from '@angular/common/http';

@Component(
  selector: 'app-api-caller',
  templateUrl: './api-caller.component.html',
  styleUrls: ['./api-caller.component.css']
)

export class ApiCallerComponent implements OnInit 

    // works with 'https://api.github.com/users/seeschweiler'

  ngOnInit(): void 

    const options =  headers: new HttpHeaders().set('Content-Type', 'application/json') ;
    this.http.get('https://api.upsie.com/api/helloworld', options).subscribe(
      data => 
      console.log(data);
    ,
      err => 
      console.log('An Error occured');
      );
  

  constructor(private http: HttpClient) 
  

浏览器控制台显示错误：

error message

“加载资源失败：预检响应不成功”是什么意思，如何解决？

【参考方案1】：

Angular 在实际请求之前发送一个 OPTIONS 请求。因此，您的 API 必须允许正确的 CORS 标头来支持 OPTIONS 预检。

如果您使用 express，请查看 cors 包。