How to make Ajax requests, with Jquery, in different domains?

Question

How to make Ajax requests, with Jquery, in different domains?

Navigation

#1 by (13 votes)
#2 by (7 votes)
#3 by (0 votes)
#4 by (0 votes)

21

Is it possible to perform a POST-type request to a url that is not part of the domain of our application?

$.ajax({
    type: "POST",
    url: "http://www.dominioexterno.com.br/acao/",
    data: {
        var1: $('#input1').val(),
        var2: $('#input2').val(),
    }
})
.done(function() {
    console.log("OK");
});

I'm trying to do something like this, but what I get is a "No Access-Control-Allow-Origin 'header is present on the requested resource."

How to resolve this type of problem?

javascript jquery ajax cross-domain

asked by anonymous 09.04.2014 / 15:09

4 answers

Which encoding to choose for a database? How do Google understand my Links?

score 13 · Answer 1

You can enable CORS requests in the browser by using jQuery with the following code:

jQuery.support.cors = true;

These requests between different domains have long had some security holes, so browsers have disabled this functionality by default. Currently, modern browsers (Internet Explorer 8+, Firefox 3.5+, Safari 4+, and Chrome) allow this type of request, as long as Cross-Origin Resource Sharing (CORS) is also enabled on the server .

An excellent reference on the subject can be found at the following address:

link

Another excellent reference on how to enable CORS can be found in this question:

Ajax cross-domain request with pure Javascript ( no APIs)

score 7 · Answer 2

When it comes to CORS, "incompatibility" and restrictions are something we can not ignore.

An alternative way is to use a php file as an intermediary, playing a proxy role.

You can use CURL:

<?php
//Proxy.php

$curl = curl_init();

$url = 'http://www.dominioexterno.com.br/acao/';

$header[0] = "Accept: text/xml,application/xml,application/xhtml+xml,";
$header[0] .= "text/html;q=0.9,text/plain;q=0.8,image/png,image/jpeg,image/jpg,image/gif,*/*;q=0.5";
$header[] = "Cache-Control: max-age=0";
$header[] = "Connection: keep-alive";
$header[] = "Keep-Alive: 300";
$header[] = "Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7";
$header[] = "Accept-Language: pt-BR,en-US,en,pt;q=0.5";
$header[] = "Pragma: ";

curl_setopt($curl, CURLOPT_URL, $url );
curl_setopt($curl, CURLOPT_HEADER, 0);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($curl, CURLOPT_VERBOSE, 1);
curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, 0);
curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, 0); 
curl_setopt($curl, CURLOPT_FOLLOWLOCATION, TRUE);
curl_setopt($curl, CURLOPT_POST, TRUE);
curl_setopt($curl, CURLOPT_POSTFIELDS, array('param' => 'value'));

$reponse = curl_exec( $curl );

curl_close( $curl );

echo $reponse;

curl_setopt($curl, CURLOPT_POST, TRUE);
  Here the request was set to POST

curl_setopt($curl, CURLOPT_POSTFIELDS, array('param' => 'value')); .   and here are the parameters param=value

score 0 · Answer 3

0

What content is returned from this request? You could use jsonp, so you can do cross-domain requests;

To see how this works, you can see: link

24.05.2015 / 00:20

score 0 · Answer 4

Hello, use the following example: ( jquery site )

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.getJSON demo</title>
  <style>
  img {
    height: 100px;
    float: left;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script></head><body><divid="images"></div>

<script>
(function() {
  var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
  $.getJSON( flickerAPI, {
    tags: "mount rainier",
    tagmode: "any",
    format: "json"
  })
    .done(function( data ) {
      $.each( data.items, function( i, item ) {
        $( "<img>" ).attr( "src", item.media.m ).appendTo( "#images" );
        if ( i === 3 ) {
          return false;
        }
      });
    });
})();
</script>

</body>
</html>