Javascript - Fetch Command not firing due to CORS issue [duplicate]

241
August 18, 2019, at 03:00 AM

This question already has an answer here:

  • How does Access-Control-Allow-Origin header work? 13 answers

I am having some issues firing a fetch from some Javascript. I'm writing up some code to interact with the Files.com API, to list some files we have on there. It is related to Access-Control-Allow-Origin but I can't seem to get it to work.

Through a fair bit of troubleshooting and searching I discovered that the browser won't send this command if I'm running this code locally. I had to go in to Chrome and disable security options to get it to run. But not wanting to use that in production, I decided to put my code up on Heroku and define Access-Control-Allow-Origin in my header for the domain.

However that still seems not to be working. I am getting an error in the browser saying the header flag is not defined.

This also still works on Heroku, if I disable the security settings in Chrome. If I do that and run the app, I get my list of files.

async listFiles(directory) {
        const endPoint = `${filesURL}folders/${directory}/`;
        const data = {
            headers:{ 
                Authorization: `Basic ${authString}`,
                'Access-Control-Allow-Origin': 'https://mydomain.herokuapp.com'
            },
        }
        const response = await fetch(endPoint, data);
        const jsonResponse = await response.json();
            if (jsonResponse.length === 0) {
                return [{
                    name: 'This directory is empty.',
                    path: directory,
                    type: 'directory'
                }];
            }
            else {
                return jsonResponse.map(item => ({
                    name: item.display_name,
                    path: item.path,
                    type: item.type
                }));
            }
}

FireFox reports:

Access to fetch at 'https://OURDOMAIN.files.com/api/rest/v1/folders/...endpoint' from origin 'https://mydomain.herokuapp.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Edit I have managed to work around this for now, by sending my request via the Heroku app mentioned here: No 'Access-Control-Allow-Origin' header is present on the requested resource—when trying to get data from a REST API (thanks, kind stranger!). I'm also seeing if Files.com will add this to their responses.

Answer 1

Access-Control-Allow-Origin should be a list of domain names, not urls.

Try mydomain.herokuapp.com instead of https://mydomain.herokuapp.com

Rent Charter Buses Company
READ ALSO
how debug a Firefox extension?

how debug a Firefox extension?

if we have a html and JavaScript code beside it and there is undefined variable in my JavaScript I can see error in Firefox development tool(F12)now i developing an extension but i can't see error any where

173
Using while(true) with break to handle multiple kinds of faulty input differently

Using while(true) with break to handle multiple kinds of faulty input differently

I've read that it's good practice to avoid using while(true) if possible, so I'm wondering if there's a better way to accomplish this or if this is a scenario where it makes sense to use itRecursion could work but I need to use a loop

133
Problem with transformation JavaRDD<Status> to JavaRDD<String>

Problem with transformation JavaRDD<Status> to JavaRDD<String>

I'm trying to save tweets from twitter to MongoDb database

92
Cannot put anonymous type objects into ArrayList [on hold]

Cannot put anonymous type objects into ArrayList [on hold]

I am writing some class as my homeworkSo I need to develop a class "Shape" and three classes: Rectangle, Circle and Square which extends Shape and having some own properties(such as radius for circle, length and width for rectangle

112