jQuery ajax request being block because Cross-Origin

Question

How to get content from remote url via ajax?

Console Log

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://www.dailymotion.com/embed/video/x28j5hv. (Reason: CORS header 'Access-Control-Allow-Origin' missing).

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://www.dailymotion.com/embed/video/x28j5hv. (Reason: CORS request failed).

Code

$.ajax({
url: "http://www.dailymotion.com/embed/video/x28j5hv",
type:'GET',
contentType: "html",
crossDomain:true,
success: function(data){
   //$('#content').html($(data).html());
   var src = $(data).html();
    alert(src);
    return false;
}

@D4V1D Sorry, I forget to add it into my question. How to get content from remote url via Ajax? — Arbab Rasheed, Jul 20 '15 at 10:27
Setting `crossDomain:true` doesnt set the cross domain request. the site must enable CORS in order for this to work. — Royi Namir, Jul 20 '15 at 10:29

score 50 · Accepted Answer · answered Aug 11 '15 at 05:53

50

Try to use JSONP in your Ajax call. It will bypass the Same Origin Policy.

http://learn.jquery.com/ajax/working-with-jsonp/

Try example

$.ajax({
    url: "https://api.dailymotion.com/video/x28j5hv?fields=title",

    dataType: "jsonp",
    success: function( response ) {
        console.log( response ); // server response
    }

});

answered Aug 11 '15 at 05:53

Muhammad Hassaan

7,296
6
30
50

7

jsonp actually worked but the response data shows me an error. `SyntaxError: missing ; before statement {"result":[{"id":1,"cat_name":"travel","imgpath":"http:\/adas\/asd","` and points to the colon after "result" , what does this mean ? – Abilash Arjunan Oct 08 '16 at 10:51
2

That means that it failed to parse the response. When you use a jsonp the response should be something like CALLBACK({...JSON...}). you can define CALLBACK specifying "jsonpCallback" in your ajax parameters or it will be random generated and sent to the request as a field named "callback" – chrmcpn Jan 23 '18 at 18:37
Same error as Abilash. But my API doesn't support `jsonp` and neither can I add or enable it. How can you fix cross origin with plain `json`? – nclsvh Jun 28 '18 at 07:27
@MrFaisal have you tried with an other video id? The video mentioned in answer is deleted – Muhammad Hassaan Sep 14 '18 at 07:21
GET from jquery net::ERR_ABORTED 405 – phuocding Jan 22 '19 at 10:24
This is `Method Not Allowed` error. Make aure GET is allowed – Muhammad Hassaan Jan 22 '19 at 10:58

score 18 · Answer 2 · edited Dec 01 '20 at 18:16

18

There is nothing you can do on your end (client side). You can not enable crossDomain calls yourself, the source (dailymotion.com) needs to have CORS enabled for this to work.

The only thing you can really do is to create a server side proxy script which does this for you. Are you using any server side scripts in your project? PHP, Python, ASP.NET etc? If so, you could create a server side "proxy" script which makes the HTTP call to dailymotion and returns the response. Then you call that script from your Javascript code, since that server side script is on the same domain as your script code, CORS will not be a problem.

edited Dec 01 '20 at 18:16

slolife

19,520
20
78
121

answered Jul 20 '15 at 10:35

HaukurHaf

13,522
5
44
59

Sorry, but yes, you can do !!!! try use HttpClient, then you can get a string html. It's works for me. click in this link to confirm https://stackoverflow.com/questions/26597665/how-to-get-content-body-from-a-httpclient-call – Marinpietri Jun 15 '20 at 23:49
@Marinpietri The HttpClient runs on the server. We are talking about client side limitations here. CORS is not an issue in server-to-server communication. – HaukurHaf Jun 16 '20 at 13:08
1

Ok! I just would like help him to solve the problem using an workaround. Thks! – Marinpietri Jun 16 '20 at 14:26

Ram Chander · Answer 3 · 2019-02-05T06:58:25.327

2

Try with cURL request for cross-domain.

If you are working through third party APIs or getting data through CROSS-DOMAIN, it is always recommended to use cURL script (server side) which is more secure.

I always prefer cURL script.

edited Feb 05 '19 at 06:58

answered Jan 12 '19 at 12:07

Ram Chander

1,088
2
18
36

score 0 · Answer 4 · edited Jul 16 '20 at 06:46

0

I solved this by changing the file path in the browser:

Instead of: c/XAMPP/htdocs/myfile.html
I wrote: localhost/myfile.html

edited Jul 16 '20 at 06:46

Victor

2,450
2
23
54

answered Jul 16 '20 at 06:12

Alexandru Popescu

67
1
5

score 0 · Answer 5 · answered Nov 13 '22 at 08:33

If the source is a server you have access to, then you can open up cross-domain access for a specific folder (and it's sub-folders) with an .htaccess file located in appropriate folder:

<IfModule mod_headers.c>
  Header set Access-Control-Allow-Origin "*"
</IfModule>

israfilgazi · Answer 6 · 2021-04-26T17:08:20.487

-1

$.ajax({
            url: "https://api.dailymotion.com/video/x28j5hv?fields=title",
            type: "POST",
            dataType: "json",
            crossDomain: true,
            format: "json",
            success:function(json){
                console.log('message: ' + "success"+ JSON.stringify(json));                     
            },
            error:function(error){
                console.log('message Error' + JSON.stringify(error));
            }  
        });    
/* <?php header('Access-Control-Allow-Origin: *'); ?> */

edited Apr 26 '21 at 17:08

answered Apr 26 '21 at 16:25

israfilgazi

1
2

1

While this code block may answer the question, it would be best if you could provide a little explanation for why it does so. – nik7 Apr 26 '21 at 22:27

jQuery ajax request being block because Cross-Origin

6 Answers6

Linked