Develop Reference

failed to load "username:password http:// link: Cross origin requests are only supported for protocol schemes http, data, chrome, chrome-extension

My task is to create a web application that lets the user add stuff (such as animals or w/e). To do this I need to use an already built API. The problem is that everytime I try to fetch the information I get errors.
The code is written in javascript. And the task is to use GET, POST and DELETE methods for the API.
The problem is that I keep getting the "Failed to load" error when I try to "send" the request.
Can someone please tell/show me how to do this? I have tried to "Set --allow-file-access-from-file" for chrome but it didn't work.
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = function (){
if (xhr.readyState == 4) {
if (xhr.status == 200) {
console.log(xhr.responseText);
}
if (xhr.status == 404) {
console.log("file is not working bitch");
}
}
}
xhr.open('GET','juraland:28d8d7c89a http://juraland-d887642c13.evalcrew.com/dinosaurs?page[number]=0', true);
xhr.send();

That's not the correct format for username/password urls. They should look like
http://username:password#example.com
But note that this is a very old, deprecated technique, as it sends the username and password in the clear; it is not supported in current browsers:
Use of the format "user:password" in the userinfo field is
deprecated. Applications should not render as clear text any data
after the first colon (":") character found within a userinfo
subcomponent unless the data after the colon is the empty string
(indicating no password). Applications may choose to ignore or
reject such data when it is received as part of a reference and
should reject the storage of such data in unencrypted form. The
passing of authentication information in clear text has proven to be
a security risk in almost every case where it has been used.
If the server you're connecting to depends on basic auth you may be able to instead use the method defined in RFC7617, which replaced the original scheme:
To receive authorization, the client
obtains the user-id and password from the user,
constructs the user-pass by concatenating the user-id, a single
colon (":") character, and the password,
encodes the user-pass into an octet sequence (see below for a
discussion of character encoding schemes),
and obtains the basic-credentials by encoding this octet sequence
using Base64 ([RFC4648], Section 4) into a sequence of US-ASCII
characters ([RFC0020]).
...and then pass that encoded string in an Authentication: Basic header rather than as part of the URL.

The URL which you mentioned is wrong i think
"juraland:28d8d7c89a http://juraland-d887642c13.evalcrew.com/dinosaurs?page[number]=0"
"http://juraland-d887642c13.evalcrew.com/dinosaurs?page[number]=0"
This url is working fine.
But while we are sending this through xhr request, the URL is transforming into this
"https://juraland-d887642c13.evalcrew.com/dinosaurs?page[number]=0"
So can you please make the api call in https format?
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = function (){
if (xhr.readyState == 4) {
if (xhr.status == 200) {
console.log(xhr.responseText);
}
if (xhr.status == 404) {
console.log("file is not working bitch");
}
}
}
xhr.open('GET','http://juraland-d887642c13.evalcrew.com/dinosaurs?page[number]=0', true);
xhr.send();

Sending email from browser mailgun

I want to send a simple email from the browser using mailgun. I send a working email from postman and with the download code function I managed to get the javascript code which is:
var data = new FormData();
data.append("from", "Mailgun Sandbox <postmaster#sandbox1985406854ad9e8b8dfe094531fa41e8.mailgun.org>");
data.append("to", "Example <example#gmail.com>");
data.append("subject", "Hello from Mailgun");
data.append("text", "Congratulations Example, you just sent an email with Mailgun! You are truly awesome!");
var xhr = new XMLHttpRequest();
xhr.withCredentials = true;
xhr.addEventListener("readystatechange", function () {
if (this.readyState === 4) {
console.log(this.responseText);
}
});
xhr.open("POST", "https://api:key-75a05cfds8c66bd1y4c3e854305438e5#api.mailgun.net/v3/sandbox1985406854ad9e8b8dfe094531fa41e8.mailgun.org/messages");
xhr.setRequestHeader("cache-control", "no-cache");
xhr.setRequestHeader("postman-token", "0a3ad9d5-22b5-6308-d6e7-59f66360fa26");
xhr.send(data);
But when I execute this code from my browser (firefox) it does nothing. What am I doing wrong?
Changing the url from
https://api:key-75a05cfds8c66bd1y4c3e854305438e5#api.mailgun.net/v3/sandbox1985406854ad9e8b8dfe094531fa41e8.mailgun.org/messages
to
https://api.mailgun.net/v3/sandbox1985406854ad9e8b8dfe094531fa41e8.mailgun.org/messages
seems to execute, is the api:key-xx part invalid?

