Apex Code Development You need to sign in to do that
Don't have an account?
Chris Baboujian Web2Lead form submission gets CORS error although I have whitelisted the domain
TLDR; Instead of native form submission for web2lead form, I am using REST API to hit the https://webto.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8 endpoint with form data in the request body to submit the Web2Lead form. And it's getting CORS error.
---
While the raw form looks like this
I have built the form using some custom components in React and providing the below `handleSubmit` handler to it to submit the form.
And this axios request is getting CORS error on the browser although I added the domain to the whitelist on the security settings.
Are Web2Lead forms intended to be submitted as a native form always? Is there a way to submit this form using axios without getting the CORS error?
---
While the raw form looks like this
<form action="https://webto.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST">
I have built the form using some custom components in React and providing the below `handleSubmit` handler to it to submit the form.
const actionUrl =
'https://webto.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8';
const handleSubmit = async (formValues) => {
try {
await axios.post(actionUrl, formValues, {
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
});
} catch (error) {
console.error(error);
}
};
And this axios request is getting CORS error on the browser although I added the domain to the whitelist on the security settings.
Are Web2Lead forms intended to be submitted as a native form always? Is there a way to submit this form using axios without getting the CORS error?
One way to resolve this issue is to use a proxy server to make the request on behalf of your React application. The proxy server would be hosted on the same domain as your React application, and it would forward the request to the Salesforce endpoint. This way, the request would not be a cross-origin request, and the CORS error would not occur.
Another option is to use Salesforce's REST API to submit the Web-to-Lead form. You can create a REST API endpoint in Salesforce that accepts the form data and creates a new Lead record. Then, in your React application, you can make a POST request to this endpoint with the form data. This way, you can avoid the cross-origin request issue altogether.
To create a REST API endpoint in Salesforce, you can create a custom Apex REST service that handles the incoming request and creates the Lead record. You can then expose this service using a REST resource. Here is an example of how to create a custom Apex REST service:
@RestResource(urlMapping='/webToLead') global class WebToLeadService { @HttpPost global static void createLead() { // Create a new Lead record using the request body // Parse the request body to get the form data // Create a new Lead record using the form data // Save the Lead record to the database } }You can then make a POST request to the /services/apexrest/webToLead endpoint with the form data. To authenticate the request, you will need to include a Salesforce access token in the request header. You can obtain an access token by authenticating with Salesforce using OAuth 2.0.