Question

我通过使用以下教程来学习nuxt

https://scotch.io/tutorials/implementing-authentication-in-nuxtjs-app

在本教程中，它表明了

axios: {
  baseURL: 'http://127.0.0.1:3000/api'
},

它指向本地主机，这对我的开发来说不是问题，

但是在进行部署时，如何根据浏览器URL更改URL，

如果系统在局域网中使用，它将为192.168.8.1:3000/api

如果系统在外面使用，它将为example.com:3000/api

另一方面，当前我正在使用adonuxt（adonis + nuxt），它们都在同一端口（3000）上监听。

将来，我可能会将其分为服务器（3333）和客户端（3000）

因此api链接将是

localhost:3333/api

192.168.8.1:3333/api

example.com:3333/api

如何基于浏览器和交换机端口实现动态api网址？

Answer 1

迟来的贡献，但这个问题和答案有助于获得这种更简洁的方法。我已经为 localhost 测试了它并部署到 Netlify 的分支 url。仅使用 Windows Chrome 进行了测试。

在客户端模式下，windows.location.origin 包含我们需要的 baseURL。

# /plugins/axios-host.js
export default function ({$axios}) {
  if (process.client) {
    $axios.defaults.baseURL = window.location.origin
  }
}

将插件添加到 nuxt.config.js。

# /nuxt.config.js
...
  plugins: [
     ...,
    "~/plugins/axios-host.js",
  ],
...

Answer 2

nuxt.config.js中不需要baseURL。

首先创建一个plugins / axios.js文件（看here），然后这样写。

streamedRes.stream
    ...
    .expand((e) => e['results'])
    .map((data) => Termmodel.fromJson(data))
    .pipe(streamController);

Answer 3

这个问题已经存在一年半了，但是我想为第二部分回答任何有帮助的人，这是在服务器端完成的。

我存储了一个我想作为Cookie调用的服务器URL的引用，以便服务器可以确定要使用的URL。我使用cookie-universal-nuxt并做类似$cookies.set('api-server', 'some-server')的简单操作，然后使用$cookies.get('api-server')拉取cookie值。将该cookie值映射到URL，然后可以使用Axios拦截器执行类似的操作：

// plguins/axios.js
const axiosPlugin = ({ store, app: { $axios, $cookies } }) => {
  $axios.onRequest ((config) => {
    const server = $cookies.get('api-server')

    if (server && server === 'some-server') {
      config.baseURL = 'https://some-server.com'
    }

    return config
  })
}

当然，您也可以将URL存储在cookie本身中，但是最好将允许的URL列入白名单。

别忘了也启用该插件。

// nuxt.config.js
plugins: [
  '~/plugins/axios',

由于cookie是“通用的”，因此涵盖了客户端和服务器端

Nuxt Axios动态网址

3 个答案: