角 JS。预检响应中的 Access-Control-Allow-Headers 不允许请求标头字段 Access-Control-Allow-Origin

Posted 2023-03-04

【中文标题】角 JS。预检响应中的 Access-Control-Allow-Headers 不允许请求标头字段 Access-Control-Allow-Origin

【英文标题】：Angular JS. Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers in preflight response

【发布时间】：2018-03-02 09:35:22

【问题描述】：

我已经尝试了所有的东西，使用CORS 插件。禁用 chrome 中的网络安全。 响应来自POSTMAN，但无法在$http 中获取。

$http(
  url: "https://interview-api-staging.bytemark.co/books",
  method: 'GET',
  headers: 
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Methods': 'OPTIONS,POST,GET,OPTIONS,PUT,DELETE',
    'Access-Control-Allow-Headers': 'Authorization,Content-Type,Accept,Origin,User-Agent,DNT,Cache-Control,X-Mx-ReqToken,Keep-Alive,X-Requested-With,If-Modified-Since'
  
).then(function(d) 
  console.log(d);
);

【问题讨论】：

“无法获取”是什么意思？您收到错误响应吗？控制台中是否打印任何内容？

【参考方案1】：

客户端与它无关。使用 CORS 标头，您是在告诉客户端我信任哪些其他服务器。然后他们可以共享您的资源，客户不会介意。

例如，如果您告诉客户您有两个域，以便让您的资源由您的第二个网站使用，您并没有说我信任您作为客户。

所以你保护的是服务器，而不是客户端。您不希望 AJAX API 端点可以通过托管在世界任何地方的脚本进行访问。

客户不会因此而获得/失去任何东西。它只是对服务器的一种保护，因为使用 AJAX 所有 URL 对任何人都是清晰可见的，如果没有这种保护，任何人都可以使用您的 API 继续运行他们的前端，只有服务器必须从中丢失，所以他们可以决定谁可以使用他们的资源。

source.

如上所述，您不需要在前端做任何与 cors 相关的事情。确保 cors 标头是从后端在其响应标头中发送的。

服务器必须保护自己，所以他们必须告诉客户端一些规则，哪个客户端将遵循。默认情况下，客户端将接受所有内容。

【参考方案2】：

在您的后端使用CORS。否则，您可以在 Chrome 网上应用店中查看Allow-Control-Allow-Origin: *，使用chrome extension。

当您尝试使用 Angular 应用程序时，您需要打开该扩展程序。

否则您需要在后端应用程序中激活 CORS