A series of problems transmit data request VUE ---

Use vue request for data, the first consideration is the package request method request.js

import axios from 'axios'
import Qs from 'qs'

// Create an instance axios 
const-Service = axios.create ({
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded',    
    // 'content-type': 'application/json;charset=UTF-8',
    // 'x-token': 'one' 
  },
  // baseURL: 'http://dianphp.fyz.com',
  baseURL: '/',
  method: 'post',
  transformRequest:[function(data){
    return Qs.stringify(data)
  }],
  withCredentials: true,
  timeout: 5000
})

// add request interceptor 
service.interceptors.request.use (config => {
   // before sending a request to do something, for example, provided token 
  // config.headers [ 'token'] = 'token'; 
  config.headers [ 'X-token'] = 'xxxxxxxxxxxxxxxxxxx' ;
   return config;
}, Error => {
   // do something when the request error 
  return Promise.reject (error);
});

// addition response blocker 
service.interceptors.response.use (Response => {
  RES const = response.data;
   // // 200 if the returned status is not active on the error 
  // IF (! res.state = 200) { 
  //    return Promise.reject (res.message || 'error') 
  // } 
  return RES;
}, Error => {
     return Promise.reject (error.response.data); // returns the error message returned interface 
})

export default service

It should be noted that baseURL, do not write the address of the server, if you configure the server's address cross-domain error will be reported here

Here is to solve the problem of cross-domain configuration proxyTable in dev in the config directory:

proxyTable: {
     '/ fire' : {
        target: 'http://dianphp.fyz.com',
        changeOrigin: true,
        Pthriawrite: {
            '^ / Fire': '/ api'
        }
    }
},

Second question OPTIONS cross-domain exists in the development process, I am using thinkphp, routing problems may be thinkphp, the time required to configure options configuration request

return [
    // 'api/user/login' => 'api/user/login',
    'api/user/login' => ['api/user/login',['method' => 'post|get|options']],
];

Then add request parameters inside header:

public function login(){
    header('Access-Control-Allow-Origin: *');
    $list = $this->getlayuilist();
    return $list;
}

request.js use:

1, the new api / role.js

role.js

import request from '@/utils/request'

class RoleService{
  getRoutes (data) {
    return request({
      url: '/api/user/login',
      method: 'post',
    })
    // return request({
    //   url: '/api/user/login',
    //   method: 'post',
    //   data:data
    // })
  }

  getRoles () {
    return request({
      url: '/roles',
      method: 'get'
    })
  }

  addRole(data) {
    return request({
      url: '/role',
      method: 'post',
      data
    })
  }

  updateRole(id, data) {
    return request({
      url: `/role/${id}`,
      method: 'put',
      data
    })
  }

  deleteRole(id) {
    return request({
      url: `/role/${id}`,
      method: 'delete'
    })
  }
}

export default new RoleService()

Specific components used:

import roleApi from '@/api/role'

Instructions:

roleApi.getRoutes().then(res => {
  console.log(res);
  the console.log ( 'request success' );
})