Failed to load map.php - CORS policy - php

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

Related

AWS web app CORS error

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

What is the secure method to enable cross-origin?

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.

Where should I create uploads folder and place upload.php while implementing ng2 file upload in localhost:4200

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)

Unable to consume this JSON records in angular

In the attached screenshot, I have configured the API in CORS ( drupal ), but still getting the error
10:41:21.021 Cross-Origin Request Blocked: The Same Origin Policy
disallows reading the remote resource at
http://happylife.in/techies/santaws_resources/santaws_resources.json.
(Reason: CORS header 'Access-Control-Allow-Origin' does not match
'http://happylife.in/techies').1
Honestly this is duplicate thread, but I just changed few stuff, here is the API service hosted in public domain, lets try in your code and let me know, you can able to consume this JSON records in your ANGULAR code OR NOT But I can able to read this JSON in PHP program.
http://happylife.in/techies/santaws_resources/santaws_resources.json
api
Due to https://en.wikipedia.org/wiki/Same-origin_policy, an application running in a browser by default cannot fetch (via XHR) a resource from another origin (domain, in your case). PHP doesn't have this limitation. To fetch a resource from another origin, there are various browser-side techniques as well as the option to proxy the fetch through your backend.
This is a CORS issue.
You need to send Access-Control-Allow-Origin header with your response for it to work.
Update for edit1
The error
Access-Control-Allow-Origin' does not match
means that this header doesn't contain the name of your site. Please check if you receive this header in the following format.
Access-Control-Allow-Origin: 'http://www.yoursite.com'
In drupal
step 1 and 2 solved the issue.
step 1
step 2

Cordova AngularJS $http.post Browser CORS Issue - "No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin"

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!

Categories