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

62 阅读 0 评论 41 点赞

我是靠谱客的博主活力飞机，最近开发中收集的这篇文章主要介绍深度采坑指南之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
          }
        })
    }