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

由于我是用vue-cli创建的项目，访问接口纯在跨域问题，本地服务器的默认地址为http://localhost:8080/，服务器端的域名不是这个，就会造成跨域访问，axios不支持jsonp，所以我们可以利用http-proxy-middleware中间件做代理。

使用axios直接访问会报出以下错误

Failed to load /api/NEWS/?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/:16)
    at  (webpack-internal:///./node_modules/axios/lib/adapters/:87)

这类的意思就是禁止跨域

vue中代码

getNewsList() {
      const url = '/api/NEWS/?page=1&pageSize=10'
      (url)
        .then((res) => {
          res = 
          if () {
             = 
          }
        })
    }

那么该如何解决呢？

在webpack配置一下proxyTable就OK了

访问文件config/

在dev{}里加入以下内容

proxyTable: {
      '/api': {
        target: ':8080', // 你要代理的域名和端口号，要加上http
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/api' // 这里用‘/api’代替target里面的地址，组件中调用接口时直接用api代替 比如我要调用':8080/api/NEWS/?page=1&pageSize=10
'，直接写‘/api/NEWS/?page=1&pageSize=10’即可
        }
      }

示例代码：

getNewsList() {
      const url = '/api/NEWS/?page=1&pageSize=10'
      (url)
        .then((res) => {
          res = 
          if () {
             = 
          }
        })
    }