No 'Access-Control-Allow-Origin' header is present on the requested resource. Amazon S3












-1















I was using react-s3 to do some basic file uploading to amazin s3.



code:



export const addMovie = (values, history) => async dispatch => {
await ReactS3.uploadFile(values.poster, config).then(data => {
console.log(data);
}).catch(err => {
alert(err);
})
const res = await axios.post('/admin/movie', values);

history.push('/admin/movies');
dispatch({ type: "HANDLE_NEW", payload: res.data })
};


but I keep getting this error:




Failed to load url: Response to
preflight request doesn't pass access control check: No
'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'http://localhost:3000' is therefore not allowed
access. If an opaque response serves your needs, set the request's
mode to 'no-cors' to fetch the resource with CORS disabled.











share|improve this question


















  • 2





    Have you added cors headers to s3? medium.com/@pongsakornsemsuwan/…

    – Saurabh Nemade
    Nov 13 '18 at 20:22











  • @SaurabhNemade is there's no other way to do it using react-s3? do I have to use the dropzone?

    – Ahmed Maher
    Nov 13 '18 at 20:26











  • It is possible to use react-s3. You will need to follow this docs.aws.amazon.com/AmazonS3/latest/dev/… Basically you will require cors headers anywhere if you are accessing something which is not in current domain name of website. For e.g, in this case from localhost domain name you are trying to access *.amazonaws.com Even if you use any other service cors need to enabled on them.

    – Saurabh Nemade
    Nov 13 '18 at 20:46











  • god it, thank you so much Saurabh! really appreciate it.

    – Ahmed Maher
    Nov 13 '18 at 20:56











  • if you don't mind writing it as an answer so I can mark it as aswered!:)

    – Ahmed Maher
    Nov 13 '18 at 20:57
















-1















I was using react-s3 to do some basic file uploading to amazin s3.



code:



export const addMovie = (values, history) => async dispatch => {
await ReactS3.uploadFile(values.poster, config).then(data => {
console.log(data);
}).catch(err => {
alert(err);
})
const res = await axios.post('/admin/movie', values);

history.push('/admin/movies');
dispatch({ type: "HANDLE_NEW", payload: res.data })
};


but I keep getting this error:




Failed to load url: Response to
preflight request doesn't pass access control check: No
'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'http://localhost:3000' is therefore not allowed
access. If an opaque response serves your needs, set the request's
mode to 'no-cors' to fetch the resource with CORS disabled.











share|improve this question


















  • 2





    Have you added cors headers to s3? medium.com/@pongsakornsemsuwan/…

    – Saurabh Nemade
    Nov 13 '18 at 20:22











  • @SaurabhNemade is there's no other way to do it using react-s3? do I have to use the dropzone?

    – Ahmed Maher
    Nov 13 '18 at 20:26











  • It is possible to use react-s3. You will need to follow this docs.aws.amazon.com/AmazonS3/latest/dev/… Basically you will require cors headers anywhere if you are accessing something which is not in current domain name of website. For e.g, in this case from localhost domain name you are trying to access *.amazonaws.com Even if you use any other service cors need to enabled on them.

    – Saurabh Nemade
    Nov 13 '18 at 20:46











  • god it, thank you so much Saurabh! really appreciate it.

    – Ahmed Maher
    Nov 13 '18 at 20:56











  • if you don't mind writing it as an answer so I can mark it as aswered!:)

    – Ahmed Maher
    Nov 13 '18 at 20:57














-1












-1








-1


0






I was using react-s3 to do some basic file uploading to amazin s3.



code:



export const addMovie = (values, history) => async dispatch => {
await ReactS3.uploadFile(values.poster, config).then(data => {
console.log(data);
}).catch(err => {
alert(err);
})
const res = await axios.post('/admin/movie', values);

history.push('/admin/movies');
dispatch({ type: "HANDLE_NEW", payload: res.data })
};


but I keep getting this error:




Failed to load url: Response to
preflight request doesn't pass access control check: No
'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'http://localhost:3000' is therefore not allowed
access. If an opaque response serves your needs, set the request's
mode to 'no-cors' to fetch the resource with CORS disabled.











share|improve this question














I was using react-s3 to do some basic file uploading to amazin s3.



code:



export const addMovie = (values, history) => async dispatch => {
await ReactS3.uploadFile(values.poster, config).then(data => {
console.log(data);
}).catch(err => {
alert(err);
})
const res = await axios.post('/admin/movie', values);

history.push('/admin/movies');
dispatch({ type: "HANDLE_NEW", payload: res.data })
};


