Vue / Axios：无法使用 coinmarketcap 的密钥获取 API 数据

Question

I am a beginner level programmer, I am trying to fetch API data using Axios and Vue js but I don't know how to pass it through Axios This is how the API should get the request(Nodejs) I am a beginner level programmer, I am trying to fetch API data using Axios and Vue js but I don't know how to pass it through Axios This is how the API should get the request(Nodejs)

const rp = require('request-promise');
const requestOptions = {
  method: 'GET',
  uri: 'https://pro-api.coinmarketcap.com/v1/cryptocurrency/listings/latest',
  qs: {
    'start': '1',
    'limit': '5000',
    'convert': 'USD'
  },
  headers: {
    'X-CMC_PRO_API_KEY': 'b54bcf4d-1bca-4e8e-9a24-22ff2c3d462c'
  },
  json: true,
  gzip: true
};

rp(requestOptions).then(response => {
  console.log('API call response:', response);
}).catch((err) => {
  console.log('API call error:', err.message);
});
This is my vue js file code, I have sent the start and limits because I don't know how

First approach at it(it didn't work)第一种方法（它没有用）

 <div id="app">
     {{ info }}
    </div>
 <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://unpkg.com/vue"></script>
    <script>
      let app = new Vue({
  el: '#app',
  data () {
    return {
  info: null
    }
  },
  mounted () {
     let config = {'X-CMC_PRO_API_KEY': 'aaaaaa-bbbbbb-ccccc----ddjjk'};
     axios.get('https://pro-api.coinmarketcap.com/v1/cryptocurrency/listings/latest', {headers: config})
     .then(response => (this.info = response))
  }
});
    </script>

2nd attempt(it didn't work)第二次尝试（它没有工作）

 <div id="app">
     {{ info }}
    </div>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://unpkg.com/vue"></script>
    <script>
      let app = new Vue({
  el: '#app',
  data () {
    return {
      
  info: null
    }
  },
  mounted () {
     axios
     let config = {'X-CMC_PRO_API_KEY': 'ccccccc'};
      .get('https://pro-api.coinmarketcap.com/v1/cryptocurrency/listings/latest?start=1&limit=5000&convert=USD', {headers: config})
     .then(response => (this.info = response))
  }
});
    </script>

3rd attempt, but if put what is in the.get as a URL with my apikey it shows the data(i am so confused)第三次尝试，但如果将.get 中的内容作为 URL 与我的 apikey 一起显示数据（我很困惑）

 <div id="app">
     {{ info }}
    </div>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://unpkg.com/vue"></script>
    <script>
      let app = new Vue({
  el: '#app',
  data () {
    return {
  info: null
    }
  },
  mounted () {
     axios
      .get('https://pro-api.coinmarketcap.com/v1/cryptocurrency/listings/latest?CMC_PRO_API_KEY=myapikey&start=1&limit=5&convert=USD')
     .then(response => (this.info = response))
  }
});
    </script>

```I am not even sure on what the issue is, after the attempts...

I would like to thank you in anticipation for helping me.

Answer 1

It's because CORS.这是因为 CORS。 This link https://medium.com/@dtkatz/3-ways-to-fix-the-cors-error-and-how-access-control-allow-origin-works-d97d55946d9 is about it.这个链接https://medium.com/@dtkatz/3-ways-to-fix-the-cors-error-and-how-access-control-allow-origin-works-d97d55946d9是关于它的。 You can do like below, but i suggest you use reverse proxy through nginx to solve CORS.你可以像下面那样做，但我建议你通过 nginx 使用reverse proxy来解决 CORS。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://unpkg.com/vue"></script>
    <title>index</title>
  </head>
  <body>
    <div id="app">
      {{ info }}
    </div>
    <script>
     let app = new Vue({
        el: '#app',
        data () {
          return {
            info: null
          }
        },
        mounted () {
          const API_PROXY = 'https://bird.ioliu.cn/v1/?url='
          axios
              .get(`${API_PROXY}https://pro-api.coinmarketcap.com/v1/cryptocurrency/listings/latest?CMC_PRO_API_KEY=myapikey&start=1&limit=5&convert=USD`)
              .then(response => {
                this.info = JSON.parse(response.data.status.message.response.text)
              })
        }
      })
   </script>
  </body>
</html>

Vue / Axios：无法使用 coinmarketcap 的密钥获取 API 数据

问题描述

1 个解决方案

解决方案1
0 2021-03-29 01:58:22

Vue / Axios：无法使用 coinmarketcap 的密钥获取 API 数据

问题描述

1 个解决方案

解决方案1 0 2021-03-29 01:58:22

解决方案1
0 2021-03-29 01:58:22