Angular 4-无法处理服务器的响应

Question

我正在开发Angular 4 Web应用程序，尝试向远程服务器查询数据时遇到一些问题：

XMLHttpRequest无法加载https://viacep.com.br/ws/39400001/json/ 。 请求标头字段在飞行前响应中，Access-Control-Allow-Headers不允许进行授权。

在您说这是服务器中的CORS问题（我不是服务器所有者）之前，我应该说使用Insomnia之类的程序进行的请求就像一个超级按钮一样工作，并且AngularJS 1.x中有一个与此相同的代码服务器和几乎相同的代码。 如果您查看chrome控制台，则会看到服务器使用预期数据响应请求：

我真的相信我忘记了Angular配置或我的要求：

@Injectable()
export class ViaCepService {

    constructor(private http:Http) {
    }

    find(cep:string):Observable<ViaCepResponse> {
        return this.http.get("https://viacep.com.br/ws/" + cep + "/json/").map((res:Response) => {
            return res.json();
        });
    }
}

为什么会这样呢？

Answer 1

我会说这绝对是CORS问题。 我遇到过类似的问题，尽管浏览器外部的应用程序没有这些问题，但我在浏览器中运行的Angular应用程序却失败了。

对我来说，通过在计算机上安装Telerik Fiddler并拦截请求/响应消息以及注入或修改响应头，可以证明问题与CORS有关。 我的浏览器肯定在接收数据（就像您的情况一样），但是CORS问题（响应中缺少正确的标题）阻止了数据击中我的Angular应用程序。

有关CORS问题（包括您的问题）的更多信息，这里是一个很好的资源

https://fetch.spec.whatwg.org/#http-cors-protocol