由於我是用vue-cli建立的專案，訪問介面純在跨域問題，本地伺服器的預設地址為http://localhost:8080/，伺服器端的域名不是這個，就會造成跨域訪問，axios不支援jsonp，所以我們可以利用http-proxy-middleware中介軟體做代理。

使用axios直接訪問會報出以下錯誤

Failed to load http://m.xusong.com/api/NEWS/getNews.json?page=1&pageSize=10: No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'http://localhost:8080' is therefore not allowed access.

 

Uncaught (in promise) Error: Network Error
    at createError (webpack-internal:///./node_modules/axios/lib/core/createError.js:16)
    at XMLHttpRequest.handleError (webpack-internal:///./node_modules/axios/lib/adapters/xhr.js:87)

這類的意思就是禁止跨域

vue中程式碼

getNewsList() {
      const url = 'http://xxxx.com/api/NEWS/getNews.json?page=1&pageSize=10'
      axios.get(url)
        .then((res) => {
          res = res.data
          if (res.state) {
            this.news = res.result
          }
        })
    }

 

那麼該如何解決呢？

在webpack配置一下proxyTable就OK了

訪問檔案config/index.js

在dev{}里加入以下內容

proxyTable: {
      '/api': {
        target: 'http://xxx.com:8080', // 你要代理的域名和埠號，要加上http
        changeOrigin: true,//如果需要跨域那麼需要加上引數changeOrigin:true
        pathRewrite: {
          '^/api': '/api' // 這裡用‘/api’代替target裡面的地址，元件中呼叫介面時直接用api代替 比如我要呼叫'http://xxx.com:8080/api/NEWS/getNews.json?page=1&pageSize=10
'，直接寫‘/api/NEWS/getNews.json?page=1&pageSize=10’即可
        }
      }

 

示例程式碼：

getNewsList() {
      const url = '/api/NEWS/getNews.json?page=1&pageSize=10'
      axios.get(url)
        .then((res) => {
          res = res.data
          if (res.state) {
            this.news = res.result
          }
        })
    }

感謝分享https://blog.csdn.net/u012699754/article/details/80402926