but I keep getting this error:




Failed to load url: Response to
preflight request doesn't pass access control check: No
'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'http://localhost:3000' is therefore not allowed
access. If an opaque response serves your needs, set the request's
mode to 'no-cors' to fetch the resource with CORS disabled.








reactjs amazon-s3 redux






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Nov 13 '18 at 20:07









Ahmed MaherAhmed Maher

157




157








  • 2





    Have you added cors headers to s3? medium.com/@pongsakornsemsuwan/…

    – Saurabh Nemade
    Nov 13 '18 at 20:22











  • @SaurabhNemade is there's no other way to do it using react-s3? do I have to use the dropzone?

    – Ahmed Maher
    Nov 13 '18 at 20:26











  • It is possible to use react-s3. You will need to follow this docs.aws.amazon.com/AmazonS3/latest/dev/… Basically you will require cors headers anywhere if you are accessing something which is not in current domain name of website. For e.g, in this case from localhost domain name you are trying to access *.amazonaws.com Even if you use any other service cors need to enabled on them.

    – Saurabh Nemade
    Nov 13 '18 at 20:46











  • god it, thank you so much Saurabh! really appreciate it.

    – Ahmed Maher
    Nov 13 '18 at 20:56











  • if you don't mind writing it as an answer so I can mark it as aswered!:)

    – Ahmed Maher
    Nov 13 '18 at 20:57














  • 2





    Have you added cors headers to s3? medium.com/@pongsakornsemsuwan/…

    – Saurabh Nemade
    Nov 13 '18 at 20:22











  • @SaurabhNemade is there's no other way to do it using react-s3? do I have to use the dropzone?

    – Ahmed Maher
    Nov 13 '18 at 20:26











  • It is possible to use react-s3. You will need to follow this docs.aws.amazon.com/AmazonS3/latest/dev/… Basically you will require cors headers anywhere if you are accessing something which is not in current domain name of website. For e.g, in this case from localhost domain name you are trying to access *.amazonaws.com Even if you use any other service cors need to enabled on them.

    – Saurabh Nemade
    Nov 13 '18 at 20:46











  • god it, thank you so much Saurabh! really appreciate it.

    – Ahmed Maher
    Nov 13 '18 at 20:56











  • if you don't mind writing it as an answer so I can mark it as aswered!:)

    – Ahmed Maher
    Nov 13 '18 at 20:57








2




2





Have you added cors headers to s3? medium.com/@pongsakornsemsuwan/…

– Saurabh Nemade
Nov 13 '18 at 20:22





Have you added cors headers to s3? medium.com/@pongsakornsemsuwan/…

– Saurabh Nemade
Nov 13 '18 at 20:22













@SaurabhNemade is there's no other way to do it using react-s3? do I have to use the dropzone?

– Ahmed Maher
Nov 13 '18 at 20:26





@SaurabhNemade is there's no other way to do it using react-s3? do I have to use the dropzone?

– Ahmed Maher
Nov 13 '18 at 20:26













It is possible to use react-s3. You will need to follow this docs.aws.amazon.com/AmazonS3/latest/dev/… Basically you will require cors headers anywhere if you are accessing something which is not in current domain name of website. For e.g, in this case from localhost domain name you are trying to access *.amazonaws.com Even if you use any other service cors need to enabled on them.

– Saurabh Nemade
Nov 13 '18 at 20:46





It is possible to use react-s3. You will need to follow this docs.aws.amazon.com/AmazonS3/latest/dev/… Basically you will require cors headers anywhere if you are accessing something which is not in current domain name of website. For e.g, in this case from localhost domain name you are trying to access *.amazonaws.com Even if you use any other service cors need to enabled on them.

– Saurabh Nemade
Nov 13 '18 at 20:46













god it, thank you so much Saurabh! really appreciate it.

– Ahmed Maher
Nov 13 '18 at 20:56





god it, thank you so much Saurabh! really appreciate it.

– Ahmed Maher
Nov 13 '18 at 20:56













if you don't mind writing it as an answer so I can mark it as aswered!:)

– Ahmed Maher
Nov 13 '18 at 20:57





if you don't mind writing it as an answer so I can mark it as aswered!:)

– Ahmed Maher
Nov 13 '18 at 20:57












1 Answer
1






active

