0

I am testing on Field Service Lightning mobile app LWC pilot feature. Here apex is not supported in Field service mobile with LWC. So, I am trying to make a SF rest resource callout, to get the required details. But I am getting below error: Access to fetch at 'https://asset2021qa1--part1.my.salesforce.com/services/apexrest/WorkOrder/0WO7c0000017s7tGAA' (redirected from 'https://asset2021qa1--part1.lightning.force.com/services/apexrest/WorkOrder/0WO7c0000017s7tGAA') from origin 'https://asset2021qa1--part1.lightning.force.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

I am using below code to make the callout:

fetch('/services/apexrest/WorkOrder/0WO7c0000017s7tGAA', 
        {
            // Request type
            method:"GET",
            headers:{
                "mode": "no-cors",
                "Access-Control-Allow-Origin": '*',
                "Accept": "application/json"
            }
        })
        .then((response) => {
            return response.json(); // returning the response in the form of JSON
        })
        .then((jsonResponse) => {
            console.log('jsonResponse ===> '+JSON.stringify(jsonResponse));
        })
        .catch(error => {
            console.log('callout error ===> '+JSON.stringify(error));
        })

I have also added the CSP and CORS for this. Still, I am getting the same issue.

Is there any additional step that needs to be done or the parameter needs to be send?

7
  • why are you invoking an apex rest endpoint? instead, why not simply invoke the apex method from the class in your lwc ?
    – glls
    May 20 '21 at 15:00
  • In the new pilot feature, LWC for Field Service mobile app, directly calling apex is not supported. May 20 '21 at 15:09
  • And I want to fetch multiple related records which is not possible through the lightning data service. That's the reason, I am trying with the Rest Resource. May 20 '21 at 15:15
  • What URL's have you added to CORS list? Also you would need a session ID or is your service public?
    – manjit5190
    May 20 '21 at 15:27
  • I have added below urls in CORS as well as CSP: 1. asset2021qa1--part1.my.salesforce.com 2. asset2021qa1--part1.lightning.force.com May 20 '21 at 15:44
0

CORS issue is resolved by specifying the mode parameter outside header. fetch('/services/apexrest/WorkOrder/0WO7c0000017s7tGAA', { // Request type method:"GET", mode: "no-cors", headers:{ "Accept": "application/json" } })

1
  • moving mode: "no-cors" outside the header throws an error [Unexpected end of input], would you please suggest.
    – gs650x
    Jun 9 '21 at 7:36
0

Had a similar problem the other day, where I wanted to make a callout to a third-party API directly from a LWC. It didn't work - my problem was that the response coming from the third party API wasn't compliant (didn't contain the required header elements) and that was completely out of my control. No setting in Salesforce would fix that.

The only way I got around this issue and still make the callout from LWC(without apex), was to use a Heroku proxy. Took me 15 minutes to set up with no code, using the free CORS-Anywhere repo on GitHub (https://github.com/Rob--W/cors-anywhere).

When using Heroku, the first request is always slow, as the app is not live and needs to be spun up, before responding to requests. You can easily get around that by making a bogus/empty request to Heroku upon the LWC component first loading, in the renderedCallback() function. That wakes the Heroku proxy app before you start making actual requests to it, removing any delays. So far it has worked with no issues - recommend it!

Instructions here.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.