如何使用vuex和axios在共享托管中进行api调用？

问题描述

我对vue和vuex完全陌生。我的项目在本地可以正常运行，但是当我尝试在服务器上运行它时，无论如何尝试，我都无法更改API的请求URL。

当我尝试登录服务器时，我看到https://developers.thegraphe.com/api/v1/user/login为请求网址，而正确的路由为https://developers.thegraphe.com/member-directory/api/v1/user/login

我的.env文件具有以下定义

APP_URL=https://developers.thegraphe.com/member-directory
BASE_URL=https://developers.thegraphe.com/member-directory
API_URL=https://developers.thegraphe.com/member-directory

我在config / app.PHP中将我的应用程序网址设置为

'url' => env('APP_URL',"https://developers.thegraphe.com/member-directory"),

我正在这样进行api调用

const state = {
    user: {},errors: {}
};
const getters = {};
const actions = {
    getUser({ commit }) {
        axios.get("/user/current")
            .then(response => {
                commit('setUser',response.data);
            })
    },loginUser({ commit },user) {
        axios.post("/user/login",{
            email: user.email,password: user.password
        })
            .then(response => {
                if (response.data.access_token) {
                    //save token
                    localStorage.setItem("user_token",response.data.access_token)
                    console.log(response.data);
                    // window.location.replace("/app");
                } else {
                    commit('setError',response.data.errors);
                }
            })
    },registerUser({ commit },user) {
        axios.post("/user/register",{
            IM_no: user.IM_no,name: user.name,dob: user.dob,phone: user.phone,email: user.email,password: user.password,password_confirmation: user.password_confirmation,gender: user.gender,designation: user.designation,classification: user.classification,company: user.company,blood_group: user.blood_group,})
            .then(response => {
                if (response.data.access_token) {
                    //save token
                    localStorage.setItem("user_token",response.data.access_token)
                    console.log(response.data);
                    window.location.replace("/app");
                }
                else {
                    commit('setError',response.data.errors);
                }
                // console.log(response.data.errors);
            })
            .catch(error => {
                console.log(error);
            })
    },logoutUser() {
        localStorage.removeItem("user_token");
        window.location.replace('/login');
    },getUsers() {
        axios.get("/user/all");
    }
};
const mutations = {
    setUser(state,data) {
        state.user = data;
    },setError(state,data) {
        state.errors = data;
    }
};

export default {
    namespaced: true,state,getters,actions,mutations,}

我的主要app.js文件

require('./bootstrap');

window.Vue = require('vue');

import 'material-design-icons-iconfont/dist/material-design-icons.css';
import Vuetify from '../plugins/vuetify';
import axios from "axios";

axios.defaults.baseURL = "https://developers.thegraphe.com/member-directory/api/v1"

Vue.config.productionTip = false;

import store from './store';
import router from './routes';

我还尝试在这样的单独文件中使用axios.create

import axios from 'axios'
export default axios.create({
    baseURL: 'http://developers.thegraphe.com/member-directory/api/v1',timeout: 5000,})

并在currentUser.js中进行这样的api调用

import myApi from '../../myApi'
...
myApi.get("/user/current")

我尝试对axios.post("https://developers.thegraphe.com/member-directory/api/v1/user/login/")之类的url值进行硬编码，但无法正常工作。

即使我删除了服务器中的currentUser.js文件，也要在单击登录按钮时将api调用到错误的url。

我也尝试清除浏览器缓存，但徒劳无功。

我一直在努力解决此问题。任何帮助表示赞赏。谢谢。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）