vue---封裝request.js解決跨域問題【再一次完美解決】

最近在用VUE開發www.dianphp.com后台管理系統，再次遇到vue使用axios,在進行跨域請求的時候，遇到了一些分裝reques.js以及遇到了一些封裝問題和跨域問題，但是經過一天的測試最終還是解決了。

首先是封裝的request.js（位置：utils/request.js）代碼如下：

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

// 創建一個axios實例
const service = axios.create({
  baseURL: 'http://www.dianphp.com/',
  transformRequest:[function(data){
    return Qs.stringify(data)
  }],
  timeout: 3000
});

// 添加請求攔截器
service.interceptors.request.use(config => {
  // 打開可能會報錯 x-token不被允許
  // config.headers['x-token'] = 'x-xxxxxxxxxxxxxxxxxxx';
  return config;
},error => {
  // 請求錯誤做些事
  return Promise.reject(error);
});

// 添加相應攔截器
service.interceptors.response.use(response => {
  const res = response.data;
  // 如果返回的狀態碼不是200 就主動報錯
  if(res.state != 200){
    return Promise.reject(res.msg || 'error');
  }
  return response;
},error => {
  // 返回接口的錯誤信息
  return Promise.reject(error);
})

export default service

整理封裝api.js（位置：src/api/login.js）

import request from '@/utils/request'

export function login(data) {
  return request({
    url: 'api/admin/login',
    method: 'post',
    // 跨域報錯 可能出現在data上，測試的時候可以先不帶data
    // data的處理方式需要放在request.js使用qs處理
    data:{username:'張三'}
  });
  // 可行
  // request({
  //   url:'api/admin/login',
  //   method: 'post'
  // }).then(res => {
  //   console.log(res);
  // });
  // 可行
  // return request.post('api/admin/login');
  // 可行
  // request.post('api/admin/login').then(res => {
  //   console.log(res);
  // });
  // 可行
  // request.get('api/admin/login',{
  //   timeout:2000
  // }).then(res => {
  //   console.log(res);
  // });
}

具體使用方式：

import { login } from '@/api/login'

login({username:'張三'}).then(res => {
  console.log(res);
});

處理跨域問題：

第一步：VUE前端配置（config/index.js）

 

 

const path = require('path')
module.exports = {
  dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
        '/api': {
            target: 'http://dianphp.fyz.com',
            changeOrigin: true,
            pathRewrite: {
                '^/api': '/api'
            }
        }
    },

服務端配置：

如果發起的請求是 OPTIONS 請求 需要配置路由（thinkphp5）

return [
  'api/admin/login' => ['api/admin/login/',['method' => 'post|get|options']],
  'api/:controller/:action'=>['api/:controller/:action',['method' => 'post|get|options']],
  'api/'=>'api/index/index',
];

接口配置：

 

 

header('Access-Control-Allow-Origin: *');

測試：沒有問題

 

 請求頭：

 

具體代碼，還可以在優化，這里只做個示例。