No 'Access-Control-Allow-Origin' header is present on the requested resource. The response had HTTP status code 405

Question

im using google recaptcha to the default built in login of laravel 5 and im in the process of catching the captcha's validation response from the API (eg success: true|false). Below is the script i used to communicate with the googles recaptcha API.

//trigger the login button
$("#loginbutton").click(function (e) {
                    /* Check if the captcha is complete */
                    var captchaResponse = $("#g-recaptcha-response").val();
                    if ($("#g-recaptcha-response").val()) {
                        $.post("https://www.google.com/recaptcha/api/siteverify?secret=MySecretKeyHere&response=" + captchaResponse, {/* no data */}, function(response){
                            if(response.success)
                            {
                                alert("asdasd");
                            }
                        }, 'json');

                    } else {
                        alert("Please fill the captcha!");
                    }


                    e.preventDefault();
                });

but sadly not working, instead I got this error (refer below)

recaptcha__fil.js:163 XHR finished loading: POST " https://www.google.com/recaptcha/api2/reload?k=mySiteKey ".xj.send @ recaptcha__fil.js:163Uk @ recaptcha__fil.js:211f.wj @ recaptcha__fil.js:209f.ye @ recaptcha__fil.js:207f.kb @ recaptcha__fil.js:207f.send @ recaptcha__fil.js:208Wk.send @ recaptcha__fil.js:212L @ recaptcha__fil.js:33Wk.send @ recaptcha__fil.js:212(anonymous function) @ recaptcha__fil.js:284(anonymous function) @ recaptcha__fil.js:193z.la @ VM12395:1(anonymous function) @ recaptcha__fil.js:193e.Ob.e.wd @ recaptcha__fil.js:36fd @ recaptcha__fil.js:40bd @ recaptcha__fil.js:40L.kj @ recaptcha__fil.js:39Ic @ recaptcha__fil.js:33 recaptcha__fil.js:163 XHR finished loading: POST " https://www.google.com/recaptcha/api2/userverify?k=mySiteKey ".xj.send @ recaptcha__fil.js:163Uk @ recaptcha__fil.js:211f.wj @ recaptcha__fil.js:209f.ye @ recaptcha__fil.js:207f.kb @ recaptcha__fil.js:207f.send @ recaptcha__fil.js:208Wk.send @ recaptcha__fil.js:212L @ recaptcha__fil.js:33Wk.send @ recaptcha__fil.js:212(anonymous function) @ recaptcha__fil.js:286(anonymous function) @ recaptcha__fil.js:193z.la @ VM12474:1(anonymous function) @ recaptcha__fil.js:193e.Ob.e.wd @ recaptcha__fil.js:36fd @ recaptcha__fil.js:40bd @ recaptcha__fil.js:40L.kj @ recaptcha__fil.js:39Ic @ recaptcha__fil.js:33 jQuery-2.1.3.min.js:4 OPTIONS https://www.google.com/recaptcha/api/siteverify?secret=MySecretKey n.ajaxTransport.k.cors.a.crossDomain.send @ jQuery-2.1.3.min.js:4n.extend.ajax @ jQuery-2.1.3.min.js:4n.each.n.(anonymous function) @ jQuery-2.1.3.min.js:4(anonymous function) @ login:53n.event.dispatch @ jQuery-2.1.3.min.js:3n.event.add.r.handle @ jQuery-2.1.3.min.js:3 login:1 XMLHttpRequest cannot load https://www.google.com/recaptcha/api/siteverify?secret=MySecretKey . No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin ' http://juliver.motgh.com ' is therefore not allowed access. The response had HTTP status code 405.

Any ideas? clues? help? suggestions? recommendations?

Answer 1

You CAN'T verify your client-side answer with your secret key FROM CLIENT. You must do it from SERVER side only. So, please change the code to go to your server (WebAPI etc.) and just do the POST to Google URI from there. It should work. Otherwise it has no sense to do this check - you are sharing your secret key...

Answer 2

No 'Access-Control-Allow-Origin' header is present on the requested resource.

It means the API you're attempting to use does not allow access from http://juliver.motgh.com .

To understand why the request fails in that manner learn about HTTP access control (CORS) .

Bhavin Solanki's answer may help you to actually solve the problem, you backend will not place an access control on your requests.