代理 Nuxt

Nuxt.js 是一个基于 Vue.js 的服务端渲染框架，它能够让你开发简单而强大的应用。

然而，在前端开发中，有时候你需要跨域请求数据或者是解决 CORS 的问题，这时候就可以使用代理来解决。

Nuxt.js 自带了代理的功能，可以在 nuxt.config.js 文件中进行配置。

如何配置代理

在 nuxt.config.js 文件中配置代理，只需要在 modules 节点下添加 @nuxtjs/proxy 模块即可。

export default {
  modules: [
    // Simple usage
    '@nuxtjs/proxy'
  ],

  // Proxy module configuration
  proxy: {
    '/api/': 'http://localhost:3000',
    '/socket.io/': 'http://localhost:3000',
    '/auth/': { target: 'http://localhost:3000', pathRewrite: { '^/auth/': '/api/auth/' } }
  }
}

这里的配置中，表示将 /api/、/socket.io/ 和 /auth/ 三个目录的请求代理到 http://localhost:3000 的服务器上，其中 /auth/ 的请求会先被重写到 /api/auth/ 再代理到服务器上。

如何使用代理

在 Vue.js 中使用 axios 技术可以轻松实现代理：

export default {
  async asyncData ({ $axios }) {
    const res = await $axios.get('/api/posts')
    return { posts: res.data }
  }
}

这里的 asyncData 方法使用 axios 发送 GET 请求 /api/posts，代理到 http://localhost:3000/api/posts 接口上。

总结

Nuxt.js 的代理功能非常强大，能够轻松解决跨域请求和 CORS 的问题，使用起来也非常简单，可以让前端开发变得更加顺畅。