Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Add Access-Control-Allow-Origin: * easily to JSON

On my web server I have a folder (say the link is: www.foo.com/json/).

Inside this link, I have a json file, like foo.json. I want to access this file from another website. I've tried to research "CORS" but it seems pretty complicated, and I don't use any backend in on my website foo.com. I've heard you can simply use php and put this in:

<?php
header("Access-Control-Allow-Origin: *");

How do I add this to that folder that has the .json so that when I do:

$.getJSON("http://foo.com/json/foo.json", function(json) {
    console.log(json
)});

It won't throw the error. I want this to be simple to let any website do it, I just don't know how to connect it all.

like image 888
johnpyp Avatar asked Jul 07 '17 20:07

johnpyp


People also ask

How do I fix Access-Control allow origin?

Since the header is currently set to allow access only from https://yoursite.com , the browser will block access to the resource and you will see an error in your console. Now, to fix this, change the headers to this: res. setHeader("Access-Control-Allow-Origin", "*");

Is Access-Control allow Origin * Safe?

Access-Control-Allow-Origin: * is totally safe to add to any resource, unless that resource contains private data protected by something other than standard credentials. Standard credentials are cookies, HTTP basic auth, and TLS client certificates.

What is Access-Control-Allow-Origin add-on?

Allow CORS: Access-Control-Allow-Origin lets you easily perform cross-domain Ajax requests in web applications. Simply activate the add-on and perform the request. CORS or Cross Origin Resource Sharing is blocked in modern browsers by default (in JavaScript APIs). Installing this add-on will allow you to unblock this feature.

How to access JSON files using access-control?

Accessing JSON using below JavaScript code : Show activity on this post. Your Access-Control policy needs to be set on the same URL than the requested ressource. What I mean is that if you're going to request access to /folder1/a.json, then the Access-Control headers needs to be set on the requests for this specific URL.

What is access control allows origin in angular?

It is a structural framework used to create the application’s front end. The Access Control Allows Origin header specifies what domains can access the content. By default, AngularJS uses an empty string as the value, which means any domain can access it.

What is the Access-Control-Allow-Origin header?

What is the Access-Control-Allow-Origin header? Access-Control-Allow-Origin is a CORS header. CORS, or Cross Origin Resource Sharing, is a mechanism for browsers to let a site running at origin A to request resources from origin B.


Video Answer


2 Answers

Option 1: Use PHP

You can't add it to the .json file. You would need to create a php file which returns the JSON data. A crude example might be:

/json/index.php?f=foo

header("Access-Control-Allow-Origin: *");
header("content-type: application/json");
echo file_get_contents($_REQUEST['f'].".json");

This will allow you to set the Access-Control-Allow-Origin header and return the desired json file content to your remote call:

$.getJSON("http://foo.com/json/index.php?f=foo", function(json) {
    console.log(json);
});

Option 2: Use Server Configuration

Another option would be to configure the header to apply to json files in your server config. Using Apache2 you could add the following to your server config or create a .htaccess file in the /json directory to include:

<Files "*.json">
  Header set Access-Control-Allow-Origin "*"
</Files>

This would include the header for all the json files automatically.

like image 124
M31 Avatar answered Oct 28 '22 19:10

M31


Don't access the JSON file directly, use a PHP page in the middle. So you call www.foo.com/json/, which will run the default PHP file in that folder (say index.php). Now this PHP page will set the CORS header like you mentioned:

header("Access-Control-Allow-Origin: *");

and then read the JSON file and add it to the response along with the correct MIME type:

header("content-type: application/json");
like image 21
Racil Hilan Avatar answered Oct 28 '22 20:10

Racil Hilan