oldest

votes


















2














CORS Headers need to be added given at https://medium.com/@pongsakornsemsuwan/aws-s3-upload-with-react-dropzone-s3-uploader-a76021fe385



You will need to follow this https://docs.aws.amazon.com/AmazonS3/latest/dev/cors-troubleshooting.html



You will require cors headers anywhere if you are accessing something which is not in current domain name of website.



For e.g, in this case from localhost domain name you are trying to access *.amazonaws.com Even if you use any other service cors need to enabled on them.



More on CORS: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS






share|improve this answer























    Your Answer






    StackExchange.ifUsing("editor", function () {
    StackExchange.using("externalEditor", function () {
    StackExchange.using("snippets", function () {
    StackExchange.snippets.init();
    });
    });
    }, "code-snippets");

    StackExchange.ready(function() {
    var channelOptions = {
    tags: "".split(" "),
    id: "1"
    };
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function() {
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled) {
    StackExchange.using("snippets", function() {
    createEditor();
    });
    }
    else {
    createEditor();
    }
    });

    function createEditor() {
    StackExchange.prepareEditor({
    heartbeatType: 'answer',
    autoActivateHeartbeat: false,
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader: {
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    },
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    });


    }
    });














    draft saved

    draft discarded


















    StackExchange.ready(
    function () {
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53288708%2fno-access-control-allow-origin-header-is-present-on-the-requested-resource-am%23new-answer', 'question_page');
    }
    );

    Post as a guest















    Required, but never shown

























    1 Answer
    1






    active

    oldest

    votes








    1 Answer
    1






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes









    2














    CORS Headers need to be added given at https://medium.com/@pongsakornsemsuwan/aws-s3-upload-with-react-dropzone-s3-uploader-a76021fe385



    You will need to follow this https://docs.aws.amazon.com/AmazonS3/latest/dev/cors-troubleshooting.html



    You will require cors headers anywhere if you are accessing something which is not in current domain name of website.



    For e.g, in this case from localhost domain name you are trying to access *.amazonaws.com Even if you use any other service cors need to enabled on them.



    More on CORS: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS






    share|improve this answer




























      2














      CORS Headers need to be added given at https://medium.com/@pongsakornsemsuwan/aws-s3-upload-with-react-dropzone-s3-uploader-a76021fe385



      You will need to follow this https://docs.aws.amazon.com/AmazonS3/latest/dev/cors-troubleshooting.html



      You will require cors headers anywhere if you are accessing something which is not in current domain name of website.



      For e.g, in this case from localhost domain name you are trying to access *.amazonaws.com Even if you use any other service cors need to enabled on them.



      More on CORS: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS






      share|improve this answer


























        2












        2








        2







        CORS Headers need to be added given at https://medium.com/@pongsakornsemsuwan/aws-s3-upload-with-react-dropzone-s3-uploader-a76021fe385



        You will need to follow this https://docs.aws.amazon.com/AmazonS3/latest/dev/cors-troubleshooting.html



        You will require cors headers anywhere if you are accessing something which is not in current domain name of website.



        For e.g, in this case from localhost domain name you are trying to access *.amazonaws.com Even if you use any other service cors need to enabled on them.



        More on CORS: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS






        share|improve this answer













        CORS Headers need to be added given at https://medium.com/@pongsakornsemsuwan/aws-s3-upload-with-react-dropzone-s3-uploader-a76021fe385



        You will need to follow this https://docs.aws.amazon.com/AmazonS3/latest/dev/cors-troubleshooting.html



        You will require cors headers anywhere if you are accessing something which is not in current domain name of website.



        For e.g, in this case from localhost domain name you are trying to access *.amazonaws.com Even if you use any other service cors need to enabled on them.



        More on CORS: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS







        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Nov 13 '18 at 21:00









        Saurabh NemadeSaurabh Nemade

        1,108515




        1,108515






























            draft saved

            draft discarded




















































            Thanks for contributing an answer to Stack Overflow!


            • Please be sure to answer the question. Provide details and share your research!

            But avoid



            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.


            To learn more, see our tips on writing great answers.




            draft saved


            draft discarded














            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53288708%2fno-access-control-allow-origin-header-is-present-on-the-requested-resource-am%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown





















































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown

































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown







            Popular posts from this blog

            Xamarin.iOS Cant Deploy on Iphone

            Glorious Revolution

            Dulmage-Mendelsohn matrix decomposition in Python