如何在 fetch() 中使用 no-cors

Question

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

Answer 1

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.