CORS issue when trying POST

Question

I am getting a CORS issue when trying to use POST with my API. Access to XMLHttpRequest at 'http://localhost/finalMandatory/api/track/create.php' from origin 'null' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

I've tried to follow some other posts that seems to have the same issue, but I'm having a hard time implementing it in my own code.

$.ajax({
  url: "http://localhost/finalMandatory/api/track/create.php",
  type : "POST",
  contentType : 'application/json',
  data : form_data,
  success : function(result) {
    showProducts();
  },
  error: function(xhr, resp, text) {
    console.log(xhr, resp, text);
    console.log(form_data);
  }
});

I'm also using these headers in my api, which i thought would be enough to deal with CORS problems.

header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");
header("Access-Control-Allow-Methods: POST");
header("Access-Control-Max-Age: 3600");

I hope someone can help me fix my issue.

Code and details should be posted here as part of your question, and not as links to off-site resources. — Pointy, Jan 17 '21 at 16:55
Origin `null` would only appear when the script executes from outside of http context. Where is the script located? Might be [a duplicate](https://stackoverflow.com/questions/3595515/origin-null-is-not-allowed-by-access-control-allow-origin-error-for-request-ma). — Daniel W., Jan 17 '21 at 16:58
@DanielW. The script is located in C:\xampp\htdocs\finalMandatory\app\tracks and the API is located in C:\xampp\htdocs\finalMandatory\api\track — UnhappyEverAfter, Jan 17 '21 at 17:44
I don't mean the physical location but the context. Is the address of the file in the browser starting with `file://` or with `http://` ? — Daniel W., Jan 17 '21 at 18:38

score 2 · Accepted Answer · answered Jan 17 '21 at 18:09

2

I guess that the OPTION request sent to create.php is failing. Maybe because your backend code is trying to perform the action even in this case. OPTION requests should terminate only with CORS headers and an empty body. You can check this with a REST client (Postman for example).

answered Jan 17 '21 at 18:09

luscala

52
1

Im not quite sure what you mean, when i try and do POST with Postman it works as expected. What do i need to look for in OPTIONS, request? There is alot of information in the headers tab. – UnhappyEverAfter Jan 17 '21 at 18:35
Try to perform an OPTION request with Postman, with a blank body: this will show you the response which is the cause of the error. – luscala Jan 17 '21 at 18:47
I get a 400 Bad request, but isnt that to be expected since i dont have anything in the body? – UnhappyEverAfter Jan 17 '21 at 19:03
That’s the problem! In case of OPTION request the endpoint shouldn’t perform any action. Just return an empty 200 response. Put that change in place and you’ll see that it will work. – luscala Jan 17 '21 at 19:29
I think i understand now, im just not quite sure how to implement it. I've done so that when the body is empty it will just give me a 200 code in Postman, but it does not seem to fix the issue. – UnhappyEverAfter Jan 17 '21 at 20:31
I think you should check the incoming request method, instead of the body. Check also some hints regarding CORS handling in PHP. – luscala Jan 17 '21 at 20:47
I found out it was because i was setting the statuscode to 401 if there was no body, so i rewritten abit and now it is working. Thank you for the assitance. – UnhappyEverAfter Jan 17 '21 at 21:27

CORS issue when trying POST

1 Answers1