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:

• Add CORS support to the API you are using. This only works if you have control over the target.
• Instead of making the request from your domain, something else needs to make the request for you.

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."]
            }
            
        },

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:

• Add CORS support to the API you are using. This only works if you have control over the target.
• Instead of making the request from your domain, something else needs to make the request for you.

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."]
            }
            
        },

• javascript
• ajax
• cors
• fetch
• response

• see my answer below. if no-cors shows an opaque response then cors should work. – imaginate Commented Dec 16, 2020 at 18:53

2 Answers 2

Reverse proxy

A mon 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

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.