javascript - No 'Access-Control-Allow-Origin' header is present. Origin is therefore not allowed access - Stack

admin管理员组

文章数量:1025290

EDIT: No JSONP! Yes i know CORS is handled by the server and Yes the server does support it. The issue is on my side.

I am trying to use MediaWiki API from the browser. I am sending a GET request through XMLHttpRequest but due to CORS issues it's just not working. I am getting the following message from my browser after it receives the response:

XMLHttpRequest cannot load .php?format=json&action=query&list=search&srsearch=Oculus&utf8. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:8000' is therefore not allowed access.

I understand why i am getting this issue but i do not know how can i solve it from the browser/JavaScript side.

Code:

xmlhttp.open("GET",".php?format=json&action=query&list=search&srsearch=" + subreddit + "&utf8",true);
xmlhttp.setRequestHeader("Content-Type", "application/json; charset=UTF-8");
xmlhttp.send();

Some of the things i've tried:

xmlhttp.setRequestHeader('Access-Control-Allow-Origin', 'http://localhost');
xmlhttp.setRequestHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
xmlhttp.setRequestHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
xmlhttp.setRequestHeader('Access-Control-Allow-Credentials', true)
xmlhttp.setRequestHeader("Content-Type", "application/json; charset=UTF-8");

and setting the parameter origin in the url or as setRequestHeader which returned a invalid/bad Origin, denied.

EDIT: No JSONP! Yes i know CORS is handled by the server and Yes the server does support it. The issue is on my side.

I am trying to use MediaWiki API from the browser. I am sending a GET request through XMLHttpRequest but due to CORS issues it's just not working. I am getting the following message from my browser after it receives the response:

XMLHttpRequest cannot load https://en.wikipedia/w/api.php?format=json&action=query&list=search&srsearch=Oculus&utf8. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:8000' is therefore not allowed access.

I understand why i am getting this issue but i do not know how can i solve it from the browser/JavaScript side.

Code:

xmlhttp.open("GET","https://en.wikipedia/w/api.php?format=json&action=query&list=search&srsearch=" + subreddit + "&utf8",true);
xmlhttp.setRequestHeader("Content-Type", "application/json; charset=UTF-8");
xmlhttp.send();

Some of the things i've tried:

xmlhttp.setRequestHeader('Access-Control-Allow-Origin', 'http://localhost');
xmlhttp.setRequestHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
xmlhttp.setRequestHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
xmlhttp.setRequestHeader('Access-Control-Allow-Credentials', true)
xmlhttp.setRequestHeader("Content-Type", "application/json; charset=UTF-8");

and setting the parameter origin in the url or as setRequestHeader which returned a invalid/bad Origin, denied.

• javascript
• http
• cors
• mediawiki
• mediawiki-api

Share Improve this question Follow edited Sep 30, 2015 at 7:22 Sneb asked Sep 30, 2015 at 6:50 SnebSneb 15133 silver badges88 bronze badges 15

• possible duplicate of "No 'Access-Control-Allow-Origin' header is present on the requested resource" – kasper chexonz Commented Sep 30, 2015 at 6:53
• 1 So i get downvoted for asking a question that's valid? The "duplicate" question gives solutions such as using JSONP which is not what i want. Other answers say to set headers or are plainly wrong. To re-iterate i don't want to use JSONP. The best answer links to a blog that makes use of XDomainRequest() instead of XMLHttpRequest(). Upon parison it seems that XDomainRequest() is needed instead for CORS patibility. – Sneb Commented Sep 30, 2015 at 7:07
• 1 Then none of the answers in that "duplicate" question are valid. – Sneb Commented Sep 30, 2015 at 7:11
• 1 JSONP doesn't fix the issue, it just bypasses the CORS issue. MediaWiki supports CORS so i dont know why i'm getting this browser issue. – Sneb Commented Sep 30, 2015 at 7:15
• 1 127.0.0.1:8000 – Sneb Commented Sep 30, 2015 at 7:45

 |  Show 10 more ments

3 Answers 3

Sorted by: Reset to default 2

You can use JSONP.

<script src='https://en.wikipedia/w/api.php?format=json&action=query&list=search&srsearch=Oculus&utf8&callback=callbackname'></script>
<script>
    function callbackname(data){
       //you can get response data here
    }
</script>

If you use jquery.

$.getJSON('https://en.wikipedia/w/api.php?format=json&action=query&list=search&srsearch=Oculus&utf8&callback=?', function(data){
    //you can get response data here
})

As mentioned here, the origin parameter that you're passing in the request, and Origin header that is sent by your browser in the AJAX call should match and also it must match one of the values in $wgCrossSiteAJAXdomains on the foreign wiki. As your Origin (http://127.0.0.1:8000 or localhost:8000 in your case) won't be available in $wgCrossSiteAJAXdomains, MediaWiki API will never send Access-Control-Allow-Origin header in the response and any CORS request will fail with the error that you're seeing in your browser's console.

Another important fact to consider is that

MediaWiki API is used on Wikimedia sites to do things like allow image uploads directly to Commons from Wikipedia sites on the mobile interface.

This API is not for public consumption from any host, it's just for a set of validated hosts.

If you want to try some CORS requests, you can use GitHub API from here. Here's a sample pen making a CORS request to GitHub API and the JSON response is logged to DevTools Console.

It is not currently possible to do what you want because there is a server-side whitelist of origins for which CORS is allowed, and your server is not on the whitelist.

Currently there is no option in MediaWiki for auth-less CORS, so the whitelist is applied to all CORS requests, whether they include auth or not.

