Question

我正在尝试使用HttpClient post方法调用数据URL，我在post调用中添加了标头。但是我仍然收到错误消息，

来自来源“ http://localhost:6200”的
已被CORS政策阻止：对预检请求的响应未通过访问控制检查：标题上没有'Access-Control-Allow-Origin'标头请求的资源。

但是当我检查网络时，我看到的方法显示为OPTIONS而不是post

Request Method: OPTIONS

请在下面找到HTTP调用

const headers = new Headers();
headers.append('Access-Control-Allow-Origin','*');
headers.append('Access-Control-Allow-Methods','GET, POST, PATCH, PUT, DELETE, OPTIONS');
headers.append('Access-Control-Allow-Headers','Origin, Content-Type, X-Auth-Token');
headers.append('Content-Type', 'application/json');
let options = new RequestOptions({ headers: headers });
return this.httpClient.post(this.url, options).pipe(map(this.extractData));

任何人都可以解决这个问题，我也在下面添加了proxy.config.json文件

"/sap/*": {
          "target": "http://t1525bms.somecompany.com:8080/sap",
          "secure": false
        }

这样我也没用。

Answer 1

您可以解决在浏览器中安装允许CORS进入您的响应请求的扩展程序的问题。

您可以在chrome网上商店https://chrome.google.com/webstore/search/cors?hl=en上找到不同的解决方案，您只需要安装所需的扩展程序并启用它，然后您的网站就可以正常工作。

这是一个“黑客”，仅允许您开发和测试您的网站，但不能在生产中使用此方法。

正如Christian Scillitoe所指出的那样，CORS标头附加在服务器提供的响应消息中，因此服务器开发人员已经编写了API，该API必须允许您的站点发出发布请求，而客户端不是能够以任何方式更改此安全行为。

这是使您的网站在产品环境中正常工作的唯一方法。

关于OPTIONS请求而不是POST，问题是由于您添加到请求中的标题无效，如果您需要更多信息，可以找到它们搜索与CORS错误相关的“预检请求”。

如何使用httpclient发布请求解决角度应用程序中的Access-Control-Allow-Origin？

1 个答案: