博客

vue服务器代理proxyTable配置如何解决跨域

  • Post category:http

当我们使用Vue.js开发SPA（单页应用程序）时，我们通常会通过Vue CLI工具进行快速搭建，其内置了Webpack打包工具和开发服务器，这使得我们可以快速地进行开发和调试。但是在开发中，经常会遇到浏览器跨域问题，因为Vue的开发服务器和前端请求的后台接口通常是不在同一域名下的，这时候就需要借助Vue的proxyTable属性来进行服务器代理配置，解决此问题。

proxyTable的配置是在config/index.js文件中的dev对象中进行的。

dev: {
    /*省略其他配置*/
    proxyTable: {
      '/api': { // 将这个地方与你的后台接口路径联系起来
        target: 'http://localhost:3000', // 不同的请求发送至不同的后台地址
        changeOrigin: true, // 改变源
        pathRewrite: {
          '^/api': '/'
        }
      }
    }
  }

以上代码说明了当我们在Vue项目中访问/api路径时，开发服务器将会把这个请求转发给 http://localhost:3000，并且保持原请求中的路径信息，从而使我们的请求不再跨域，进而代替Axios等包进行跨域请求配置。

示例一：
– 后台api路径：http://localhost:3000/users
– 前端api路径：/api/users

当我们在前端发起以下请求：

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

则代理服务器会自动将该请求转发至后台地址http://localhost:3000/users处理。

示例二：
– 后台api路径：http://localhost:3000/news
– 前端api路径：/news

当我们在前端发起以下请求：

axios.get('/news').then(res => {
  console.log(res.data)
})

则该请求不在proxyTable拦截范围内，依然会产生跨域问题。因此为了防止出现漏网之鱼，我们应该在所有与后台交互的地方都要小心判断是否需要proxyTable代理。

总结：
通过上述过程和示例，我们了解到了如何解决Vue开发中的跨域请求问题。使用proxyTable代理功能，我们可以轻松地避免跨域问题，并且简化了我们的请求代码，提高了开发效率。

Tags: