Get html file from a given url using javascript($ajax)

Question

var $ = require('jquery');

$.ajax({
  type:"GET",
  dataType: 'html',
  url: 'http://www.google.com/',
  success: function(res){
    console.log(res);
  }
});

I am getting this error in the console:

XMLHttpRequest cannot load http://www.google.com/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

What can I do to avoid this error? Please help.

@ArunpandianM that is not what `crossDomain:true` is even for. Read the `$.ajax` docs — charlietfl, Jul 29 '17 at 17:28

score 1 · Answer 1 · answered Jul 29 '17 at 16:58

1

You cannot send cross origin requests because it is a security vulnerability.

answered Jul 29 '17 at 16:58

JakeBoggs

274
4
17

score 1 · Accepted Answer · answered Jul 29 '17 at 17:04

If you control the backend, you can proxy this request to the backend, i.e. using PHP:

// get.php
echo file_get_contents($_GET['url']);

// frontend JS
$.ajax({
  type:"GET",
  dataType: 'html',
  url: '/get.php?url=http://www.google.com/',
  success: function(res){
    console.log(res);
  }
});

PHP will be able to fetch the data, as it's not checking CORS.

score 0 · Answer 3 · answered Jul 29 '17 at 16:59

Its because google.com goes not have cross origin requests enabled. If you try a site that does like for example:

$.ajax({
  type:"GET",
  dataType: 'html',
  url: 'https://cors-test.appspot.com/test',
  success: function(res){
    console.log(res);
  }
});

Then you will get the desired result

score 0 · Answer 4 · answered Jul 29 '17 at 17:01

0

I think this is because of security problem while fetching another domain. Please check this
"No 'Access-Control-Allow-Origin' header is present on the requested resource"

answered Jul 29 '17 at 17:01

saifudeen ni

145
9

Get html file from a given url using javascript($ajax)

4 Answers4