javascript - 为什么代理在浏览器中不起作用(NuxtJS+Axios)？

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 URL = http://custom-server.com/api/v1/api/places需要跟随给定代码的变化并且需要理解 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() Hook 中的给定代码可能需要更改另一个生命周期。或需要在 method() 内部移动或根据需要移动。