没有发送数据

[luoxulx]

说明：后端：laravel5.5 node : 8.12.0 vue-element-admin是下载的releases3.9.2 问题：瞅着文档学了下，第一步登录就我就嗝屁了：调用登录接口，没有向后端发送数据，后端配置允许跨域，这跟跨域没关系的； 详细如图：

postman 测试如图：

相关代码： api/login.js:

export function loginByEmail(email, password) {
  const loginData = {
    email,
    password
  }
  return request({
    url: '/auth/login',
    method: 'post',
    loginData
  })

request.js:

axios.defaults.headers['Content-Type'] = 'application/json;charset=UTF-8'
const service = axios.create({
  baseURL: process.env.BASE_API, // api 的 base_url
  timeout: 5000 // request timeout
})

// response interceptor部分的修改
response => {
    var dgo_token = response.headers.authorization
    if (dgo_token) {
      setToken(dgo_token)
    }
    return response
  },
...
...

登录部分代码:

    public function login(Request $request)
    {
        $params['email'] = $request->post('email');
        // 此处 var_dump($_POST); 都是什么数据都莫有  o(╥﹏╥)o
        if (trim($params['email']) == '') {
            return response()->json(['message'=>'email is required !'], 400);
        }

        $params['password'] = $request->post('password');
        if (trim($params['password']) == '') {
            return response()->json(['message'=>'password is required !'], 400);
        }

        if ($token = Auth::guard('api')->attempt($params)) {
            return response()->json(['dgo_token'=>$token, 'csrf_token'=>csrf_token() === null ? str_random() : csrf_token()]);
        }else {
            return response()->json(['message'=>'email or password is incorrect'], 401);
        }
    }

• 我不太懂前端，我是写后台接口的

• 最近想把以前的后台整理了下，全部走接口，摒弃之前的页面跳转

• 希望各位大佬能抽出一支烟的时间帮忙瞅瞅

• 小弟在此谢过各位大佬

[PanJiaChen]

https://panjiachen.github.io/vue-element-admin-site/zh/guide/essentials/mock-api.html#mockjs

所有的请求都被mockjs拦截了，你移除就好了。

[luoxulx]

import Vue from 'vue'

import Cookies from 'js-cookie'

import 'normalize.css/normalize.css' // A modern alternative to CSS resets

import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

import '@/styles/index.scss' // global css

import App from './App'
import router from './router'
import store from './store'

import i18n from './lang' // Internationalization
import './icons' // icon
import './errorLog' // error log
import './permission' // permission control

import * as filters from './filters' // global filters

Vue.use(Element, {
  size: Cookies.get('size') || 'medium', // set element-ui default size
  i18n: (key, value) => i18n.t(key, value)
})

// register global utility filters.
Object.keys(filters).forEach(key => {
  Vue.filter(key, filters[key])
})

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  store,
  i18n,
  render: h => h(App)
})

我一下载 下来，第一个删除的就是main.js里的mock引入o(╥﹏╥)o

[luoxulx]

如图二，发起了请求，只是没有带上数据，vue：9527端口，php：7001端口

[PanJiaChen]

不好意思看错了。

不是报400的错了么。 400你自己后端debug一下不就知道了。

你所说的没带上数据，我从你的截图看不出，我不知道你怎么写的。

[luoxulx]

状态码我随便写的。。。 debug没有任何数据，浏览器也没有request body，只有一个请求 后端debug结果:

[luoxulx]

麻烦大佬帮忙瞅瞅图一，/api/login.js中的登录方法我是否写错啦o(╥﹏╥)o

[PanJiaChen]

所以你前端怎么写的还是没截图啊

[luoxulx]

我模糊的觉得我应该是把哪里改错啦，但就是找不到根源问题，一下是相关代码： request.js:

import axios from 'axios'
import { Message } from 'element-ui'
import store from '@/store'
import { getToken, setToken } from '@/utils/auth'

// create an axios instance
axios.defaults.headers['Content-Type'] = 'application/json;charset=UTF-8'
const service = axios.create({
  baseURL: process.env.BASE_API, // api 的 base_url
  timeout: 5000 // request timeout
})

// request interceptor
service.interceptors.request.use(
  config => {
    // Do something before request is sent
    if (store.getters.token) {
      // 让每个请求携带token-- ['X-Token']为自定义key 请根据实际情况自行修改
      config.headers['token'] = getToken()
    }
    console.log(config)
    return config
  },
  error => {
    // Do something with request error
    console.log(error) // for debug
    Promise.reject(error)
  }
)
// response interceptor
service.interceptors.response.use(
  response => {
    var dgo_token = response.headers.authorization
    if (dgo_token) {
      setToken(dgo_token)
    }
    return response
  },
  error => {
    console.log('err' + error) // for debug
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)
export default service

main.js

import Vue from 'vue'

import Cookies from 'js-cookie'

import 'normalize.css/normalize.css' // A modern alternative to CSS resets

import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

import '@/styles/index.scss' // global css

import App from './App'
import router from './router'
import store from './store'

import i18n from './lang' // Internationalization
import './icons' // icon
import './errorLog' // error log
import './permission' // permission control

import * as filters from './filters' // global filters

Vue.use(Element, {
  size: Cookies.get('size') || 'medium', // set element-ui default size
  i18n: (key, value) => i18n.t(key, value)
})

// register global utility filters.
Object.keys(filters).forEach(key => {
  Vue.filter(key, filters[key])
})

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  store,
  i18n,
  render: h => h(App)
})

/src/views/login/index.vue 中请求登录方法：

handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          this.$store.dispatch('loginByEmail', this.loginForm).then(() => {
            this.loading = false
            this.$router.push({ path: this.redirect || '/' })
          }).catch(() => {
            this.loading = false
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
...
...

/api/login.js:

export function loginByEmail(email, password) {
  const loginData = {
    email,
    password
  }
  return request({
    url: '/auth/login',
    method: 'post',
    loginData
  })
}

config/dev.env.js

module.exports = {
  NODE_ENV: '"development"',
  ENV_CONFIG: '"dev"',
  BASE_API: '"http://127.0.0.1:7001/api/"'
}

[PanJiaChen]

export function loginByEmail(email, password) {
  const loginData = {
    email,
    password
  }
  return request({
    url: '/auth/login',
    method: 'post',
+   data:loginData
  })
}

[luoxulx]

干得漂亮！已点赞