Angular 7 HttpHeaders CORS问题[重复]答案

【问题标题】：Angular 7 HttpHeaders CORS Issue [duplicate]Angular 7 HttpHeaders CORS问题[重复]
【发布时间】：2019-09-16 06:30:12
【问题描述】：

我正在尝试使用 UPS 的包裹评级 API，我可以在 Postman 中使用它，但不能在 Web 浏览器中使用。我知道邮递员不担心 CORS。

我有这个帖子请求：

getRate() {
    return this.http.post(this.upsUrlTest, this.upsConfig, this.postOptions);
}

我的 3 个变量是：

upsUrlTest = 'https://wwwcie.ups.com/ship/1801/rating/Rate';
upsConfig = {...This is filled out and working in postman...}
postOptions = {
  headers: new HttpHeaders({
    transId: '0001',
    transactionSrc: '##########',  //Actual information is correct
    AccessLicenseNumber: '########',
    username: '#########',
    password: '#########',
    // These last two are where I believe the problem is
    'Content-Type': 'application/json',
    'Access-Control-Allow-Origin': 'x-requested-with, x-requested-by',
  })
};

我收到了这样的回复：

奇怪的是，在我得到 CORS 问题之前我得到了 404。我不确定我的格式是否错误，或者这里是否还有其他事情发生。

另一个注意事项：我在 localhost 上运行这个 Angular 项目，但是当我把它放在我的服务器上时，我遇到了同样的问题。

编辑：仅仅因为这与 CORS 有关并不会使其与我的情况重复。在这种情况下，一个指向提议的原件的链接就足够了。

【问题讨论】：

您确定确切的请求在邮递员中有效吗？我建议您在调查cors问题之前先理清404。某些 API 不会在错误响应上设置 Allow-Origin 标头。因此，一旦您收到 2xx 的状态码，您的 CORS 问题可能就不是问题了。您可以尝试通过 windows powershell 发出相同的请求。在开发者窗口中打开 Chrome 网络选项卡，右键单击导致 404 错误的请求。选择复制，然后选择 powershell。将内容粘贴到 powershell 中，看看响应是什么。
@A.Winnen，我确定确切的响应，减去 Content-Type 和 Access-Control-Allow-Origin（即使从 javascript 中删除也会给我同样的错误）在邮递员中工作得很好.我刚刚测试了甚至添加内容类型和来源，我仍然收到正确的响应。我目前无法访问 Windows 机器，不幸的是，powershell 高于我的工资等级。我在终端玩了一分钟，但我需要测试更多
你也可以复制 curl (bash) 的请求命令：P
@A.Winnen，啊，这有帮助。当我Copy all as cURL 时，我得到一个 html 文档，正文的第一行写着Error: CSRF token missing。如果我只使用Copy as cURL，我会得到 404
检查 curl 命令。将 curl 命令与您的邮递员请求进行比较。在 curl 命令和 postman 中检查 URL 和 Body 是否相等。尝试一一删除一些标题，直到它起作用。 UPS API 不喜欢该请求中的某些内容。

标签： javascript angular cors angular7

【解决方案1】：

使用 Angular，您需要在后端/目标 URL 中启用 CORS 策略。

默认情况下，在我的 PHP 项目中，我使用此标头：

header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: POST, PUT, DELETE, GET, OPTIONS");
header("Access-Control-Allow-Headers: Content-Type, Content-Length, Accept-Encoding, Authorization, X-Requested-With");

关于 Angular 的另一个有趣的事情是，在发出 Http 请求之前，它会执行一个名为“preflight”的功能，这只不过是检查目的地是否可以接收请求。

（抱歉我的英语不好，我是巴西人，我正在花时间练习我的语言）

【讨论】：

感谢您提供的信息，我将专门针对 Angular 进行研究。另外，请永远不要为“糟糕的英语”道歉。你的英语比我在美国每天与之交谈的大多数人都好！你比我认识的任何人都遥遥领先！
非常感谢！请在尝试此解决方案时给我反馈:)
我正在阅读这篇文章，似乎我对此没有太多控制权。我可以在本地运行它（我还没有尝试过），但无法在生产环境中运行它，因为它不是我的服务器......我不知道该怎么做！
我认为规避此问题的一种可能方法是按如下方式发出请求：Angular（http 请求）-> php 中的后端（cURL 请求）-> 外部目标我不知道是否确实有效，我暂时无法测试
有趣的是，这正是我现在正在做的事情。我已经使用 PHP 获得了回调，现在我只需要将两者联系起来！谢谢！