自己寫(xiě)了一個(gè)json數(shù)據(jù)，放在服務(wù)器上，現(xiàn)在要通過(guò)vue項(xiàng)目調(diào)用數(shù)據(jù)

http://www.intmote.com/test.json

我現(xiàn)在要調(diào)用

在調(diào)用接口數(shù)據(jù)的時(shí)候的時(shí)候
會(huì)出現(xiàn)這樣的報(bào)錯(cuò)

Access to XMLHttpRequest at 'http://www.intmote.com/test.json' from origin
'http://localhost:8080' has been blocked by CORS policy: 
No 'Access-Control-Allow-Origin' header is present on the requested resource.

這個(gè)時(shí)候，是遇到了跨域的問(wèn)題； 由于接口跨域問(wèn)題，因此不能直接通過(guò)ajax請(qǐng)求訪問(wèn)

查看自己的代碼，直接把json接口寫(xiě)在請(qǐng)求里

圖片.png

解決辦法：設(shè)置代理，利用proxyTable屬性實(shí)現(xiàn)跨域請(qǐng)求

1：打開(kāi)build/webpack.dev.conf.js，配置代理proxyTable屬性如下：通過(guò)vue-cli提供給的代理（proxy）進(jìn)行配置即可，

proxyTable: {
  '/api': {
    target: 'http://www.intmote.com',
    changeOrigin: true,
    pathRewrite: {
      '^/api': ''  
    }
  }
},

圖片.png

2：回到當(dāng)前頁(yè)面,我的頁(yè)面是my.vue,修改請(qǐng)求路徑

created() {
            this.$http.get('/api/test.json').then((response) => {

                console.log(response.data)
                //響應(yīng)正確回調(diào)
                this.nameList = response.body; //把數(shù)據(jù)存放到data中
            })
        },

3：重新啟動(dòng)項(xiàng)目

4：這個(gè)時(shí)候可以看到，跨域問(wèn)題解決
json里面的數(shù)據(jù)也顯示在了頁(yè)面里面

github訪問(wèn)鏈接：https://github.com/wangxiaoting666/mint-demo

Mint UI教程匯總：

Vue移動(dòng)端框架Mint UI教程-搭建環(huán)境引入框架（一）
http://www.itdecent.cn/p/874e5152b3c5
Vue移動(dòng)端框架Mint UI教程-底部導(dǎo)航欄（二）
http://www.itdecent.cn/p/56e887cbb660
Vue移動(dòng)端框架Mint UI教程-組件的使用（三）
http://www.itdecent.cn/p/5ec1e2d2f652
Vue移動(dòng)端框架Mint UI教程-跳轉(zhuǎn)新頁(yè)面(四)
http://www.itdecent.cn/p/364d0462ddb6
Vue移動(dòng)端框架Mint UI教程-調(diào)用模擬json數(shù)據(jù)(五)
http://www.itdecent.cn/p/6d3f1436b327
Vue移動(dòng)端框架Mint UI教程-數(shù)據(jù)渲染到頁(yè)面（六）
http://www.itdecent.cn/p/dc532ab82d2a
Vue移動(dòng)端框架Mint UI教程-接口跨域問(wèn)題（七）
http://www.itdecent.cn/p/b28cd8290b2a