function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Sagar Manglani 14Sagar Manglani 14 

Web-to-lead form in React.js giving CORS policy error

I am trying to create a web to lead form in React.js but it is giving me following error
Error screenshotI have included domains in Whitelisted Origins and remote sites list
The react code I am using on submitting is - 
handleSubmit = async (e) => {
  const { general_settings } = this.props;
  e.preventDefault();
  if (!this.state.submitDisabled) {
    const validation = await this.formRef.current.validate();
    if (typeof validation.errors === 'undefined') {
      const {value} = validation;

      this.setState({processing: true});

      const formValues = {
        oid: general_settings.salesforce_oid,
        recordType: general_settings.salesforce_record_type,
        Campaign_ID: this.props.campaign_id,
        lead_source: "JH Website",
        ...value
      };

      this.Axios = axios.create();

      const results = await this.Axios.post(general_settings.salesforce_url, formValues);
      this.setState({processing: false, submitted: true});
    } else {
      this.setState({errors: validation.errors});
    }
  }
};

 
Ajay K DubediAjay K Dubedi
Hi Sagar,

This error occurs because your browser's policy doesn't allow you to call from domain 1 to domain 2(because of security reasons)

eg- * If You have link from Domain1 which is opened in browser and asking for a JavaScript file from Domain2.
      Now your web browser makes call to Domain2.
    * If on Domain2, you have a policy to accept request like JavaScript or CSS from only Domain2 and ignore all requests from another domains, then your     
      browser’s Domain1 request will fail with an error
      
Note- Please install this plugin in your browser.It will Bypass Browser's Policy
      https://chrome.google.com/webstore/detail/moesif-orign-cors-changer/digfbfaphojjndkpccljibejjbppifbc?hl=en-US

In short, no.
The access-control-allow-origin plugin essentially turns off the browser's same-origin policy. For every request, it will add the Access-Control-Allow-Origin: header to the response. It tricks the browser, and overrides the CORS header that the server has in place with the open wildcard value

I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.

Thanks and Regards,
Ajay Dubedi
www.ajaydubedi.com