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接口寫在請求裏

 

 

解決辦法：設置代理，利用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

---

原文做者：祈澈姑娘90後前端妹子，愛編程，愛運營，文藝與代碼齊飛，魅力與智慧共存的程序媛一枚。堅持總結工做中遇到的技術問題，堅持記錄工做中所所思所見，對於博客上面有不會的問題，歡迎加入編程微刊qq羣：260352626