dist 之后的 nuxtjs/proxy url axios

Posted 2023-02-22

【中文标题】dist 之后的 nuxtjs/proxy url axios

【英文标题】：nuxtjs/proxy url axios after dist

【发布时间】：2020-06-14 19:00:05

【问题描述】：

当我在服务器渲染中输入 yarn dev 时，代理工作正常。从 API 站点 api.server.com/api 获取数据

但是在yarn generate axios 请求之后调用了自己的服务器 current.example.com/api。

为什么它在 dist html 中不起作用？ 代理是否仅在服务器端工作？请帮忙。

我有 NuxtJS 配置：

/*
 ** Nuxt.js modules
   */
  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/proxy'
  ],
  axios: 
    proxy: true // Can be also an object with default options
  ,

  proxy: 
    '/api/': 
      target: 'http://api.server.com/api',
      pathRewrite: '^/api/': ''
    ,
    changeOrigin: true
  ,

插件axios.js

import axios from 'axios'

export default axios.create(
  baseURL: '/api/',
  responseType: 'json'
)

我在这里调用了该 API，如下所示 index.vue

<script>
import axios from '~/plugins/axios'

export default 
   mounted() 
    this.loaded();
  ,
  methods: 
    loaded()
        const location =  axios.get('/contact/contact_session.php').then((response) => 
          console.log(response);
        ).catch((err) => 
        );
    ,
  

</script>

【问题讨论】：

使用 Node.js 服务器时，它在 SPA 模式下工作

【参考方案1】：

proxy.js 模块仅在开发环境中工作，在生产环境中，您必须配置您的网络服务器，最好是 nginx，例如从路径“/api/...”获取您的请求的代理和将其重定向到您需要的服务器。

【讨论】：

您能否详细解释一下。我是 nuxt 的新手，所以这有点令人困惑。