hCaptcha throws 403 forbidden Error when first loading (response: "invalid data")

Question

When the hCaptcha ist first loaded onto the Website it throws error 403 (Forbidden). It looks fine, but when the captcha is pressed, the loading (orange circle) goes on indefinitely.

GET     https://hcaptcha.com/checksiteconfig?v=c65510b&host=localhost&sitekey=33cb1fe1-c243-40c0-9488-5816b2418e6c&sc=1&swa=1

The HTML looks like this:

<ng-hcaptcha (verify)="onVerify($event)"></ng-hcaptcha>

The import for hCaptcha looks like this:

import { NgHcaptchaModule } from 'ng-hcaptcha';

@NgModule({
declarations: [
    AppComponent,
],

imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    FormsModule,
    HttpClientModule,
    RouterModule,
    CommonModule,
    ReactiveFormsModule,
    NgHcaptchaModule.forRoot({
        siteKey: '33cb1fe1-c243-40c0-9488-5816b2418e6c',
        languageCode: 'en',
    }),
],
bootstrap: [AppComponent],)}

Any help or pointers are highly appreciated.

Answer 1

It seems the issue comes from the hostname provided in your link, (host=localhost). hCaptcha API forbids usage of localhost and 127.0.0.1: https://docs.hcaptcha.com/#local-development.

Try any other hostname and you should see results.

I found an example of solution in php: hCaptcha : CORS error even if I've added a local DN in my Ubuntu host file.

hCaptcha also provides a set of keys for testing: https://docs.hcaptcha.com/#integration-testing-test-keys (thanks Use and test hCaptcha on localhost).