1

I am working on a Lightning Web Component (LWC) in Salesforce that fetches data from a custom Apex controller. Unfortunately, I am facing a CORS (Cross-Origin Resource Sharing) issue that prevents the LWC component from accessing the Apex controller. The error message in the browser console states:

"Access to XMLHttpRequest at 'https://-db-dev-ed.develop.my.salesforce.com/services/proxy?=1690870198901' (redirected from 'https://-db-dev-ed.develop.lightning.force.com/services/proxy?=1690870198901') from origin 'https://****-db-dev-ed.develop.lightning.force.com' 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."

Here is my LWC JavaScript code:

import { LightningElement, wire } from 'lwc';
import getDoctorsList from '@salesforce/apex/DoctorComponentController.getDoctorsList';

export default class DoctorListComponent extends LightningElement {
    doctorsList = [];

    @wire(getDoctorsList)
    fetchDoctorData(error, data) {
        if (data) {
            this.doctorsList = data;
        } else if (error) {
            console.log('Error fetching data '+ error);
        }
    }
}

And here is my Apex controller (DoctorComponentController.cls):

public with sharing class DoctorComponentController {
    public DoctorComponentController() {

    }

    @AuraEnabled
    public static List<Doctor__c> getDoctorsList(){
        List<Doctor__c> doctorsList = new List<Doctor__c>();
        try {
            doctorsList = [SELECT Id, Availability__c, Bio__c, Name, Specialty__c FROM Doctor__c];
        } catch (Exception e) {
            throw new AuraHandledException(e.getMessage());
        }
        return doctorsList;
    }
}

And here is my LWC's metadata file

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>58.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
    </targets>
</LightningComponentBundle>

I have already tried the following steps, but the CORS issue persists:

  1. Already 'https://*.force.com' is in the CORS list
  2. Cleared cache and cookies in the browser.
  3. Verified that the Apex method is marked as @AuraEnabled.
  4. Confirmed that the LWC is calling the Apex method using the @wire decorator.

Could anyone please provide insights or guidance on how to resolve this CORS issue? Am I missing any additional steps or configurations necessary for LWC to access the Apex controller without CORS errors? Any help or suggestions would be greatly appreciated.

Thank you in advance for your assistance!

3
  • 1
    Looks ok to me. Do you have enhanced domains turned on? It looks like it's re-directing from lightning.force.com to my.salesforce.com. Maybe that's an issue?
    – Nick C
    Commented Aug 2, 2023 at 1:18
  • Thanks @NickCook looks like that could be an issue, I will check on that. Really appreciate the inputs.
    – Lakshmi
    Commented Aug 2, 2023 at 3:06
  • Thanks @NickCook I have disabled enhanced domains, but the CORS issue is still present. The error message I'm now seeing is still the same with a slight change in the urls: "Access to XMLHttpRequest at 'https://-db-dev-ed.my.salesforce.com/services/proxy?=1691022026734' (redirected from 'https://-db-dev-ed.lightning.force.com/services/proxy?=1691022026734') from origin 'https://-db-dev-ed.lightning.force.com' 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."
    – Lakshmi
    Commented Aug 3, 2023 at 0:28

1 Answer 1

2

Thank you all for your help! After seeing the same CORS error even after disabling the enhanced domains, I suspected that a new Apex controller might do the trick. I cloned the original controller, and surprisingly, the LWC worked seamlessly with the new Apex class.

This got me thinking that the issue might be related to the domain from which the Apex code was being served. I then made some dummy updates to the old controller class, hoping that it could potentially be served from the same domain as the LWC code. And it worked! The CORS error was finally resolved.

I wanted to share this finding with the community, as it might be helpful for others facing similar CORS issues with LWC and Apex controllers. It appears that hosting both the LWC component and the Apex controller on the same domain can help resolve the CORS problem.

Special thanks to @Nick Cook for suggesting the idea of disabling the enhanced domain, which led me to explore different possibilities and ultimately reach this solution.

I hope this information proves useful to others facing similar challenges. Closing the question as resolved. Thanks again!

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .