1

I am trying to make a PUT request but I get the following error:

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

Apparently it works when I make GET and POST requests and works in postman but it doesn't work with the PUT request within my code.

Here is my request:

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);
  }
);
billyjov
  • 2,112
  • 14
  • 26
Dave Kalu
  • 1,133
  • 2
  • 13
  • 29
  • 2
    You need to configure the `https://ice..com` server so that it allows PUT requests for the `/uaadev/Groups/{groupId}` endpoint. Right now, the 403 server response indicates the server is disallowing PUT requests for that /uaadev/Groups/{groupId}` endpoint. There’s nothing you can do in your frontend JavaScript to affect/change that. – sideshowbarker Oct 10 '18 at 18:48
  • tagging on to @sideshowbarker here - yeah, it's completely unrelated to Angular or front-end code. You gotta configure the CORS on the backend to include `PUT` or `PATCH` in the `Acces-Control-Allow-Methods` header. You might be able to get by with an opaque `fetch`, but again, depends on your backend setup. – joh04667 Oct 10 '18 at 19:01
  • Opaque fetch is done by setting `{mode:'no-cors'}` right? – Dave Kalu Oct 10 '18 at 19:04

2 Answers2

5

This is because you have to make sure your server is configured to send a 200 or 204 for the OPTIONS request that is triggered by the browser before the PUT request.

See the first response here

The reason you get this with PUT is because it triggers OPTIONS (an additional preflight request by the browser) to see more about what methods trigger this you can look here. Basically, the browser is "pinging" the server before the PUT.

What's frustrating is that it seems like a frontend issue because a PUT request will work while testing (i.e. if you use postman) but not the browser.

So it's not a frontend issue and cannot be solved using Angular.

richdurazo
  • 116
  • 5
3
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.
Omotayo Peter
  • 60
  • 5