Google reCaptcha responds with 405 error and CORS message

Question

I had implement Google reCaptchaV3 on my login page
I would like to get the score by sending request to https://www.google.com/recaptcha/api/siteverify
My code to sent post request like following

var x = this.http.post<RecaptchaResponse>(`https://www.google.com/recaptcha/api/siteverify?secret=${this.secret}&response=${this.token}`, null)
  .pipe(
    map(data => new RecaptchaResponse().deserialize(data)),
        catchError(() => throwError('No Score')),
);

However I get the error

Access to XMLHttpRequest at 'https://www.google.com/recaptcha/api/siteverify?secret=SECRET&response=TOKEN' from origin 'http://localhost:50000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I did try the following approach:
1) Add 'localhost' on admin console
2) Add 127.0.0.1 on admin console
3) Disable 'Verify the origin of reCAPTCHA solutions' option

However none of above were working.
Any idea on how to test the reCaptcha in localhost?
As it's working on Postman but not on localhost.

UPDATE
I had added headers to the request but hit another error

let headers: HttpHeaders = new HttpHeaders();
    headers = headers.append('Access-Control-Allow-Origin', 'http://localhost:50000');
    headers = headers.append('Access-Control-Allow-Methods', 'POST');
    headers = headers.append('Access-Control-Allow-Headers', 'access-control-allow-headers,access-control-allow-methods,access-control-allow-origin');
var x = this.http.post<RecaptchaResponse>(`https://www.google.com/recaptcha/api/siteverify?secret=${this.secret}&response=${this.token}`, null, {headers: headers})
      .pipe(
        map(data => new RecaptchaResponse().deserialize(data)),
            catchError(() => throwError('No Score')),
    );

Hit error on preflight request

Access to XMLHttpRequest at 'https://google.com/recaptcha/api/siteverify?secret=SECRET&response=TOKEN' from origin 'http://localhost:50000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

UPDATED V2 => SOLUTION
The question has been closed due to duplicated question.
However the answer from the post did not solve my issue.

I had finally found out using proxy will solve the issue.
The answer from @dasunse is almost get it work.
1) Add a proxy.cong.json with following configuration

"/api": {
  "target": "https://www.google.com",
  "secure": false,
  "pathRewrite": {
      "^/api": ""
  },
  "logLevel": "debug",
  "changeOrigin": true //This is a must if origin from localhost to other domain
}

2) Modify the package.json to create proxy

"scripts": {
    "ng": "ng",
    "start": "ng serve --proxy-config proxy.conf.json"
  },

3) Make request to the url

var x = this.http.post<RecaptchaResponse>(`/api/recaptcha/api/siteverify?secret=${this.secret}&response=${this.token}`, null)
  .pipe(
    map(data => new RecaptchaResponse().deserialize(data)),
        catchError(() => throwError('No Score')),
);

dasunse · Answer 1 · 2019-11-18T09:22:09.420

0

Use an proxy configuration

Add Headers

let headers: HttpHeaders = new HttpHeaders();
headers = headers.append('Access-Control-Allow-Origin', '*');

proxy.conf.json

{
  "/recaptcha": {
    "target": "https://www.google.com/",
    "secure": false
  }
}

in package.json

 "scripts": {
    "ng": "ng",
    "start": "ng serve --proxy-config proxy.conf.json"
  },

In your code

LET x = this.http.post<RecaptchaResponse>( `/recaptcha/api/siteverify?secret=${this.secret}&response=${this.token}`, {}, { headers: headers})
  .pipe(
    map(data => new RecaptchaResponse().deserialize(data)),
        catchError(() => throwError('No Score')),
);

edited Nov 18 '19 at 09:22

answered Nov 18 '19 at 03:39

dasunse

2,839
1
14
32

Is that means I need to 1) add a json file 'proxy.conf.json' at the root path? 2) modify my package.json to "npm install & ng serve --port 50000 --proxy-config proxy.conf.json" – Jay Chuah Nov 18 '19 at 03:45
@JayChuah yes you have to. Read https://medium.com/better-programming/setup-a-proxy-for-api-calls-for-your-angular-cli-app-6566c02a8c4d – dasunse Nov 18 '19 at 03:47
There is an error on build time `ERROR in src/app/modules/auth/login/login.component.ts(67,47): error TS2304: Cannot find name 'google'.` – Jay Chuah Nov 18 '19 at 03:52
use this way `'google'` – dasunse Nov 18 '19 at 03:57
It hit `POST http://localhost:50000/googlerecaptcha/api/siteverify?secret=SECRET&response=TOKEN 404 (Not Found)`. It should sent request to google.com not localhost – Jay Chuah Nov 18 '19 at 05:13
@JayChuah see the updated answer which was edited by chathuran – dasunse Nov 18 '19 at 05:23
Still getting the error `POST http://localhost:50000/recaptcha/api/siteverify?secret=SECRET&response=TOKEN 404 (Not Found)` – Jay Chuah Nov 18 '19 at 07:03
try with stop the app and start again – dasunse Nov 18 '19 at 07:52
Same. It still not working and POST to my localhost – Jay Chuah Nov 18 '19 at 09:08
@JayChuah add `Access-Control-Allow-Origin` header calue in your request. See the updated answer (Header and How to send request) – dasunse Nov 18 '19 at 09:23
Added Headers and it still hit 404 (Not Found) error – Jay Chuah Nov 18 '19 at 09:48

Google reCaptcha responds with 405 error and CORS message

1 Answers1

Linked