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

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

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

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

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.

這個時候，是遇到了跨域的問題； 由于接口跨域問題，因此不能直接通過ajax請求訪問

查看自己的代碼，直接把json接口寫在請求里

圖片.png

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

1：打開build/webpack.dev.conf.js，配置代理proxyTable屬性如下：通過vue-cli提供給的代理（proxy）進行配置即可，

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

圖片.png

2：回到當前頁面,我的頁面是my.vue,修改請求路徑

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：重新啟動項目

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

github訪問鏈接：https://github.com/wangxiaoting666/mint-demo

Mint UI教程匯總：

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