Failing ajax requests, probably due to something called CORS?

Question

I have a basic ajax request that retrieves a menu and puts it on a web page.

Here is the code

//display the menu
$.post(server+"quizz/phpScripts/retrieveMenu.php", {}, function(data){
    $("nav, #lowerMenu").html(data);
});

In my original files, 'server' was 'localhost', but when I hosted the site and tried to open the page, I get this error in the console.

Using firefox

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://edwaze.com/quizz/phpScripts/retrieveMenu.php. (Reason: CORS header 'Access-Control-Allow-Origin' missing).

Using Safari

XMLHttpRequest cannot load https://edwaze.com/quizz/phpScripts/retrieveMenu.php. Origin http://www.edwaze.com is not allowed by Access-Control-Allow-Origin.

Using Chrome

XMLHttpRequest cannot load https://edwaze.com/quizz/phpScripts/retrieveMenu.php. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://edwaze.com' is therefore not allowed access.

I've read quite a bit on this, but I haven't found a solution yet. Please help. And go easy with the terminologies please, i'm a bit new to ajax :)

Thanks.

Please, read more about CORS here: https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS — Ivan Sivak, Jan 08 '16 at 12:16
Have you made any cross domain request? You have hosted to `https` secured server. — Parth Trivedi, Jan 08 '16 at 12:18
@ParthTrivedi ! Yes its a https secured server, does this make this simpler or harder for me? — Vincent Hokie, Jan 08 '16 at 12:22
@VincentHokie Is the resource you are trying to download using AJAX hosted on the same server as the page that makes the request? — spender, Jan 08 '16 at 12:24
Do you have control over that remote domain? The headers to allow your site script access must be set there – you can not set them on your end. — CBroe, Jan 08 '16 at 12:24
If you are accessing your website without HTTPS then do your AJAX call without HTTPS. — Harsh Sanghani, Jan 08 '16 at 12:24
@CBroe yes, I do, please provide the headers and where to place them please. — Vincent Hokie, Jan 08 '16 at 12:28
@VincentHokie Then CORS is not relevant to your problem and you'd be best to follow the advice of of [Jai's answer](http://stackoverflow.com/a/34677044/14357) by using root relative URLs — spender, Jan 08 '16 at 12:30

Jai · Accepted Answer · 2016-01-08T12:55:08.907

2

As you are not making any cross domain requests it would be better to use root relative urls:

$.post("/quizz/phpScripts/retrieveMenu.php"

the leading / represents the root of the application.

That issue arises when you have http/https protocols added in the url and urls are hosted on webserver not on localhost.

edited Jan 08 '16 at 12:55

answered Jan 08 '16 at 12:21

Jai

74,255
12
74
103

unfortunately, this didn't work guys..the errors are gone, but i still don't get the menu displaying – Vincent Hokie Jan 08 '16 at 14:21
@VincentHokie could you plz tell us what do you see in the network tab of your browser inspector tool? Do you see any request logged? – Jai Jan 08 '16 at 14:39
Sorry @Jai is appears your solution did work, my queries are being executed on the server end, my problem appears to now be the php version. So thank you. Do you happen to know where php version 5.4 native supports mysqli functions? – Vincent Hokie Jan 08 '16 at 14:56

score 0 · Answer 2 · edited May 23 '17 at 11:59

0

Please go through this URL. It will help you to resolve your query.

CORS header 'Access-Control-Allow-Origin' missing

As per the errors, it seems that you need to set Cross Origin so that you can access data from another domain.

edited May 23 '17 at 11:59

Community

1
1

answered Jan 08 '16 at 12:23

Hemant Kabra

870
9
29

That's fantastic. HOW, do i do this? – Vincent Hokie Jan 08 '16 at 12:30
This answer is not relevant because OP is not actually trying to make a cross-origin request. – spender Jan 08 '16 at 12:31

Failing ajax requests, probably due to something called CORS?

2 Answers2