CORS-probleem in Google Chrome
Ik heb op mijn website een 'laad meer'-knop. Deze laadt doormiddel van jQuery html van een andere pagina in een div. Opzich redelijk simpel.
Echter werkt deze knop niet altijd. De knop staat op meerdere pagina's, maar niet op de homepage. Als er dus iets achter het domein staat( domein.xyz/abc) werkt 'ie, maar met alleen het domein (domein.xyz) werkt het niet. En dat dan alleen in Chrome, want in Firefox en Safari werkt het wel.
De console geeft het volgende aan.
Code (php)
1
XMLHttpRequest cannot load https://domein.nl/api/load_extra_articles.php?si=6&st=16. Redirect from 'https://domein.nl/api/load_extra_articles.php?si=6&st=16' to 'https://www.domein.nl/api/load_extra_articles.php?si=6&st=16' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://www.domein.nl' is therefore not allowed access.
De website werkt standaard met www. ervoor en heeft een SSL-certificaat. In het script werkt het als volgt.
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
var start = 16;
$(function() {
$("#loadmorearticles").click( function(){
var url = 'https://domein.nl/api/load_extra_articles.php?si=6&st=' + start;
$("#morearticles").load(url);
start = start + 6;
$("#morearticles").removeAttr('id');
});
});
$(function() {
$("#loadmorearticles").click( function(){
var url = 'https://domein.nl/api/load_extra_articles.php?si=6&st=' + start;
$("#morearticles").load(url);
start = start + 6;
$("#morearticles").removeAttr('id');
});
});
Echter vind ik het gekke dat de header er wel is, hij staat als volgt in de .htaccess:
Code (php)
1
Header add Access-Control-Allow-Origin "*"
en de header staat ook in Chrome aangegeven:
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
HTTP/1.1 200 OK
Date: Wed, 05 Apr 2017 12:12:21 GMT
Server: Apache/2
Vary: Accept-Encoding,User-Agent
Content-Encoding: gzip
Access-Control-Allow-Origin: *
Content-Length: 8737
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Content-Type: text/html
Date: Wed, 05 Apr 2017 12:12:21 GMT
Server: Apache/2
Vary: Accept-Encoding,User-Agent
Content-Encoding: gzip
Access-Control-Allow-Origin: *
Content-Length: 8737
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Content-Type: text/html
Kortom: ik snap er niets meer van. Op Google vindt ik alleen antwoorden met 'je moet het in de htaccess zetten' of 'via PHP meegeven'. Allemaal geprobeerd, maar nog geen oplossing :(.
Dank alvast voor jullie input!
Code (php)
1
Header set Access-Control-Allow-Origin: http://example.com