Google reCaptcha responds with 405 error and CORS message [duplicate]

问题

This question already has answers here:

405 error without Access-Control-Allow-Origin in response from Google reCAPTCHA (1 answer)

Google reCAPTCHA, 405 error and CORS issue (1 answer)

Closed 13 days ago.

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')),
);

回答1:

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')),
);

来源：https://stackoverflow.com/questions/58907648/google-recaptcha-responds-with-405-error-and-cors-message

标签

angular

cors

localhost

recaptcha