CORS and LWC Client calls

calloutdeveloperjavascriptlightning-web-components

I built a LWC that calls out to our ALM so a user can submit a ticket directly in SF.
However, I'm running into some CORS issues – within fetch() if I don't pass mode: no-cors then I receive:

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. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Of course, removing CORS does not allow me to pass in the authorization header nor content-type which malforms my request.

Am I correct that this is due to the client-side nature of fetch(), that if I were to make the callout via Apex then I would be server side and wouldn't have to contend with origin headers?

I have this same functionality working through our bespoke RoR app so assumed it had to do with client-side behavior.

Thanks for your response, relatively new to LWC and this is the first callout I've done with them – typically build in Apex, but wanted to mix things up a bit.

Best Answer

The issue resided on the endpoint, the CORS protection was on the service being called.

Vendor confirmed they have strict CORS protection and the call needs to be sent server, not client side.

If the vendor did not have strict CORS protection, the JS fetch method will work. Confirmed with another endpoint.

Related Solutions

[SalesForce] REST API OAuth2 CORS Issue

You need to redirect the browser to the login server. The process won't work with XMLHttpRequest/JavaScript, even if there was CORS, because it is inherently a browser-based flow. The correct order of operations for the OAuth2 Web Server flow is: redirect to Salesforce, user logs in and grants access, as necessary, Salesforce redirects back to your server, your server reads the "code" from the query string, and makes a request to the /token endpoint to finally receive an access token (and optional refresh token) that you will then use for future API calls.

Instead of trying to call the login page directly, just do this:

window.location = salesforceLoginUrl;

Your browser will then go to Salesforce to login, just as the anchor link did, and you can complete the process.

[SalesForce] Google Recaptcha V3 Implementation in Lightning Web Component

I have a solution that you can try.

Upload a static resource: recaptcha2.html

<html>
  <head>
    <title>reCAPTCHA demo: Simple page</title>
     <script src="https://www.google.com/recaptcha/api.js" async defer></script>
  </head>
  <body>
    <form action="?" onsubmit="return validateForm()" method="POST">
      <div class="g-recaptcha" data-sitekey="6LdIAZgUAAAAAFX4gX_8CQrVXT-5kPka0w_i2bnY"></div>
      <br/>
      <input type="submit" value="Submit">
    </form>

    <script type="text/javascript">
        function validateForm(){

            if(grecaptcha.getResponse().length == 0){
                alert('Please click the reCAPTCHA checkbox');
                parent.postMessage("captcha failed", location.origin);
                return false;
            }
            parent.postMessage("captcha success", location.origin);
            return true;
        }
    </script>
  </body>
</html>

You will need to create a resource file called: recaptcha2.resource-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<StaticResource xmlns="http://soap.sforce.com/2006/04/metadata">
    <cacheControl>Private</cacheControl>
    <contentType>text/html</contentType>
</StaticResource>

Make an LWC component: captcha.html

<template>
    <iframe src={navigateTo} name="captchaFrame" onload={captchaLoaded} width="350" height="500" style="border:1px solid red"></iframe>
</template>

and the JavaScript: captcha.js

import { LightningElement, track } from 'lwc';
import pageUrl from '@salesforce/resourceUrl/recaptcha2';

export default class GoogleCapatcha extends LightningElement {
    @track navigateTo;
    captchaWindow = null;

    constructor(){
        super();

        this.navigateTo = pageUrl;

        window.addEventListener("message", this.listenForMessage);
    }

    captchaLoaded(evt){
        var e = evt;
        console.log(e.target.getAttribute('src') + ' loaded');
        if(e.target.getAttribute('src') == pageUrl){
            // You know that your captcha is loaded
        } 
    }

    listenForMessage(message){
        console.log(message);
    }
}

I hadn't used a captcha prior, when registering the domain I didn't realize that I should leave off the https://.

Related Topic