XMLHttpRequest; Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource

Question

When I try to do a ajax call, I got the error on chrome below.

XMLHttpRequest cannot load javascript:;. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

Here is code:

$.ajax({
    type: "POST",
    data: {pvalue : pid},
    cache: false,
    url: "xxx.in/yy/ajax.php",
    success: function(data)
    {
      $modal.find('.edit-content').html(data);
    }

is your ajax.php inside your project or you are calling outside project page ? — Ameya Deshpande, Sep 15 '15 at 05:59
try without `http:` directly provide directory and page name — Ameya Deshpande, Sep 15 '15 at 06:02
share your path to the file you are accessing from that call — Ameya Deshpande, Sep 15 '15 at 06:03
There's something you're not showing us about your actual URL for the ajax request. The error msg makes it sound like the URL is not actually of the form `http://somedomain.com`, — jfriend00, Sep 15 '15 at 06:10
Here's a guess. Is the web page itself that the script is in running on a localhost: or file: URL? — jfriend00, Sep 15 '15 at 06:15
@jfriend00 it is in the same project , same domain , same folder and same server — Durgesh Pandey, Sep 15 '15 at 06:28
That's not what I'm asking. When you get this error, what is the EXACT URL in the URL bar of the browser. The error says that the URL is something unusual that does not permit cross-origin requests. You need to show us what both the full URL of the page is and the full URL of the ajax call. The browser is complaining about the match between these two so withholding that info from us will not help anyone give you an answer. — jfriend00, Sep 15 '15 at 06:34
Why are you not providing the info asked for in the above comment? The error implies that your situation has something to do with the two URLs (page URL and ajax URL). We can't do much more to help without seeing those actual URLs. — jfriend00, Sep 15 '15 at 20:56

score 5 · Answer 1 · edited May 23 '17 at 12:01

5

All research into that specific error message suggests that the host web page is not being loading via an http:// URL and is probably a file: URL. The browser will not, by default, permit cross origin requests from a file: URL.

You need to load the web page through your web server, not via the file system if you want to use ajax requests.

Here are some other questions and answers about that specific error that all point to the wrong type of URL being used to load the page.

"Cross origin requests are only supported for HTTP." error when loading a local file

React.js: Example in tutorial not working

Cross origin requests are only supported for HTTP but it's not cross-domain

http://answers.playcanvas.com/questions/833/cannot-load-model-due-to-cross-origin-request-being-blocked

https://groups.google.com/forum/#!topic/tincr-for-chrome-devtools/nA9k2qh7F-g

edited May 23 '17 at 12:01

Community

1
1

answered Sep 15 '15 at 06:41

jfriend00

683,504
96
985
979

I have already done all of them – Durgesh Pandey Sep 15 '15 at 07:40
1

@DurgeshPandey - done all of what? – jfriend00 Sep 15 '15 at 20:56
yes sir most of them i tried – Durgesh Pandey Sep 16 '15 at 12:19
2

Upvoted for demonstrating undeserved patience! – halfer Sep 28 '15 at 21:03
How do I load the web page through my web server? I don't understand the distinction. – nirvanaswap Aug 05 '16 at 21:26
2

@nirvanaswap - Please don't co-opt someone else's question into your situation. If you need help with your specific situation, then please write your own question and describe exactly what you're trying to do. – jfriend00 Aug 05 '16 at 21:28

score 1 · Answer 2 · answered Sep 15 '15 at 06:39

If you are accessing data from other domains, you have to override Chrome's Same-origin Policy. For that you have to specify dataType: 'jsonp'

$.ajax({
    type: "POST",
    dataType: 'jsonp',
    data: {pvalue : pid},
    cache: false,
    url: "xxx.in/yy/ajax.php",
    success: function(data)
    {
      $modal.find('.edit-content').html(data);
    }
});

If the file ajax.php in your server (the one which you are working now), you can simply specify the file name in url section (as below).

$.ajax({
    type: "POST",
    data: {pvalue : pid},
    cache: false,
    url: "ajax.php",
    success: function(data)
    {
      $modal.find('.edit-content').html(data);
    }
});

This issue does not align with the specific error message the OP is getting. This is not a generic cross origin issue, it's something different than generic. — jfriend00, Sep 15 '15 at 06:39

XMLHttpRequest; Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource

2 Answers2

Linked

Related