使用JavaScript在Twitter上共享base64图像

Question

I spent hours and hours to resolve this problem... but couldn't get any tutorials or examples for this. Tried to implement something but confronted terrible errors.

I'm working on client slide and it seems "POST statuses/update_with_media" in REST Api of Twitter is especially designed to share image data url, but originally, Twitter documentation is very poor and has no example codes for this. I am even not sure how to give user_secret, user_token, consumer_key and consumer_secret in ajax request. This is what I've done.

        var fd = new FormData();
        fd.append("oauth_consumer_key", "knC68njKLjXrRljSxhE3uywsi");
        fd.append("status", "");
        fd.append("media[]", base64_string);

        $.ajax({
            url:"https://api.twitter.com/1.1/statuses/update_with_media.json",
            type:"POST",
            data:fd,
            processData:false,
            contentType: "multipart/form-data",
            cache:false,
            success:function(data){
                alert('Post was published.');
            },
            error:function(shr,status,data){
                alert('Post was not published.');
            },
            complete:function(){
            }
        });

I know this is a bad try but that was all I could do. And this gives below error.

XMLHttpRequest cannot load https://api.twitter.com/1.1/statuses/update_with_media.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://192.168.0.101' is therefore not allowed access. 

I'm running this on local php server. Any examples or tutorials for this will be appreciated.

Thanks.

Answer 1

I do not know about the specifics of this API call but, from a first look, you can't make an ajax call to a server different than the one your page originated from. Thus, you cannot make an ajax call to the twitter api, unless twitter supports CORS . The error message you get indicates exactly this. The only way to solve this is by making the twitter api call from your server, and then have your page make the ajax call to your server.