We are aware of the issue with the badge emails resending to everyone, we apologise for the inconvenience - learn more here.

Forum Discussion

hayk's avatar
hayk
Explorer | Level 4
8 years ago

The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*'

Hey guys I am using npm package to work with dropbox. However when I try to upload a file I get the following error

 

XMLHttpRequest cannot load https://content.dropboxapi.com/2/files/upload. Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. Origin 'http://localhost:3000' is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

 

Any idea why is this happening and what can I do about this?

Thank you.

  •  

    I used an example Meteor app, and in server/main.js I just used the node library normally:

     

    var Dropbox = require('dropbox');

     

        const dbx = new Dropbox({accessToken: "<ACCESS_TOKEN>"})
        dbx.filesUpload({path: "/test_207235.txt", contents: "some test data"})
          .then(function (response) {
            console.log(response)
          })
          .catch(function (error) {
            console.error(error)
          })

    That uploaded the file successfully. Attempting the same in client/main.js failed with the same error you got.

     

    I don't have a more advanced sample available though. The filesUpload method takes a string or buffer, but beyond that I'm afraid I can't offer much insight as to how to manage files/data in node and Meteor themselves.

     

    If you want to upload directly from the user's browser, you can use the JavaScript SDK in the browser's JavaScript. E.g., include the library via a script tag in your HTML, and run JavaScript from a script tag, as shown in the basic browser example.

     

  • Greg-DB's avatar
    Greg-DB
    Icon for Dropbox Staff rankDropbox Staff
    Thanks for the post. We'll be happy to help with this. Can you let me know what version of the library you're using, and share the code that reproduces this issue? Thanks in advance!
    • hayk's avatar
      hayk
      Explorer | Level 4

      Hi Greg!

      I'm using dropbox@2.5.1

       

      And here is the code

       

      import Dropbox from 'dropbox'
      
      uploadCallback (file,self) {
          // TODO: Integrate dropbox with its SDK
          // TODO: Pass the link to the editor
          // const self = this
          console.log(self)
          return new Promise(
            (resolve, reject) => {
              console.log('uploadCallback promise')
              console.log('file', file)
              const dataObject = {
                file,
                resolve,
                reject
              }
              console.log('dataObject', dataObject)
              self.uploadToDropbox(dataObject)
            }
          )
        }
      
      uploadToDropbox (dataObject) {
          const dbx = new Dropbox({accessToken: Meteor.settings.public.dropbox.accessToken})
          console.log('dataObject', dataObject)
          const { file } = dataObject
          console.log('file', file)
          const { resolve, reject } = dataObject
          console.log('resolve', resolve)
          console.log('reject', reject)
          dbx.filesUpload({path: '/' + file.name, contents: file})
            .then(function (response) {
              console.log(response)
              resolve({ data: { link: 'http://dummy_image_src.com' } })
            })
            .catch(function (error) {
              console.error(error)
              reject('some error')
            })
          return false
        }

      Do you have any ideas?

      • Greg-DB's avatar
        Greg-DB
        Icon for Dropbox Staff rankDropbox Staff

        Thanks! Based on your code, it looks like you're running this in a Meteor app.

         

        I tried it out in a Meteor app, and I wasn't able to reproduce the issue when making an upload code in the 'server' code, but I was when I tried to run it in the 'client' code. Are you running this in the client code?

         

        I'm not sure offhand if this is something we can support, so instead you can either:

        - run this in your 'server' code.
        - import the JavaScript SDK as a JavaScript library on the page and use the normal browser interface.

About Dropbox API Support & Feedback

Node avatar for Dropbox API Support & Feedback

Find help with the Dropbox API from other developers.

5,877 PostsLatest Activity: 19 minutes ago
325 Following

If you need more help you can view your support options (expected response time for an email or ticket is 24 hours), or contact us on X or Facebook.

For more info on available support options for your Dropbox plan, see this article.

If you found the answer to your question in this Community thread, please 'like' the post to say thanks and to let us know it was useful!