Skip to main content

Notifications

Community site session details

Community site session details

Session Id : dHR8aWPbKYAnN5ff3hC5qy
Power Pages - Power Apps Portals
Unanswered

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

Like (0) ShareShare
ReportReport
Posted on 14 Mar 2022 15:22:08 by 29

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

 

gman_0-1647270881551.png

 

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

 

gman_1-1647271161818.png

 

 

Thanks in advance 

 

 

  • Christian Leverenz Profile Picture
    1,214 on 22 Mar 2022 at 17:05:32
    Re: CORS policy. preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource

    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 

     

    chleverenz_1-1647968545380.png

    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 

  • gman0104 Profile Picture
    29 on 21 Mar 2022 at 20:58:12
    Re: CORS policy. preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource

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

     

    Thanks GMan  

  • gman0104 Profile Picture
    29 on 21 Mar 2022 at 15:06:14
    Re: CORS policy. preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource

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

  • Christian Leverenz Profile Picture
    1,214 on 17 Mar 2022 at 15:50:07
    Re: CORS policy. preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource

    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

  • ragavanrajan Profile Picture
    7,036 Most Valuable Professional on 16 Mar 2022 at 11:09:27
    Re: CORS policy. preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource

    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.

     

     

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

Understanding Microsoft Agents - Introductory Session

Confused about how agents work across the Microsoft ecosystem? Register today!

Markus Franz – Community Spotlight

We are honored to recognize Markus Franz as our April 2025 Community…

Kudos to the March Top 10 Community Stars!

Thanks for all your good work in the Community!

Leaderboard

#1
WarrenBelz Profile Picture

WarrenBelz 146,679 Most Valuable Professional

#2
RandyHayes Profile Picture

RandyHayes 76,287 Super User 2024 Season 1

#3
Pstork1 Profile Picture

Pstork1 66,015 Most Valuable Professional

Leaderboard
Loading started