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

[gman]

I'm getting the old  Access to XMLHttpRequest at https://xxxxx 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 have tested my API call using postman (GET) with the correct parameters and Authorization header.  and all is fine

I have also added the following site settings as recommended here but still getting the error

https://docs.microsoft.com/en-us/powerapps/maker/portals/configure/cors-support

Is there anything else i could be missing apart from maybe contacting the API providers in order to get added to a whitelist of calling portals ?

Also here is a sample of my Ajax call

Thanks in advance 

[ragavanrajan]

Hi @gman 

I remember I have contacted the vendor to add the portal origin but probably there should be some way. I will tag @chleverenz here. 

Hi Christian, can you help? 

Hope it helps. 
------------

If you like this post, give it a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users to find it.

[chleverenz]

Hi @gman ,

indeed, the called API has to allow to be called from somewhere. I had also an issue with this one and created an azurefunction in js, which was simply a proxy. So, from the targetapi point of view, it was not a cors request, it was just a request from somewhere.  And as i had ownership on the azureresource, i was able to allow me 🙂 for cors-requests 🙂

So, it doesn't have to be an azurefunction. The trick is to mimik a call from somewhere withaout making cors-requests.

It's a quite a time ago, so i can not provide code, but if needed, i could try reproducing (was really really simple)

Thanks @ragavanrajan for the challenge. Obviously i have a kind of network- and codereputation, what i really like 🙂 🙂

Have fun,

  Christian

[gman]

Thanks for your reply. I'm going contact the service provider to see if i need to add my portal to an origins list. 

[gman]

It would be great if you could provide an example. I'm not having an luck from the service provider

Thanks GMan  

[chleverenz]

Hi @gman ,

i grabbed out the old code which i used for this kind of issue. 

In fact, i created a functionapp in azure. Created a js function which is triggered by a request. The code of the function is like this: 

```

var https = require('https');

module.exports = function (context, req) {
var options = {
hostname: 'mytargethost.atargetdomain.com',
//port: 443,
path: '/v1/tag',
method: 'POST',
headers: {
'Content-Type': 'application/json',
'x-api-key' : 'abcdefghi'
}
};
var fwdreq = https.request(options, function(res) {
var data = "";
//res.setEncoding('utf8');
res.on('data', (chunk) => {
data += chunk;
});
res.on('end', () => {
context.res.body = data;
context.done();
});
});
fwdreq.on('error', function(e) {
context.res.body = 'problem with request: ' + e.message;
context.done();
});
fwdreq.end(JSON.stringify(req.body));
};

```

So, an incoming requests triggers the creation of an https request itself. The url 'mytargethost.atargetdomain.com' is the url which did not have cors allowed.

I had to additonally pass in an api key, which is also great here because you do not have to reveal your key upon request from ypout portal 🙂

When the forwarded request is finished, the result is sent to the original request.

Yes, urls and keys could be in environment variables...

Then, i enabled cors for my website and the stuff went smooth for me.

From the perspective of 'mytargethost.atargetdomain.com', it is not a cors request anymore, its a simple request from a client.  

No idea, whether tThe code still works, but you will get the idea 🙂

Hope it inspires you,

  Christian

PS infos on functions: https://docs.microsoft.com/en-us/azure/developer/javascript/how-to/develop-serverless-apps 

PPS just checked it, still works, even my api code is still valid 🙂 - for more informations on https requests with node js see here: https://nodejs.dev/learn/making-http-requests-with-nodejs