Avatar of Tim Brocklehurst
Tim Brocklehurst
Flag for United Kingdom of Great Britain and Northern Ireland asked on

How to get past the CORS No 'Access-Control-Allow-Origin header' error with jQuery.ajax ?

How to get around the jQuery.ajax CORS and Jsonp callback problem?
I'm writing a solution in a WordPress plugin which requires an api GET call, and will later require POST too, from JavaScript.
My initial attempt resulted in a CORS policy block:
Access to XMLHttpRequest at 'https://app.xxxxx.com/api/pub/v1/contacts/528a34f9-dbc1-4c50-ad6b-a9f300e19ea9' from origin 'https://www.xxxx.co.uk' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Open in new window


This is what the jQuery looked like:

function generateCandidate(cuid){
    console.log('Generating New Candidate');
    var api = my_api()
    var candUrl = "https://app.xxxx.com/api/pub/v1/contacts/" + cuid;
    var da = {
        api_key: api,
    }
    jQuery.ajax({
        url: candUrl,
        data: da,
        type: "application/json",
        method: 'GET',
        success: function(resp){
            console.log(resp);
        },
        error: function(err){
            console.log('Ajax ERROR:');
            console.log(err.toString());
        }
    });
}

Open in new window


So I did some research and discovered plenty of people were getting around the CORS issue by specifying the 'jsonp' type instead of json. So I tried replacing
        type: "application/json",

Open in new window

with
dataType: 'jsonp',

Open in new window


But then I discovered I need to specify a callback somehow, because the error I get is this:

jquery.js?ver=1.12.4:4 GET https://app.xxxx.com/api/pub/v1/contacts/528a34f9-dbc1-4c50-ad6b-a9f300e19ea9?callback=jQuery1124036525732914578746_1550866428904&_=1550866428905 net::ERR_ABORTED 404

Open in new window


I've read about how the callback can be sent to a function, and handled that way to make it work. But I can't find out what the function should do, or how to write it.
And I'm not sure if that's what I should be doing anyway, or if there's any way I can solve the CORS problem in a way it can be used publicly, and not just in my own browser.

Can anyone assist, or point me in the right direction to get this solved.

Many thanks
Tim
* Cross-origin resource sharing (CORS)JavaScriptjQueryAJAXJSON

Avatar of undefined
Last Comment
leakim971

8/22/2022 - Mon
David Favor

The only way to "get past" this type of problem is for the owner of the asset being accessed to ACL the asset to the consumer of the asset has privilege to access the asset.

Only the asset owner can accomplish this action.
Tim Brocklehurst

ASKER
Thanks for your response David...
Yes I'm sure 'get past ' is the wrong term for solving this issue.

I'm struggling to understand the rest of your answer though I'm afraid. I do have an api key for the resource (or do I mean asset?) And I'm adding that in the data passed through Ajax.

Are you able to see whats wrong with my code or should I provide more info?

I have written numerous successful Ajax calls to api resources in the past but I'm still trialling this particular one, and need to get it working before I can proceed.

Thanks again
Best wishes
Tim
Chinmay Patel

Hi Tim,

I need some more information before I attempt to answer. The jquery call you are trying to make is it going to be hosted on the same domain or on some other domain?

Regards,
Chinmay.
Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes
Tim Brocklehurst

ASKER
Thanks Chinmay
The call uses an api key to access data on another domain than the one hosting the request.
Tim
ASKER CERTIFIED SOLUTION
leakim971

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
Tim Brocklehurst

ASKER
OK - wow... thanks for that.
I've only ever called foreign data via ajax by javascript.  But will try this method using PHP now.
Will revert on how it works for me...

Many thanks
David Favor

You said, "I do have an api key for the resource (or do I mean asset?) And I'm adding that in the data passed through Ajax."

Tip: Always get API code working using curl, or something similar, before you attempt with AJAX.

If you use curl, many times some minor problem will pop up to solve first... which will be difficult to impossible to even determine if you start with AJAX.
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
Tim Brocklehurst

ASKER
YES! - thank you...
That is the answer to EVERYTHING!  (or at least, for the time being).
It works.

Thank You @leakim971  you're a star!

What a relief it is to see this in my console, finally.... Thank you...!
Tim Brocklehurst

ASKER
Thank you leakim971 -
Your explanation of how to use php from javascript, instead of going via javascript directly (which I had been) is a HUGE help.
Thanks also to David and Chinmay for taking the time to help with this.

Very glad to get the solution so quickly.
leakim971

you're welcome, have a nice week-end!
This is the best money I have ever spent. I cannot not tell you how many times these folks have saved my bacon. I learn so much from the contributors.
rwheeler23