预检响应没有 HTTP ok 状态。 Angular 6 中的 403

Posted 2023-02-27

【中文标题】预检响应没有 HTTP ok 状态。 Angular 6 中的 403

【英文标题】：Response for preflight does not have HTTP ok status. 403 in Angular 6

【发布时间】：2019-03-15 18:05:18

【问题描述】：

我正在尝试发出 PUT 请求，但出现以下错误：

Failed to load <localhost:8080/uaa/groups/dfsfaes8323df32>: Response for preflight does not have HTTP ok status.

显然，当我发出 GET 和 POST 请求并在邮递员中工作时它可以工作，但它不适用于我的代码中的 PUT 请求。

这是我的要求：

let link = "https://ice.<mydomain>.com/uaadev/Groups/groupId";
link = link.replace("groupId", data);
const updLoad = 
  displayName: this.groupInfoObjects.displayName,
  description: this.groupInfoObjects.description,
  zoneId : "uaa",
  schemas: [
 "urn:scim:schemas:core:1.0"
  ]
;
let Header = new Headers(
  Authorization: `Bearer token`.replace("token", this.token),
  "Content-Type": "application/json",
  Accept: "application/json",
  "if-Match":"*"
);
let Option = new RequestOptions( headers: Header );

this.http.put(link, updLoad, Option).subscribe(
  res => 
    console.log(res);
    console.log(res.status);
    if (res.status === 200) 
 this.fetchGroupInfo(this.dataservice.getDTO("GroupId"));
      swal(" Updated Successfully");
    
  ,
  error => 
    console.log("errroroorororororor");
    console.log("error object " +error);
  
);

【问题讨论】：

您需要配置https://ice.<mydomain>.com 服务器，使其允许/uaadev/Groups/groupId 端点的PUT 请求。现在，403 服务器响应表明服务器不允许该 /uaadev/Groups/groupId` 端点的 PUT 请求。您无法在前端 javascript 中做任何事情来影响/改变它。

在此处标记@sideshowbarker - 是的，它与 Angular 或前端代码完全无关。您必须在后端配置 CORS 以在 Acces-Control-Allow-Methods 标头中包含 PUT 或 PATCH。您可能可以使用不透明的fetch，但同样取决于您的后端设置。

不透明的获取是通过设置mode:'no-cors'来完成的吧？

【参考方案1】：

这是因为您必须确保您的服务器配置为在 PUT 请求之前为浏览器触发的 OPTIONS 请求发送 200 或 204。

查看第一条回复here

您使用 PUT 获得此信息的原因是因为它触发了 OPTIONS（浏览器的附加预检请求）以了解更多有关哪些方法触发此信息的信息，您可以查看 here。基本上，浏览器在 PUT 之前“ping”服务器。

令人沮丧的是，这似乎是一个前端问题，因为 PUT 请求将在测试时起作用（即，如果您使用邮递员）而不是浏览器。

所以这不是前端问题，无法使用 Angular 解决。

【参考方案2】：

the process for solving these process is listed below:

1.create a proxy.conf.json file 
2.set it up like this:copy and paste the below code

  "/dev/*": 
    "target": "https://google.com/",
    "secure": false
  ,
  "changeOrigin": false,
  "logLevel": "debug"


3. add this to your package.json :
"start": "ng serve --proxy-config ../Activated/proxy.conf.json",
Note:Activated is the folder name that contains the angular code.
4.you place your url link:
let link = "dev/Groups/groupId" (just a sample)`enter code here`

5.npm start to restart you application.