这个问题是由于CloudFlare设置了CORS头,但是Angular应用程序在发送请求时没有附带必要的请求头。可以通过在请求时添加以下选项来解决这个问题:
在Angular 的 Http 请求中加入以下选项:
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
@Injectable()
export class DataService {
constructor(private http: HttpClient) { }
getData() {
const url = 'http://example.com/api/data';
const headers = new HttpHeaders({
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': '*'
});
return this.http.get(url, { headers });
}
}
需要注意的是:在请求时需要添加Access-Control-Allow-Origin到请求头中,这表示该请求是允许跨域的,*表示所有站点都允许访问。
另外,也可以通过在 CloudFlare 中添加“Access-Control-Allow-Origin” 来允许所有站点调用 API。
在 CloudFlare 中添加一个自定义请求头:
Access-Control-Allow-Origin: *
这样就可以解决 Angular 应用程序无法从启用 CORS 的站点获取数据的问题了。