“Redirect has been blocked by CORS policy” Vue Axios

Asked By: Anonymous

Please don’t mark this as a duplicate. I have read every related answer on stack overflow and have yet to come to a clear solution for this issue.

I’m using a vue server right now with axios to try to fetch data and display it from https://coinmarketcap.com. The problem is that I get an error message in the chrome console:

Redirect from ‘https://api.coinmarketcap.com/v1/ticker‘ to
‘https://api.coinmarketcap.com/v1/ticker/‘ has been blocked by CORS
policy: No ‘Access-Control-Allow-Origin’ header is present on the
requested resource. Origin ‘http://mywebsite.ca‘ is therefore not
allowed access.

My function is as barebones as possible, in line with documentation and online tutorial. In my vue component script section:

methods: {
      async getCryptos() {
        await axios.get('https://api.coinmarketcap.com/v1/ticker').then((resp) => {
          this.response = resp.data
        }).catch((err) => {
          this.response = err
        })
      }
    },
    beforeMount () {
      this.getCryptos()
    }

I’ve read countless documentation on this subject and have yet to find a clear answer. I have no idea what headers to include but I have tried many combinations of configuration. Can someone succinctly explain what it is that I need to do here? I know other websites fetch from coinmarketcap, so it is possible. It shouldn’t be that difficult…

Solution

Answered By: Anonymous

I fixed my issue by adding the slash (/) at the end of my API request. I’ve been getting the same warning at my console log but it’s working now.