Vue移動端框架Mint UI教程-接口跨域問題（七）

本身寫了一個json數據，放在服務器上，如今要經過vue項目調用數據

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

 

 

 

我如今要調用

在調用接口數據的時候的時候
會出現這樣的報錯

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

解決辦法：設置代理，利用proxyTable屬性實現跨域請求

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)
                //響應正確回調
                this.nameList = response.body; //把數據存放到data中
            })
        },

 

 

3：從新啓動項目

 

 

 

4：這個時候能夠看到，跨域問題解決
json裏面的數據也顯示在了頁面裏面

 

 

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

Mint UI教程彙總：

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