Nuxt Axios 动态网址答案

【问题标题】：Nuxt Axios Dynamic urlNuxt Axios 动态网址
【发布时间】：2019-05-19 22:44:40
【问题描述】：

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

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

在教程中，它表明

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

是指向localhost，对我的开发来说不是问题，

但是在部署的时候，如何根据浏览器的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 url？

【问题讨论】：

您可以使用 localhost 地址访问它，因为您在 localhost 上运行它。当您从外部机器访问它时，您可以使用您的 IP。请说明您想要实现的目标。
@DezsoGabos 我想根据浏览器 url 更改 axios api url（可能使用不同的端口）
动态 api url 不是关于更改基本 URL。您需要基本了解主机名是什么，IP 地址如何映射到某个主机名，以及 DNS 服务器如何解析这些。如果您想从外部访问某个主机名，可以将 IP 和主机名对添加到该机器的主机配置中。

标签： proxy axios nuxt.js

【解决方案1】：

nuxt.config.js 中不需要 baseURL。

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

export default function({ $axios }) {
  if (process.client) {
    const protocol = window.location.protocol
    const hostname = window.location.hostname
    const port = 8000
    const url = `${protocol}//${hostname}:${port}`
    $axios.defaults.baseURL = url
  }

【讨论】：

我们如何在服务器端做到这一点？

【解决方案2】：

一个较晚的贡献，但这个问题和答案有助于获得这种更简洁的方法。我已经针对 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",
  ],
...

【讨论】：

【解决方案3】：

这个问题已经一年半了，但我想为任何觉得它有帮助的人回答第二部分，即在服务器端进行。

我存储了对我想调用的服务器 URL 的引用作为 Cookie，以便服务器也可以确定要使用哪个 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 是“通用的”

【讨论】：