CODEWITHSUNDEEP
javascriptajaxcorsfetchresponse
Jo Le Belge
Jo Le Belge

Reputation: 155

How use no-cors with fetch()

I have a problem. I try to explain it.

My client ask me to build a web portal for fetching and modifying data on private server, with Basic Auth.

The private server return a XML files.

I try using fetch() to get the data but I have a CORS error. I know what that mean but I don't have the hand on the private server.

So I would like use my fetch() with :

mode : 'no-cors'

but if I use like that, I can use the data fetched.

I think I have 2 main solutions:

If I can’t add CORS headers, I will likely want to build a small server-side script that can make these requests on my behalf.

Instead of calling the target directly, my script can now call my script, which has to do the request for you server-side.

But, if I don't have the hands on the server, how can I do that ?

If someone have an idea...

Thanks a lot...

---- EDIT -----

My code :

getListApps: async function () {

            let url = `${SA_BASE_URL}/applications`;

            // Set headers
            let headers = new Headers();
            headers.append('Authorization', 'Basic ' + btoa(SA_LOGIN + ":" + SA_PASSWORD));
            try {
                // GET request
                const response = await fetch(url, { 
                    method: 'GET', 
                    headers: headers, 
                    mode: 'no-cors', 
                    credentials: 'include' })

                if (response.status === 200) {
                    const data = await response.json();
                    this.listApp = data;
                    this.listApp.forEach(app => {
                        if (app.status === "DISCONNECTED") {
                            this.listDecApp.push(app);
                        }
                    });
                    this.nbr = this.listDecApp.length;
                } else {
                    if (response.status === 400) this.errors = ['Invalid app_permissions value. (err.400)'];
                    if (response.status === 401) this.errors = ['Acces denied. (err.401)'];
                }
            } catch (error) {
                console.log(error);
                this.errors = ["Une erreur est survenue lors de la récupération des informations sur le serveur."]
            }
            
        },

Upvotes: 0

Views: 55520

Answers (2)

Peteris
Peteris

Reputation: 3325

Reverse proxy

A common pattern for solving similar challenges where a legacy target server can not be modified is to use a reverse proxy (e.g. nginx configured as one) which will accept the connection from the browser(s) in a proper manner, with whatever headers, attributes, connection settings, TLS, etc is currently required, and then forward the request to the

Upvotes: 0

imaginate
imaginate

Reputation: 549

If you can use no-cors, set it in the headers, like:

var opts = {
  headers: {
    'mode':'cors'
  }
}
fetch(url, opts)

If you do not control the API, there is little you can do.

Upvotes: -3

Related Questions