Don't do this. This is not an appropriate use of the Mailgun API.
By delivering this Javascript to a browser, you are giving them access to your Mailgun API key. This API key is not limited in any way whatsoever -- a malicious client could misuse the key to send an unlimited number of messages to any recipient they want, potentially racking up large bills and/or getting your account blocked for spam.
Use the Mailgun API on the server side. If you need to send messages via Javascript, create an endpoint in your application which calls the Mailgun API with appropriate restrictions in place.

Tumblr API OAuth with local test server

I'm trying to get posts from my tumblr blog and put them on a separate website page. To do this I registered an app on their OAuth page, but I'm having some issues when I try to actually request the authorization. My console spits out this message—
XMLHttpRequest cannot load https://api.tumblr.com/v2/blog/myblog.tumblr.com/posts?api_key=(MY_KEY).
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'http://127.0.0.1:63342' is therefore not allowed access.
(I've omitted the key value here for obvious reasons).
Now, my site isn't actually live yet, and I have a test server running at localhost:63342 but on their OAuth app settings page I have these options that I must fill out—
Is there a way to get this to work with my local test server? Here's the code that I'm calling to request access.
var request = new XMLHttpRequest();
request.open('GET', 'https://api.tumblr.com/v2/blog/myblog.tumblr.com/posts?api_key=(API_KEY)', true);
request.onload = function() {
if (request.status >= 200 && request.status < 400) {
// Success!
var data = JSON.parse(request.responseText);
console.log(data);
} else {
// We reached our target server, but it returned an error
console.log('server error');
}
};
request.onerror = function() {
// There was a connection error of some sort
console.log("ERROR!!!");
};
request.send();
Any help would be appreciated! Thanks!

Turn out my issue was using JSON instead of JSONP, which bypasses the Access-Control-Allow-Origin issue. I downloaded this JSONP library for Javascript ( I am not using JQuery in my project ) and was able to access the api by writing this:
JSONP('https://api.tumblr.com/v2/blog/myblog.tumblr.com/posts?api_key=(API_KEY)'
, function(data) {
console.log(data);
});
Which returns a JSON Object which I can then data from using something like data.response or whatever objects are in the array.
Again, my issue was not Tumblr not authorizing my test server. I was able to get this to work using 127.0.0.1:port as my application website & callback url.

CORS not working at all

The SDK demo works fine (it doesn't need special CORS stuff since it is on the same domain)
When I try to send the request from localhost:8080 this happens
So I'm trying to request api.soundcloud.com/tracks - first my browser sends an OPTIONS req to api.soundcloud.com asking if it's okay to call cross-origin. api.soundcloud.com does not return the headers my browser is looking for so my browser throws an error and can't make the request.
Am I the only person trying to use the APIs from another domain or is something going wrong here?
EDIT: Doing debugging in wireshark - when making an API call using the SDK in the browser an OPTIONS request isn't even being sent. WTF

here's a working example where request is coming from jsbin.com:
var request = new XMLHttpRequest();
request.onreadystatechange = function () {
if (request.readyState === 4 && request.status === 200) {
console.log(request.responseText);
}
};
request.open('GET', 'http://api.soundcloud.com/tracks?client_id=YOUR_CLIENT_ID');
request.send();

Track 404 error pages or How to monitor http header request's status made by the browser using Javascript

I am developing a script that helps track 404 error pages (using JavaScript) at the client side. I searched for tutorials/ posts on the same but didn't find any helpful to me.
One post mentioned using curl (PHP) on the server side & redirect the user to a custom 404 page. But that doesn't address my problem (I want it at the client side).
This page mentions how to create an http object, open up a connection & detect its status in this way:
var request = makeHttpObject();
request.open("GET", "your_url", true);
request.send(null);
....
if( request.status == 404 )
print("404 error")
But over here we ourselves are making the http request & hence have access to the object. My aim is to detect any 404 page errors from the request send by the browser (due to user navigation).
Can we monitor the browser's http object for response statuses? How does Firebug's Network Analysis feature access the http headers? Can I replicate that in my script?
I have noticed that browser's Developer tool's Console gives a 404 error for missing pages as well as individual elements like images on that page.
These are the possible solutions I could imagine:
Monitor the response.status of every http request sent by the browser
Use Developer Tool's/Browser's Error Notification to track 404 errors using an "API" for extracting those error notifications of the tool (if it exists)
Thanks a lot

You mean something like this?
function returnStatus(req, status) {
//console.log(req);
if(status == 404) {
console.log("The url returned status code " + status);
}
else {
console.log("success");
}
}
function fetchStatus(address) {
var client = new XMLHttpRequest();
client.onreadystatechange = function() {
// in case of network errors this might not give reliable results
if(this.readyState == 4)
returnStatus(this, this.status);
}
client.open("HEAD", address);
client.send();
}
fetchStatus("http://yoururl.com");