VUE2.0开发环境解决跨域问题

发表时间： 2021-03-08 13:46:30 | 浏览次数：

原来快一年没发文章了，近一年懈怠了。

最近自学了VUE2.0，所以今天跟大家分享一下，我学VUE时遇到的问题之一：跨域问题。

众所周知，VUE是前后端分离的，所以难免会遇到跨域问题。下面看看是怎么解决的：

其实VUE也考虑到这个问题，已提供了解决方案，我们只需要简单配置一下前端代理即可。

1.在VUE项目的跟目录下找到vue.config.js文件（此文件为自己手动创建），添加以下代码：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost',
        // 允许跨域
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

“/api”这个名字可自定义

2.使用axios发送请求

axios.get('/api/data.php').then((res) => {
　　console.log(res)
}).catch((err) => {
　　console.log(err)
})

3.请求地址说明：

 a.后端的访问地址：http://localhost，我们直接在浏览器上输入http://localhost/data.php就可以访问data.php获取到的数据；
 b.VUE项目的访问地址：http://localhost:8080，那么VUE使用axios请求后端data.php时，请求链接就会被重写为http://localhost:8080/api/data.php，从而解决在本地开发环境下调接口出现的跨域问题。