Vue webpack项目配置请求接口，修改代理，解决跨域问题

在写项目的时候，经常会遇到一些请求和跨域问题。

比如接口请求不到：Uncaught (in promise) Error: Request failed with status code 404 或者 http://localhost:8081/list 404 (Not Found) ，

跨域问题：Access to XMLHttpRequest at 'loaclhost:3000/list' from origin 'http://localhost:8081' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https. 等。

这时候我们可以修改一些 Vue 项目的配置，添加代理，解决接口请求不到或者跨域问题。

找到项目文件夹下的 /config/index.js 文件，添加如下配置：

proxyTable: { // 设置代理
  '/api': {
    target: 'http://localhost:3000',  // 后台接口地址
    ws: true,        // 如果要代理 websockets，配置这个参数
    secure: false,  // 如果是https接口，需要配置这个参数
    changeOrigin: true,  // 是否跨域
    pathRewrite: {
      '^/api': ''
    }
  }
},

这样就可以请求成功了。