VUEはAPIチュートリアルを呼び出して、VUEクロスドメインの問題を解決します。

VUE呼び出しAPIメソッド

1.プロジェクトにVUE-CLIスキャフォールディングを使用する場合。// VUE-CLIは、プロジェクトを実行するには便利すぎます。
2.axiosをインストールします。

npm i axios

3.main.jsファイルにaxiosプロトタイプチェーンを導入します

import axios from 'axios'
Vue.prototype.$axios = axios  

4.configフォルダーのindex.jsファイルにあるproxtable {}

  proxyTable: {
    
    
            '/book': {
    
     //聚合平台有很多免费的API,大家可以参考使用
              target: 'http://apis.juhe.cn/goodbook/catalog',   //接口地址
              changeOrigin: true,
              pathRewrite: {
    
    
                '^/book': ''    //将以上的接口地址转义为 /book , 然后在需要调用接口的地方使用。
              }
            },
       }  

5.ページを呼び出します

  data(){
    
    
  return{
    
    
  book:[] //创建一个数组来接收API的内容
  }
  }created() {
    
      //在生命周期函数中调用
     this.$axios
     .get('/book?key=你的KEY&dtype=json') //接口一般是get或post,主要看文档。
     .then(res=>{
    
    
       this.book = res.data.result; //把数据给book数组
       console.log(res)  //打印数据
     })
   },

6.これで完了です。多くの人が端末の実行中にページをテストすると、404またはクロスドメインの問題が発生します。最も重要なことは、これらの問題を解決するために再実行することです。npn run dev、再実行します。

おすすめ

転載: blog.csdn.net/qq_42177117/article/details/108441492