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

Question

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();

Answer 1

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

1. obtains the user-id and password from the user,
2. constructs the user-pass by concatenating the user-id, a single colon (":") character, and the password,
3. encodes the user-pass into an octet sequence (see below for a discussion of character encoding schemes),
4. 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.

Answer 2

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();