VUE-cli跨域——proxyTable

前言

在Web开发中，浏览器有同源策略的限制，即不是同源的脚本不能被访问，也即无法跨域名访问。因此，为了实现跨域，前后端都有很多解决的办法。本文将介绍在webpack下Vue中解决跨域问题的两种方法：增加ProxyTable配置以及根据开发和生产环境配置不同地址。

增加ProxyTable配置

在VUE-cli项目中，可以通过在vue.config.js文件中配置proxyTable来解决跨域问题。具体步骤如下：

1. 在vue.config.js文件中添加如下代码：

module.exports = {
  devServer: {
    proxyTable: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

2. 在api.js文件中添加接口地址：

const api = {
  login: '/api/login',
  logout: '/api/logout',
  getUserInfo: '/api/getUserInfo'
}

export default api

3. 在组件中使用接口地址：

import api from '@/api'

export default {
  methods: {
    login() {
      this.$http.post(api.login, {
        username: 'admin',
        password: '123456'
      }).then((res) => {
        console.log(res)
      })
    }
  }
}

根据开发和生产环境配置不同地址

在开发环境和生产环境中，接口地址可能不同。因此，我们需要根据不同的环境配置不同的地址。具体步骤如下：

1. 在vue.config.js文件中添加如下代码：

module.exports = {
  configureWebpack: {
    devServer: {
      proxyTable: {
        '/api': {
          target: 'http://localhost:8080',
          changeOrigin: true,
          pathRewrite: {
            '^/api': ''
          }
        }
      }
    }
  },
  build: {
    productionSourceMap: false,
    assetsPublicPath: './',
    productionGzip: false,
    productionGzipExtensions: ['js', 'css']
  }
}

2. 在api.js文件中添加如下代码：

const api = {
  login: process.env.VUE_APP_API_BASE_URL + '/login',
  logout: process.env.VUE_APP_API_BASE_URL + '/logout',
  getUserInfo: process.env.VUE_APP_API_BASE_URL + '/getUserInfo'
}

export default api

3. 在.env.development文件中添加如下代码：

VUE_APP_API_BASE_URL=http://localhost:8080

4. 在.env.production文件中添加如下代码：

VUE_APP_API_BASE_URL=https://www.example.com

总结

本文介绍了两种在VUE-cli项目中解决跨域问题的办法，希望对大家有所帮助。