0

I attempt to make an AJAX HTTP POST to an API another developer built. I use JQuery for that, the API is in PHP. However, I receive the following error in the console:

Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource

My HTML:

<form>
  <input id="target" type="text" value="Field 1">
</form>

My Javascript/JQuery:

$("#target").on("click", checkemail);

function checkemail(){
  $.ajax({
    type: 'POST',
    url: 'https://test.api.planitcommander.nl/funnel_webhooks/emailExists',
    data: JSON.stringify({"email": "rj@xxxx.nl"}),
    contentType: "application/json",
    dataType: 'json'
    })
  .fail (function(data){
    console.log(data);
    })
}

Is there a mistake in my JQuery code, or should I ask the API developer for a solution?

Seems like the latter going from: Javascript CORS - No 'Access-Control-Allow-Origin' header is present

Matthijs
  • 361
  • 3
  • 10
  • 1
    Use chrome extension CORS and enable it then fire API request. You'll get a response. – Harsh Patel Apr 19 '18 at 06:01
  • https://chrome.google.com/webstore/detail/cors-toggle/jioikioepegflmdnbocfhgmpmopmjkim?hl=en – Ramusesan Apr 19 '18 at 06:03
  • 2
    Possible duplicate of [No 'Access-Control-Allow-Origin' header is present on the requested resource—when trying to get data from a REST API](https://stackoverflow.com/questions/43871637/no-access-control-allow-origin-header-is-present-on-the-requested-resource-whe) and literally dozens of others – JJJ Apr 19 '18 at 06:04
  • Yep, ask the API developer to enable CORS (if it is actually needed). Else, if you just need to fix this problem during development, check out various chrome extensions like https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en – Shiven Sinha Apr 19 '18 at 06:06
  • Thank you guys! Using the Chrome extension I indeed receive a response now. Do I understand correctly, to make it work outside of deveopment, I still need to ask the API developer to enable CORS? – Matthijs Apr 19 '18 at 06:13
  • It's not always a client-side issue, this is often related to server configuration. Message is clear, "..." is not present on the requested resource, the requested resource is on the server. Several posts exist on SO about that. – Julo0sS Apr 19 '18 at 06:42
  • Alright. Thanks again. Solved it on the server side at the API / PHP by allowing / whitelisting the domain from which I send request . – Matthijs Apr 24 '18 at 14:37

1 Answers1

-1

Please try this

function checkemail(){
  $.ajax({
    type: 'POST',
    url: 'https://test.api.planitcommander.nl/funnel_webhooks/emailExists',
    data: JSON.stringify({"email": "rj@xxxx.nl"}),
    contentType: "application/json",
    dataType: 'jsonp'
    })
  .fail (function(data){
    console.log(data);
    })
}

Please see https://vverma.net/fetch-any-json-using-jsonp-and-yql.html

Priya
  • 1,410
  • 14
  • 22