0

I have next ajax request usnig jquery in my react app, here is this request:

index.js

$.ajax({
  type: "POST",
  url : 'http://localhost/my-app/server/send.php',
  "async": true,
  "crossDomain": true,
  "headers": {
    "accept": "application/json",
    "Access-Control-Allow-Origin":"*"
  }
}, function(data) {
  alert(data, "success!")
})

send.php

<?
header("Access-Control-Allow-Origin: *");
echo "...response...";

But my ajax call raises an error in console:

Access to XMLHttpRequest at 'http://localhost/my-app/server/send.php' from origin 
'http://localhost:3000' 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

But I send headers, what is wrong?

WhoAmI
  • 623
  • 5
  • 16
  • Your problem is related to CORS (Cross Origin Resource Sharing). Take a look here [Understanding CORS (StackOverflow)](https://stackoverflow.com/questions/25845203/understanding-cors) – DDomen Feb 06 '21 at 10:41
  • Does this answer your question? [Cross-Origin Request Headers(CORS) with PHP headers](https://stackoverflow.com/questions/8719276/cross-origin-request-headerscors-with-php-headers) – DDomen Feb 06 '21 at 10:44
  • @DDomen it does not help – WhoAmI Feb 06 '21 at 10:58
  • Can you check if the url you are calling in your preflight is actually the same? (Use network tab in dev tools) – DDomen Feb 06 '21 at 11:19
  • Your server needs to allow all origins, or explicitly accept `localhost:3000` as an origin. – Flagship1442 Feb 06 '21 at 11:29
  • @James See my code in the question - there is `*` means all allowed and it does not work, that's why I ask :) – WhoAmI Feb 06 '21 at 11:33
  • IMHO, @James wanted to mention that you will need to configure your server, to accept requests from the origin localhost:3000. The code you shared is from the client side. – Udyan Sharma Feb 06 '21 at 11:41

0 Answers0