角度9：CORS策略阻止从源“http://localhost:4200”访问位于“xxx”的XMLHttpRequest

Question

在解析SiteKey后，我可以从re-captcha中获得响应。

我用我的响应和密钥向google recaptcha api做了一个手动post请求，它确实返回了我需要的结果，成功状态为true/false。

接下来，我尝试执行http，但它开始返回以下错误：

我尝试向我的angular添加一个代理conf，但是它不起作用。我在PHP上做了同样的应用程序，它工作了。我能知道有什么解决办法吗？

以下是我在angular中的代码

my-form.component.html

<div class="recaptcha">
    <re-captcha (resolved)="resolved($event)" siteKey="6LeD_K8ZAAAAAOAGZHqFwujgLXqLrTIoftoPzXWb"></re-captcha>
</div>

my-form.component.ts

import { Component, OnInit } from '@angular/core';

//My Imports
import { HttpClient, HttpParams } from '@angular/common/http';

@Component({
  selector: 'app-my-form',
  templateUrl: './my-form.component.html',
  styleUrls: ['./my-form.component.css']
})
export class MyFormComponent implements OnInit 
{
  constructor(private http: HttpClient) { }

  resolved(captchaResponse: string)
  {
    if(captchaResponse != null)
    {
      let params = new HttpParams()
      .set("secret", "i459wfj3n42rls939jfi3j9-")
      .set("response", captchaResponse);
      
      //THE ERROR OCCURS WHEN I POST.
      this.http.post("https://www.google.com/recaptcha/api/siteverify", { params })
      .subscribe((value:any)=> 
      {
        console.log(value);
      })
    }

  }

  ngOnInit(): void {
  }

}

src/proxy.conf.json

{
  "/api/*": {
      "target": "http://localhost:3000",
      "secure": false,
      "logLevel": "debug"
  }
}

Angular.json

    "serve": {
      "builder": "@angular-devkit/build-angular:dev-server",
      "options": {
        "browserTarget": "googlerecaptcha:build",
        "proxyConfig": "src/proxy.conf.json"

Answer 1

您可以使用第三部分依赖关系：https://github.com/jameshenry/angull-google-recaptcha

也可以在angular应用程序中添加js脚本:https://w3path.com/how-to-integrate-recaptcha-in-Angular-8/

你不能使用代理。