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

【问题标题】：Angular 4 - Can not proccess response of serverAngular 4 - 无法处理服务器的响应
【发布时间】：2017-06-26 11:56:51
【问题描述】：

我正在开发一个 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();
        });
    }
}

为什么会这样？

【问题讨论】：

所以您收到了 CORS 错误，但您声称它正在工作？
:) 我将重新制定这部分...
我更新了问题。我这样说是因为我相信问题不在于服务器，而在于客户端。我在 AngularJS 1.x 中有另一个代码可以正常发出相同的请求。

标签： javascript angular get

【解决方案1】：

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

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

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

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

【讨论】：