How would I turn this curl request into a jquery request?

Question

I'm trying to use an API but their examples are in curl, not javascript, which is what I'm most familiar with. Here is their example:

$ curl http://visearch.visenze.com/uploadsearch \
   -d im_url=http://example.com/example-0.jpg \
   -d box=0,0,20,20 \
   -u access_key:secret_key

This is my attempt at an equivalent jquery request, but it's not working.

$.get("http://visearch.visenze.com/uploadsearch/im_url=http://example.com/example-0.jpg/box=0,0,20,20/u access :secret_key", function(data){...});

`-d` sends as data in a POST, so at minimum, you'll need a `$.post` — freedomn-m, Jan 07 '16 at 23:38
You should make sure [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS) isn't a problem. If you are trying to access the API outside of their domain _this might very well be a problem_. I assume it will be a problem if they didn't specify JavaScript as an alternative in the first place. — E. Sundin, Jan 07 '16 at 23:42
I'm a little concerned that you're trying to use an api that has `access` and `secret` parameters with jQuery, which means it's on a website, which means you'll be divulging those values... I hope this website is short-lived, and not available from the public internet! — aaaidan, Jan 08 '16 at 02:00
Having said that, not quite sure what's with all the downvoting on this question. — aaaidan, Jan 08 '16 at 02:00
Thanks, @aaaidan. Yes, it is just for a demo so it will be a website. I realize I won;t be able to access the API with Javascript. — jsnewbie, Jan 09 '16 at 04:13
@jsnewbie I assume by "won't be able to" you mean "shouldn't, for important security reasons", but that actually reminds me that some service APIs (like mailgun) actually detect and deny usage from in-browser JavaScript (including jQuery, of course). Again, this is for security reasons. Glad to hear it's just a demo! — aaaidan, Jan 09 '16 at 04:22
Seriously though, this question's down votes are a bit rough. Perhaps if you had described the way it doesn't (or didn't) work, you might have ended up on a positive score. — aaaidan, Jan 09 '16 at 04:24
@aaaidan yes, I'm just starting to learn the ways of stackoverflow such as how to better describe my problem. I will know better next time. Thanks again. — jsnewbie, Jan 09 '16 at 22:59

score 2 · Answer 1 · edited May 23 '17 at 11:52

If you use $.ajax() instead (which $.get() is shorthand for), you can use the username and password parameters (jQuery 1.7.2+) for the basic auth. You'll need to pass through a data object and specify POST if you need that request method.

$.ajax(
    url: 'http://visearch.visenze.com/uploadsearch',
    data: {
        im_url: 'http://example.com/example-0.jpg',
        box: '0,0,20,20',
    },
    username: 'access_key',
    password: 'secret_key',
    type: 'POST',
    success: function(data) {
        // ... your callback
    }
);

Since you've tagged PHP in this question, I'll show an example of how you might want to hide your access keys etc in a backend wrapper as the Visenze API FAQs suggest you might do:

1. Create a PHP file

<?php

$accessKey = 'access_key';
$secretKey = 'secret_key';

if (isset($_POST['im_url'], $_POST['box'])) {
    // Initialize the cURL request to ViSenze
    $ch = curl_init('http://visearch.visenze.com/uploadsearch');

    // We want to RETURN the result not output it
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

    // Set up the basic authentication settings
    curl_setopt($ch, CURLOPT_HTTPAUTH, CURLAUTH_BASIC);
    curl_setopt($ch, CURLOPT_USERPWD, "$accessKey:$secretKey");

    // Define the post fields
    curl_setopt($ch, CURLOPT_POST, true);
    curl_setopt($ch, CURLOPT_POSTFIELDS, [
        'im_url' => $_POST['im_url'],
        'box'    => $_POST['box']
    ]);

    // Do the request
    $result = curl_exec();
    curl_close($ch);

    // Output the results
    echo $result;
    exit;
}

echo 'Nothing posted to this script.';
exit;

2. Call that file instead with jQuery

$.post(
    'http://visearch.visenze.com/uploadsearch',
    {
        im_url: 'http://example.com/example-0.jpg',
        box: '0,0,20,20',
    },
    function(data) {
        // ... your callback
    }
);

This way your API credentials are stored in your PHP code so not visible when you view the source of your page.

score 2 · Answer 2 · answered Jan 07 '16 at 23:42

cURL requests with the -d option send the request as POST requests (unless you specify the G modifier for GET requests) so you will need to use that format. You will also need to set the header in a beforeSend method:

$.ajax(
  'http://visearch.visenze.com/uploadsearch',
  type: 'post',
  data: {
    im_url: 'http://example.com/example-0.jpg',
    box: '0,0,20,20'
  },
  beforeSend: function (xhr) {
    xhr.setRequestHeader("Authorization", "Basic ");
  }
);

How would I turn this curl request into a jquery request?

2 Answers2

1. Create a PHP file

2. Call that file instead with jQuery