Orgchart js error : No 'Access-Control-Allow-Origin' header is present on the requested resource

Question

I am writing an organization chart creation program with orgchart.js and simple php. (Without using any framework). But it gives me the following error:

Access to XMLHttpRequest at 'https://uk-s-balkangraph.azurewebsites.net/api/OrgChartJS' from origin 'https://xxxxxx.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I also put the following code in the .htaccess file, but it did not work:

Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type"
Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"

I also put the following code in the index.php file, but it did not work:

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

I am an amateur programmer. please guide me

Answer 1

There is multiple ways to do it :

1. Set header instead of add

Instead of using header add you can use header set

Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Headers "origin, x-requested-with, content-type"
Header set Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"

And it's what I will do for next propositions.

2. Use apache/nginx virtual host configuration

In VirtualHost config (in apache), you can use :

<VirtualHost myhost:80>
   Header set Access-Control-Allow-Origin "*"
</VirtualHost>

3. More use PHP header :

header('Access-Control-Allow-Headers: Access-Control-Allow-Origin, Content-Type');
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS');