Nuxt.js中配置代理解决跨域

如果调用后台接口有跨域问题，需要对请求地址进行代理转发才可解决。

一、跨域问题

     我们知道在vue-cli中配置代理很方便，只需要在vue.config.js中找到proxyTable添加即可,而在nuxt中同样需要修改nuxt.configjs 配置文件，前提要安装了@nuxtjs/axios。参考（https://axios.nuxtjs.org/）

二、解决办法

1. 在 nuxt.config.js 中开启代理配置:

    modules: [ // 数组
        '@nuxtjs/axios' // 引用模块
    ],
    axios: { // 对象
        proxy: true // 开启代理
        prefix: '/api' // 请求前缀
    }, proxy: { // 对象
         // 将 /api 替换为 '', 然后代理转发到 target 指定的 url
        '/api': {
            target: 'http://mengxuegu.com:7300/mock/5ea4394b2a2f716419f893be/blog-web',
            pathRewrite: { '^/api': '' }
        }
    }
}

pathRewrite 选项(重写地址)
/api/将被添加到API端点的所有请求中。可以使用pathRewrite选项删除。
因为在 ajax的url中加了前缀/api而原本的接口是没有这个前缀的。
所以需要通过pathRewrite来重写地址，将前缀/api转为/或者是 '' 。
如果本身的接口地址就有/api这种通用前缀，就可以把 pathRewrite删掉

2. 在 nuxt/pages/index.vue修改请求接口/test ：

    export default {
         // 方式2 请求数据接口 async await
        async asyncData({$axios, error}) {
            try {
                const response = await $axios.$get('/test')
                return {data: response.data.data}
            } catch (e) {
                error({statusCode: 404, message: '未找到请求资源。'})
            }
        },
    }