2

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.

Improve this question

1 Answer 1

Reset to default
5

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.

Improve this answer
14
  • Thanks for your help with this and your detailed answer. Very much appreciated. I've just gone through and read all the posts on Stack Overflow and after several attempts without any successful submissions, I have just noticed in the Request Headers that "Access-Control-allow-Origin: *" . Does the React developer need to restrict this? I have read pros and cons about this. That's correct. This is only for testing purposes and I did ask the developer to implement captcha for strong security and he did. Still struggling with this, I am not being able to add any origin URl to allowlist.
    – SSimion
    Commented Jun 16, 2021 at 19:05
  • Error: • Invalid protocol in a URL pattern. Origins must use the HTTPS protocol. • Origins may not contain paths or queries, since they are not part of the origin.
    – SSimion
    Commented Jun 16, 2021 at 19:05
  • 1
    @SSimion Right, you would need to add something like localho.st to your CORS setting (the path is not considered in CORS requests). The developer would need to rig a (probably self-signed) certificate for testing purposes, and add that cert to their browser's trust chain. The specifics depend on browser and OS, but should be easily found on the Internet.
    – sfdcfox ♦
    Commented Jun 17, 2021 at 2:11
  • Thank you for coming back. I've reached out to the developer to potentially set up an HTTPS Local Servers so I can add this in the CORS Settings in Salesforce, as the Access-Control-Allow-Origin: * and it's built on a localhost.
    – SSimion
    Commented Jun 17, 2021 at 14:07
  • 1
    @SSimion Bypassing by extension won't work--you can't possibly expect everyone who visits your site to install an extension just to submit their data. A 404 error means "file not found"--double-check the URL they're trying to reach, and double-check that the code was deployed to production, if needed. Good news, though, a 404 likely means that they're not experiencing a CORS problem.
    – sfdcfox ♦
    Commented Jun 17, 2021 at 14:20

You must log in to answer this question.

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