Access-Control-Allow-Origin with Ajax + PHP
Get the solution ↓↓↓I have a problem which I cannot solve, even though there are a couple of questions like this already asked. None of the answers however helped me here:
I have a simple request like this:
$.ajax({
type: "POST",
url: webServiceUrl,
data: JSON.stringify(obj),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
alert(msg.d.StatusMessage);
});
As from my error-message, I get the following error-message:
Access to XMLHttpRequest at 'https://www.my-site.com/myFile.php' from origin 'http://another-server.net' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
I read a bit about it and tried several approaches like changing the dataType tojsonp
, add the paramcrossDomain: true
as well as adding the specific header, but the error still remains. On my end of the server, I see that the request is being recognized, but I don't have any values or the payload.
My PHP-File looks like this:
<?php
header("Access-Control-Allow-Origin: *");
$arr = array ('item1'=>"test1",'item2'=>"test2",'item3'=>"test3");
$test = json_encode($arr);
echo $test;
When I'm usingjsonp
instead ofjson
in the datatype, I even get a http-code200
, but another notice rises and I'm still missing the data:
Cross-Origin Read Blocking (CORB) blocked cross-origin response https://my-site.com/
Anything else what I can try?
This is how my logged requests look like:
HTTP_HOST = www.my-site.com
HTTP_CONNECTION = close
HTTP_ACCEPT_LANGUAGE = de,en-US;q=0.9,en;q=0.8,de-DE;q=0.7
HTTP_ACCEPT_ENCODING = gzip, deflate, br
HTTP_USER_AGENT = Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36
HTTP_REFERER = http://another-site.net
HTTP_SEC_FETCH_DEST = empty
HTTP_SEC_FETCH_SITE = cross-site
HTTP_SEC_FETCH_MODE = cors
HTTP_ORIGIN = http://another-site.net
HTTP_ACCESS_CONTROL_REQUEST_HEADERS = content-type
HTTP_ACCESS_CONTROL_REQUEST_METHOD = POST
HTTP_ACCEPT = */*
HTTP_CACHE_CONTROL = no-cache
HTTP_PRAGMA = no-cache
Answer
Solution:
Updating my answer based on @DasSaffe response adding his solution here:
The answer is in the error response content-type
Request header field content-type is not allowed by Access-Control-Allow-Headers
We also have to add below code in our php file, if our error response says "Content-type" is not allowed
header('Access-Control-Allow-Headers: Content-Type');
I have created 2 servers using ngrok and done the same thing as you described.
I have removed below and it did worked
//contentType: "application/json; charset=utf-8", // REMOVE THIS
And when I add this back it gives me error
Access to XMLHttpRequest at 'https://cfd2365835e8.ngrok.io/research/issueresolver/test.php' from origin 'http://3f6f1317ffc6.in.ngrok.io' has been blocked by CORS policy: Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.
And I am assuming your PHP has header("Access-Control-Allow-Origin: *");
Just give it a try and change the code:
$.ajax({
type: "post",
url: "YOUR PATH",
data: {},
//contentType: "application/json; charset=utf-8", // REMOVE THIS
dataType: "json", KEEP IT LIKE THIS
success: function (msg) {
console.log(msg)
//alert(msg.d.StatusMessage);
}
})
Screenshot attached
Share solution ↓
Additional Information:
Link To Answer People are also looking for solutions of the problem: xmlhttprequest error flutter
Didn't find the answer?
Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.
Similar questions
Find the answer in similar questions on our website.
Write quick answer
Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.