Google reCaptcha响应405错误和CORS消息

问题描述

我在登录页面上实现了Google reCaptchaV3
我想通过将请求发送到 https://www.google.com/recaptcha来获得分数/api/siteverify
我的代码发送了发帖请求，如下所示

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

但是我得到了错误

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.

我确实尝试了以下方法:
1)在管理控制台上添加"localhost"
2)在管理控制台上添加127.0.0.1
3)禁用验证reCAPTCHA解决方案的来源"选项

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

但是上述方法均无效.
关于如何在localhost中测试reCaptcha的任何想法吗?
因为它在Postman上工作，但在localhost上却没有.

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.

更新的V2 =>解决方案
该问题由于重复的问题而被关闭.
但是帖子中的答案并不能解决我的问题.

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

我终于发现使用代理可以解决此问题.
@dasunse的答案几乎可以解决问题.
1)添加具有以下配置的proxy.cong.json

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)修改package.json以创建代理

2) Modify the package.json to create proxy

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

3)向网址提出请求

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

推荐答案

使用代理配置

添加标题

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

proxy.conf.json

proxy.conf.json

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

在package.json中

in package.json

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

在您的代码中

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

这篇关于Google reCaptcha响应405错误和CORS消息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！