javascript - Angular 7 HttpHeaders CORS 问题

Question

我正在尝试使用 UPS 的包裹评级 API，我可以在 Postman 中使用它，但不能在网络浏览器上使用。我知道 postman 不担心 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。我不确定我的格式是否错误，或者这里是否还有其他问题。

另一个注意事项:我正在本地主机上运行这个 Angular 项目，但是当我将其放在我的服务器上时，我遇到了同样的问题。

编辑:仅仅因为这与 CORS 有关，并不意味着它与我的情况重复。在这种情况下，指向提议的原件的链接就足够了。

Answer 1

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

默认情况下，在我的 PHP 项目中，我使用以下 header :

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 请求之前，它会执行一个名为“预检”的功能，该功能无非是检查目的地是否可以接收请求。

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