Question

在服务器渲染中，代理可以正常工作。请求将转到custom-server.com/v1/places。但在浏览器中，请求将发送至current-domain.com/api/places

为什么它在浏览器中不起作用？代理仅在服务器端工作？请帮助。

我有NuxtJS配置：

require('dotenv').config();

export default {
    mode: 'universal',
    buildModules: [],
    modules: [
        '@nuxtjs/axios',
        '@nuxtjs/proxy',
        ['@nuxtjs/dotenv', { systemvars: true }],
    ],

    axios: {
        proxy: true,
        credentials: true,
    },
    proxy: {
        '/api': {
            target: "http://custom-server.com",
            pathRewrite: {
                '^/api' : "/v1"
            },
            changeOrigin: true,
        },
    },
}

我的组件

<script>
export default {
    data() {
        return{
            placesServer:false,
            placesBrowser:false,
        }
    },
    async asyncData ({ $axios }) {
        // Here is all is fine
        let response = await $axios.get("/api/places");
        return {
            placesServer:response.data,
        };
    },
    created(){
        if (process.browser){
            // Here is not working =(
            this.$axios.get("/api/places").then((response)=>{
                this.placesBrowser = response.data;
            });
        }else{
            // Here is working fine!
            this.$axios.get("/api/places").then((response)=>{
                this.placesBrowser = response.data;
            });
        }
    }
}
</script>

Answer 1

如果您的 API 网址是 =http://custom-server.com/api/v1/api/places

需要关注 Given 代码的变化，需要了解 vuejs/Nuxtjs 的生命周期

export default {
    mode: 'universal',
    buildModules: [],
    modules: [
        '@nuxtjs/axios',
        '@nuxtjs/proxy',
        ['@nuxtjs/dotenv', { systemvars: true }],
    ],

    axios: {
        proxy: true,
    },
    proxy: {
        '/api': {
            target: "http://custom-server.com",
            pathRewrite: {
                '^/api' : ""
            },
        },
    },
}

并且 created() 钩子中的给定代码可能需要更改另一个生命周期。或需要在 method() 内部移动或根据您的要求移动。

Answer 2

将 prefix 添加到 nuxt.config.js 中的 axios 对我有帮助

axios: {
 proxy: true,
 credentials: true,
 prefix: '/api/'
}

为什么代理不能在浏览器（NuxtJS + Axios）中工作？

2 个答案: