Angular 4 http post request to google captcha api fails

Question

I'm trying to verify my captcha response by using angular 4's http library and google's siteverify api. For some reason in the console it's printing:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://www.google.com/recaptcha/api/siteverify. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

And

ERROR Object { _body: error, status: 0, ok: false, statusText: "", headers: Object, type: 3, url: null }

When i check my network tab it seems successfull:

Here's my code:

import { Injectable } from '@angular/core';
import { Http, URLSearchParams, Headers } from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class CaptchaService {
  captchaUrl = 'https://www.google.com/recaptcha/api/siteverify';
  secretKey = 'SECRETKEY';

  constructor(private http: Http) { }

  verifyCaptcha = function(captchaResponse) {
    let headers = new Headers();
    headers.append('Content-Type', 'application/x-www-form-urlencoded');
    let body = new URLSearchParams;
    body.set('secret', this.secretKey);
    body.set('response', captchaResponse);
    return this.http.post(this.captchaUrl, body, { headers: headers })
    .map((response) => response.json())
    .subscribe((data) => console.log(data));
  }
}

I'm sorry if this is a nooby question, but i'm new to angular.

Thanks

Jojo595 Jojo595 · Accepted Answer · 2017-06-04T19:16:04

Ok turns out it was just google missing the cors headers.... I was able to fix this problem by having my own api send the request to google and then return it to me.

Angular 4 http post request to google captcha api fails

1 Answers