如何为axios设置URL？

Question

我正在使用nuxtjs从客户端向laravel服务器创建请求。但发送的网址请求是http://localhost:3000/undefined/api/auth/signin，而不是http://127.0.0.1:8000/api/auth/signin。我知道这是一个简单的问题，但我无法弄清楚它如何与nuxt和laravel一起使用]

。env文件APP_URL =http://127.0.0.1:8000/CLIENT_URL = http://localhost:3000/

import axios from 'axios'
const API_URL = process.env.APP_URL +'/api/'

...

  axiosPost(urlSuffix, data) {
    return axios.post(API_URL + urlSuffix, data, {
      useCredentials: true,
      headers: authHeader()
    })
    .then(response => {
      return response.data
    })
...

Answer 1

使用

axios.defaults.baseURL = 'http://127.0.0.1:8000/'

axiosPost(urlSuffix, data) {
return axios.post(urlSuffix, data, {
  useCredentials: true,
  headers: authHeader()
})
.then(response => {
  return response.data
})

Answer 2

如果使用laravel-mix，（通过混合编译的React，Vue甚至Vanilla JS文件）：

在您的Javascript文件中：

import axios from 'axios'
const API_URL = process.env.MIX_APP_URL +'/api/'

// rest of your code...

将其添加到.env文件中：

MIX_APP_URL="${APP_URL}"

然后通过npm run prod或npm run dev或npm run watch重新编译脚本。无论您需要什么。

如果在blade文件中使用，则无法在其中访问process.env。而是添加以下内容：

const API_URL = {{url('/')}} +'/api/'

[如果您使用独立的nuxt.js：加入nuxt.config.js

export default {
  env: {
    baseUrl: process.env.BASE_URL || 'http://localhost:3000'
    appUrl: process.env.APP_URL,
  }
}

并且在您的js文件中：

import axios from 'axios'

axios.create({
  baseURL: process.env.appUrl
});

// rest of your code