Vue如何在使用nuxt代理和nuxt公理时修复404错误

Question

在我的vue-app中，我与@nuxtjs/axios一起使用@nuxtjs/proxy，但是由于某些原因我不知道，在调用api时总是会得到一个Request failed with status code 404 -error。

这是我的nuxt.config.js

modules: [
 '@nuxtjs/axios',
 '@nuxtjs/proxy'
],

axios: {
  proxy: true,
},

proxy: {
  "/api": {
    target: "https://url-to-api.com/api",
    pathRewrite: { "^/api/": "" },
  } 
},

然后在我的vue-component里

created(){
  const { data } = await this.$axios.get(
    `/api/products/all`
  )
  ...
}

当我检查“网络”选项卡时，请求如下：

https://mypage.com/api/products/all

该请求返回如上文所述的Request failed with status code 404

我做错了什么？

Answer 1

nuxt版本: 2.15.8

试试这个：

// nuxt.config.js

axios: {
  baseURL: '/',
  browserBaseURL: '/',
  proxy: true,
},

proxy: {
  '/api/': {
    target: process.env.BASE_URL,
    pathRewrite: {'^/api/': ''},
  },
},

publicRuntimeConfig: {
  axios: {
    browserBaseURL: process.env.BROWSER_BASE_URL,
  },
},

privateRuntimeConfig: {
  axios: {
    baseURL: process.env.BASE_URL,
  },
},

在你的部分：

created(){
  const { data } = await this.$axios.get(
    `products/all`
  );
}

在.env中

BROWSER_BASE_URL=/api/
BASE_URL=https://url-to-api.com/api/

对我来说很管用。