Vue SSR 项目 Nuxt.js 框架之《反向代理：prox

# 前言

nuxt是服务端渲染，也是服务端发起的请求，所以不会出现跨域问题。但手动点击链接或是按钮时，这时获得数据就是客户端去请求数据，就会出现跨域问题。同Vue一样，需要访问跨域资源时也是需要配置代理，具体如何配置我们来看下。

# 反向代理

想要解决跨域请求问题也很简单，就是利用proxy模块，如下：

安装

npm install @nuxtjs/proxy  --save

nuxt.config.js 配置

export default{
    modules:['@nuxtjs/axios', '@nuxtjs/proxy'],
    axios:{
        proxy: true, // 开启反向代理
        // baseURL: '' 
        // 这里可以通过 progress.env.BROWSER_BASE_URL 或 progress.env.BASE_URL
        // 或其他变量 progress.serve 等用来判断不同环境使用不同的基础地址
    },
    proxy:{
        '/api':{
            target: 'http://xxx.xxx.xxx.xxx',  // 代理转发的地址
            changeOrigin: true,
            pathRewrite:{
                '^/api': ''
            }
        }
    }
}

配置好以上内容，重启后就可以请求跨域资源了 ~~ 欢迎留言 ~~