1

I know this question has been asked a lot before, but I literally tried out everything but I'm still getting this error.

I'm trying to fetch json data through ajax in my index.php file. I'm running my website through apache2 on an ubuntu server. I have no idea where to go from here.

Exact error: 

Failed to load http://localhost:32348/getinfo: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access.

What I tried: - Adding this to /etc/apache2/apache2.conf File

 <ifModule mod_headers.c>
    Header set Access-Control-Allow-Origin: *
</ifModule>

- Adding this to in between every <Directory> tag to /etc/apache2/apache2.conf File:

Header set Access-Control-Allow-Origin "*"

- Adding this to my index.php file:

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

- Changing 'json' to 'jsonp', setting crossDomain to true and adding headers to allow origin

function fetchLiveStats() {
        $.ajax({
            url: api + '/getinfo',
            dataType: 'jsonp',
            type: 'GET',
        crossDomain: true,
        headers: {'Access-Control-Allow-Origin': '*'},
            success: function(response) {
                console.log(response);
            },
            cache: 'false'
        }).done(function(data){
            pulseLiveUpdate();
            lastStats = data;
            currentPage.update();
        }).always(function () {
            setTimeout(function() {
                fetchLiveStats();
            }, refreshDelay);
        });
    }
Vitalynx
  • 89
  • 5
  • Did you set what HTTP verbs your apache allows? – Mike Tung Jan 15 '18 at 16:24
  • @MikeTung Do you mean the ports? – Vitalynx Jan 15 '18 at 16:31
  • your ajax options are absurd, and very well could be contributing to your problem. CORS is relatively simple. If your request is simple (no additional headers being sent, no auth cookies, etc,) all your server needs to handle is the request itself. If you add more headers, such as the bogus Access-Control header you added to your options, then the browser is going to instead send a preflight, which is an additional request that your API will have to respond to correctly. – Kevin B Jan 15 '18 at 16:51
  • If you want to do this request using CORS, `dataType:'jsonp'` is wrong. you want `json`. additonally, access control headers need to be sent by the server, not the client. *"Tried all possible solutions"* is actually part of your problem. You should take a step back and understand what CORS is and how CORS works, then you'll be able to filter out the BS solutions for the ones that work. https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS is a great starting point. – Kevin B Jan 15 '18 at 16:52

2 Answers2

-1

You need to add the Access-Control-Allow-Origin header to the response from http://localhost:32348/getinfo.

What I tried: - Adding this to /etc/apache2/apache2.conf File

Everything else you've said about your question implies that Apache was hosting the website on port 80, not the one on port 32348. You're changing the wrong server.

A website can't give itself permission to access data that another website will give the owner of the browser.

Changing 'json' to 'jsonp'

Don't use JSONP. It is a dirty hack. (It also requires that http://localhost:32348/getinfo return JSONP, which is almost certainly doesn't).

setting crossDomain to true

That just tells jQuery to not add headers it adds to Same Origin requests in case there is an HTTP redirect to a different origin. This prevents it being a complex request that needs a preflight. Since you aren't requesting a same origin URL in the first place, this does nothing.

adding headers to allow origin

You can't put response headers on the request!

Trying to will turn it into a complex request that requires a preflight, and cause you event more problems.

You need to edit whatever code is responsible for serving http://localhost:32348/getinfo

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
-2

Don't forget to empty your cache (ipconfig/flushdns) and your browser cache when you try a new update, otherwise, the modifications may not be considered...

Christophe
  • 17
  • 3
  • You'll find more information about the cache effects on https://stackoverflow.com/questions/44800431/caching-effect-on-cors-no-access-control-allow-origin-header-is-present-on-th – Christophe Jan 15 '18 at 22:26