深度采坑指南之vue-cli代理跨域proxy解决跨域限制

由于我是用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,
        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
          }
        })
    }


阅读更多
换一批

没有更多推荐了,返回首页