[SalesForce] CORS: No “Access-Control-Allow-Origin” header is present on the requested resource

The developer has included the Web-to-Lead form I have provided in his React – js application. I have enabled the CORS in Salesforce, but the developer is receiving the below error message, when they are trying to submit a Lead:

Failed to load resource: the server responded with a status of 404 (Not Found)

Access to HMLHttpRequest at <Salesforce URL> from origin <http://ipaddress>" has been blocked by CORS policy: No "Access-Control-Allow-Origin" header is present on the requested resource.

Unfortunately, looking at the origin in the error message, I have realised I have been given the URL that appears in the browser's address bar to add it on the allowlist, rather than the origin URL as I have asked for.

I have asked for the origin the request header again and having a look in the Request Headers section and it looks like the "Referer" is a localhost: http://localhost:…./

I have used this link as a guidance – https://developer.salesforce.com/docs/atlas.en-us.chatterapi.meta/chatterapi/extend_code_cors.htm , but am I meant to add both the IP address and the localhost in the CORS?

Any help is much appreciated. Thank you.

Best Answer

I believe all major browsers specifically ignore localhost as a legal target for Access-Control-Allow-Origin as a security measure. There's a question with an answer that goes in to more detail you may want to read.

Assuming this is just for testing purposes, you can prop up a fake domain name on a local DNS, and then use that instead. I got this idea from this question on Stack Overflow.

If this information helps you, be sure to go upvote those two questions and answers over on Stack Overflow, they deserve credit, too.

Chrome does not support localhost for CORS requests (a bug opened in 2010, marked WontFix in 2014).

To get around this you can use a domain like localho.st (which points at 127.0.0.1 just like localhost) or start chrome with the --disable-web-security flag (assuming you're just testing).

In the production model of your React app, you'll use whatever domain its actually hosted at, which presumably will be a .com or something like that, and everything will work as you expect.

Alternatively, your React developer could use the server as a proxy instead of directly connecting to Salesforce. This is the typical design, as it prevents spiders from finding the URL and being able to directly spam your web-to-lead queue.

This is a pretty major problem, as I've stated previously in another answer, which is why most developers today shouldn't include web-to-lead in their public-facing sites, at least not without implementing a captcha.

You can, of course, use the old-school way of using validation rules, but that ends up kind of being a moving target, as spammers regularly change their payloads to try and get through to advertise their typically NSFW products and services. It's much better to start off with strong security like a captcha or a strictly controlled proxy on the server.

Related Topic