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

Asked

Viewed 7,389 times

21

It is possible to request a POST type 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 solve this type of problem?

javascript jquery ajax cross-domain

4 answers

13

It is possible to enable CORS requests in the browser by making use of jQuery with the following code:

jQuery.support.cors = true;

These requests between different domains for a long time represented some security loopholes, so browsers started to disable this functionality by default. Currently modern browsers (Internet Explorer 8+, Firefox 3.5+, Safari 4+, and Chrome) allow this type of request, provided that Cross-Origin Resource Sharing (CORS) is also enabled on the server.

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

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

  • For CORS to work, the server also needs to be configured to accept the headers that JS will send.

  • 1

    This solution depends on many preconditions. The best way to do this is to create an entry on the server of the application that makes this request (via curl or similar) and returns the data.

7

When it comes to CORS, "incompatibility" and restrictions are something we cannot leave aside.

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

0

  • 1

    His answer ended up in the analysis of "Low Quality Publications". It does not deserve vote to delete because besides the link you mention a couple of important keywords. If you want to learn what a quality response is, just check out the one of your colleagues up here.

0

Hello use as the example below: ( 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>

<div id="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>

Browser other questions tagged javascript jquery ajax cross-domain

You are not signed in. Login or sign up in order to post.