Angular 5，httpclient，跨域请求被阻止

Posted 2023-03-04

【中文标题】Angular 5，httpclient，跨域请求被阻止

【英文标题】：Angular 5, httpclient, Cross-Origin Request Blocked

【发布时间】：2022-02-16 21:08:26

【问题描述】：

我知道有很多类似的问题，但我找不到任何可以解决我的问题的问题。

我想使用他们的 API 访问我的 Binance 帐户。

https://github.com/binance-exchange/binance-official-api-docs/blob/master/rest-api.md

这是使用文档中的示例编写的简单函数：

postBinance() 
    const path = 'https://api.binance.com/api/v3/order'
        + '?symbol=LTCBTC&side=BUY&type=LIMIT&timeInForce=GTC&quantity=1&price=0.1&recvWindow=5000&timestamp=1499827319559'
        + '&signature=c8db56825ae71d6d79447849e617115f4a920fa2acdcab2b053c4b2838bd6b71';

    const headers = new HttpHeaders()
        .append('X-MBX-APIKEY', 'vmPUZE6mv9SD5VNHk4HlWFsOr6aKE2zvsw0MuIgwCIPy6utIco14y7Ju91duEh8A')
        .append('Access-Control-Allow-Origin', '*')
        .append('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE')
        .append('Access-Control-Allow-Headers', 'Content-Type');

    const options = 
        headers: headers
    ;

    return this.http.post(path, null, options);

使用该函数会导致 firefox 和 chrome 出错。 这是来自 Firefox 的错误：

跨域请求被阻止：同源策略不允许读取位于https://api.binance.com/api/v3/order?symbol=LTCBTC&side=BUY&type=LIMIT&timeInForce=GTC&quantity=1&price=0.1&recvWindow=5000&timestamp=1499827319559&signature=c8db56825ae71d6d79447849e617115f4a920fa2acdcab2b053c4b2838bd6b71 的远程资源。 （原因：缺少 CORS 标头“Access-Control-Allow-Origin”）。

这里来自 chrome：

无法加载 https://api.binance.com/api/v3/order?symbol=LTCBTC&side=BUY&type=LIMIT&timeInForce=GTC&quantity=1&price=0.1&recvWindow=5000&timestamp=1499827319559&signature=c8db56825ae71d6d79447849e617115f4a920fa2acdcab2b053c4b2838bd6b71：预检响应包含无效的 HTTP 状态代码 404

我已经为 chrome “Allow-Control-Allow-Origin: *”安装了扩展，但在这种情况下它不起作用。

我能做什么？

【参考方案1】：

确保您已添加扩展 CORS 并启用它。供参考：https://www.html5rocks.com/en/tutorials/cors/

在项目的根目录下创建一个名为 proxy.conf.json 的文件 在文件中粘贴以下内容： "/api": "target": "你的 API URL", “安全”：假 运行 cmd 为：- ng serve --proxy-config proxy.conf.json