See https://phabricator.wikimedia/T62835 and https://www.mediawiki/wiki/Manual:CORS

EDIT: No JSONP! Yes i know CORS is handled by the server and Yes the server does support it. The issue is on my side.

I am trying to use MediaWiki API from the browser. I am sending a GET request through XMLHttpRequest but due to CORS issues it's just not working. I am getting the following message from my browser after it receives the response:

XMLHttpRequest cannot load .php?format=json&action=query&list=search&srsearch=Oculus&utf8. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:8000' is therefore not allowed access.

I understand why i am getting this issue but i do not know how can i solve it from the browser/JavaScript side.

Code:

xmlhttp.open("GET",".php?format=json&action=query&list=search&srsearch=" + subreddit + "&utf8",true);
xmlhttp.setRequestHeader("Content-Type", "application/json; charset=UTF-8");
xmlhttp.send();

Some of the things i've tried:

xmlhttp.setRequestHeader('Access-Control-Allow-Origin', 'http://localhost');
xmlhttp.setRequestHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
xmlhttp.setRequestHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
xmlhttp.setRequestHeader('Access-Control-Allow-Credentials', true)
xmlhttp.setRequestHeader("Content-Type", "application/json; charset=UTF-8");

and setting the parameter origin in the url or as setRequestHeader which returned a invalid/bad Origin, denied.

EDIT: No JSONP! Yes i know CORS is handled by the server and Yes the server does support it. The issue is on my side.

I am trying to use MediaWiki API from the browser. I am sending a GET request through XMLHttpRequest but due to CORS issues it's just not working. I am getting the following message from my browser after it receives the response:

XMLHttpRequest cannot load https://en.wikipedia/w/api.php?format=json&action=query&list=search&srsearch=Oculus&utf8. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:8000' is therefore not allowed access.

I understand why i am getting this issue but i do not know how can i solve it from the browser/JavaScript side.

Code:

xmlhttp.open("GET","https://en.wikipedia/w/api.php?format=json&action=query&list=search&srsearch=" + subreddit + "&utf8",true);
xmlhttp.setRequestHeader("Content-Type", "application/json; charset=UTF-8");
xmlhttp.send();

Some of the things i've tried:

xmlhttp.setRequestHeader('Access-Control-Allow-Origin', 'http://localhost');
xmlhttp.setRequestHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
xmlhttp.setRequestHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
xmlhttp.setRequestHeader('Access-Control-Allow-Credentials', true)
xmlhttp.setRequestHeader("Content-Type", "application/json; charset=UTF-8");

and setting the parameter origin in the url or as setRequestHeader which returned a invalid/bad Origin, denied.

• javascript
• http
• cors
• mediawiki
• mediawiki-api

Share Improve this question Follow edited Sep 30, 2015 at 7:22 Sneb asked Sep 30, 2015 at 6:50 SnebSneb 15133 silver badges88 bronze badges 15

• possible duplicate of "No 'Access-Control-Allow-Origin' header is present on the requested resource" – kasper chexonz Commented Sep 30, 2015 at 6:53
• 1 So i get downvoted for asking a question that's valid? The "duplicate" question gives solutions such as using JSONP which is not what i want. Other answers say to set headers or are plainly wrong. To re-iterate i don't want to use JSONP. The best answer links to a blog that makes use of XDomainRequest() instead of XMLHttpRequest(). Upon parison it seems that XDomainRequest() is needed instead for CORS patibility. – Sneb Commented Sep 30, 2015 at 7:07
• 1 Then none of the answers in that "duplicate" question are valid. – Sneb Commented Sep 30, 2015 at 7:11
• 1 JSONP doesn't fix the issue, it just bypasses the CORS issue. MediaWiki supports CORS so i dont know why i'm getting this browser issue. – Sneb Commented Sep 30, 2015 at 7:15
• 1 127.0.0.1:8000 – Sneb Commented Sep 30, 2015 at 7:45

 |  Show 10 more ments

3 Answers 3

Sorted by: Reset to default 2

You can use JSONP.

<script src='https://en.wikipedia/w/api.php?format=json&action=query&list=search&srsearch=Oculus&utf8&callback=callbackname'></script>
<script>
    function callbackname(data){
       //you can get response data here
    }
</script>

If you use jquery.

$.getJSON('https://en.wikipedia/w/api.php?format=json&action=query&list=search&srsearch=Oculus&utf8&callback=?', function(data){
    //you can get response data here
})

As mentioned here, the origin parameter that you're passing in the request, and Origin header that is sent by your browser in the AJAX call should match and also it must match one of the values in $wgCrossSiteAJAXdomains on the foreign wiki. As your Origin (http://127.0.0.1:8000 or localhost:8000 in your case) won't be available in $wgCrossSiteAJAXdomains, MediaWiki API will never send Access-Control-Allow-Origin header in the response and any CORS request will fail with the error that you're seeing in your browser's console.

Another important fact to consider is that

MediaWiki API is used on Wikimedia sites to do things like allow image uploads directly to Commons from Wikipedia sites on the mobile interface.

This API is not for public consumption from any host, it's just for a set of validated hosts.

If you want to try some CORS requests, you can use GitHub API from here. Here's a sample pen making a CORS request to GitHub API and the JSON response is logged to DevTools Console.

It is not currently possible to do what you want because there is a server-side whitelist of origins for which CORS is allowed, and your server is not on the whitelist.

Currently there is no option in MediaWiki for auth-less CORS, so the whitelist is applied to all CORS requests, whether they include auth or not.

See https://phabricator.wikimedia/T62835 and https://www.mediawiki/wiki/Manual:CORS

本文标签：