I'm trying to use the Google Classroom API through my AWS EC2 web app (PHP-based), but I keep running into a CORS error.
I'm following this tutorial to try and request a new scope: https://developers.google.com/api-client-library/php/auth/web-app
When a user clicks a button, I make an AJAX request to my server to gather the required details and then call
$auth_url = $client->createAuthUrl();
header('Access-Control-Allow-Origin: *');
header('Location: ' . filter_var($auth_url, FILTER_SANITIZE_URL),false);
But I get the following error in my browser console
Failed to load https://accounts.google.com/o/oauth2/auth?response_type=code&access_type=online&client_id=xxxx.apps.googleusercontent.com&redirect_uri=https%3A%2F%2Fexample.com%2Fsubdir%2Fpage%2Fajax%2Fconfirm_classroom_auth.php&state&scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fclassroom.rosters.readonly&approval_prompt=auto&include_granted_scopes=true: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://example.com' is therefore not allowed access. The response had HTTP status code 405.
I'm not really familiar with CORS beyond knowing what it is, so I would appreciate any suggestions on what I need to do to fix this.
I'm not quite sure why using header() was causing an error, but I found a way around it.
Simply returning the authURL to my AJAX success function and then calling window.open(authURL) worked fine without a CORS error
Related
Use case: VueJS/Laravel app has inventory. Calling Magento2 using SOAP API to update Qty from VueJS/Laravel.
Error as shared below:
Access to XMLHttpRequest at
'http://xx.yyy.abc.123/rest/V1/integration/admin/token?username=admin&password=xxxxx'
from origin 'http://192.168.0.x' 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.
Note: I am a beginner in this domain. I might be asking stupid questions. Please bear with me and requesting help here.
Tools/Apps used:
Laravel Framework 7.9.2 /Running on http://192.168.0.x
VueJS /Running on http://192.168.0.x
Magento2 /Running on http://xx.yyy.abc.123
Postman (Tool used to test SOAP API)
Debugging efforts:
URL http://xx.yyy.abc.123/rest/V1/integration/admin/token?username=admin&password=xxxxx
Tried from postman: It works, Apended token into postmane and got the response.
Making AXIOS call from VueJS/Laravel application to Magento2:(Failed)
Origin: http://192.168.0.x
Magento2: http://xx.yyy.abc.123
axios.post("http://xx.yyy.abc.123/rest/V1/integration/admin/token?username=admin&password=xxxxx",
{
})
.then((response) =>
{
console.log("response.data",response.data);
this.apiResponse = response.data;
//this.getproduct();
})
.catch(error =>
{
alert('ERROR GETCATEGORY!!!! No Data found');
console.log(error.response);
});
Checked for 2 days now about CORS error and found that this is enabled by default in Laravel 7. Not sure why I am seeing this error even after using Laravel 7. There are very few answers or solutions specific to VueJS with Laravel 7.
Question:
What does this error means. I thought it is just calling from webpage1 to webpage2, it does not seem to work.
Do I need to make any changes on my VueJS/Laravel application. Am I missing anything further.
Please do let me know if you need any more information to help me in this regards.
Thanks for your help.
Regards,
I had got the same CORS error while working on a Vue.js project. I finally solved this issue just today in the morning. You can resolve this either by building a proxy server or another way would be to disable the security settings of your browser (eg, CHROME) for accessing cross origin apis. Both these solutions had worked for me. The later solution is the easiest solutoion and does not require any mock server or a proxy server to be build. Both these solutions can be resolved at the front end.
You can disable your browser (CHROME) security settings for accessing apis out of the origin by typing the below command on the terminal:
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --user-data-dir="/tmp/chrome_dev_session" --disable-web-security
After running the above command on your terminal, a new chrome window with security settings disabled will open up. Now, run your program (npm run serve / npm run dev) again and this time you will not get any CORS error and would be able to GET request using axios.
Hope this helps!
i created book sharing php web application here i am using google maps api i was storing coordinates in database and after i fetching those information using xml.
Few hours ago some error is coming when i am trying to fetching the data from xml file.
searchbook.php:1 Failed to load http://localhost/libro/map.php?q=god%20delusion: Redirect from 'http://localhost/libro/map.php?q=god%20delusion' to 'http://localhost/libro/' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://libro-book-share.000webhostapp.com' is therefore not allowed access.
You need to enabled cross-origin ressource sharing in yur php file.
To do so, put this line at the beginning of your php file
<?php
header("Access-Control-Allow-Origin: *");
Here is an article explaining in detail cors
https://developer.mozilla.org/en-US/docs/Web/HTTP/Server-Side_Access_Control
hope it helps you
I have a hosted API website and when I try to make an Ajax call I'm getting errors on the Chrome Console like:
Failed to load https://website.tld/api/FHoie83hrAFh3: No
'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'null' is therefore not allowed access.
And
Failed to load https://website.tld/api/FHoie83hrAFh3: Redirect from
'https://website.tld/api/FHoie83hrAFh3' to
'https://website.tld/api/success' has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'null' is therefore not allowed access.
After googling I found that I need to add Access-Control-Allow-Origin: * after stating the <?php of the file api.php
I don't have any idea about this and I see there are some security issue if I use this.
What is the secure method to enable this for the API?
Best would be to create php files on your side, that your ajax will call, and they would serve as proxy to the real API making curl to the API and returning the API response to the ajax call.
I have implemented ng2 file upload on my server.
It asks for an API URL and I have provided it. Everything works online as expected. But I want to run it locally for further implementation.
This is my upload api URL:
const URL = 'http://example.com/v8/products-api/upload2.php';
In upload2.php the path is given as $path = 'uploads/';.
My question is, where shall I create this folder and where shall I place this php file ?
I am unable to upload a file to server from http:localhost:4200 as it gives the following error:
XMLHttpRequest cannot load http://funiks.com/adminv8/products-api/upload2.php. Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. Origin 'http://localhost:4200' is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.
My php includes header("Access-Control-Allow-Origin: *");
I'm no PHP expert, so I can't attest to the CORS configuration of your server. But reading the error you're getting it looks like you can't use a wildcard, so why not try setting your headers like so...
header('Access-Control-Allow-Origin: http://localhost:4200', false);
Also you could try using the Angular Jsonp library rather than the Http. The functions will stay exactly the same, however you do open up some security concerns by doing so...
(P.S. If you use the Jsonp library, just add &callback=JSONP_CALLBACK to the end of your API url)
Hope this helps someone else out there (as it took me hours to find a fix).
* Yes there are many duplicate similar questions out there, that are similar - But mine is specific to a Cordova platform Browser app. *
I am building an with AngularJS using Cordova/PhoneGap. I had a cross domain issue while making a AngularJS POST request ($http.post) to a PHP API. If was returning - "No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin"
Please see answer below.
I Had to add the following to the PHP API script:
header('Access-Control-Allow-Origin: *');
Now after doing an $http.post it will return status code 200!