axios 跨域导致2个响应

基于github网易云后台接口，完成axios的封装与解决跨域

最近在做一个仿网易云的移动端vue 2 项目，由于网易云的接口不支持跨域，axios的封装与复用对于我还是有所难度的。

首先，把网易云在github上开源的接口代码拉到本地，执行 node app.js让其在本地跑起来

复制 http://localhost:3000 到浏览器打开，出现下面这个页面，说明成功跑起来了

下面开始前端的配置

1.创建好vue2 项目后，在根目录下新建一个vue.config.js文件，用来解决跨域

每次修改config.js文件后，需要重新npm run serve

将下面代码复制到config.js里面

module.exports = {
    runtimeCompiler: true,
    publicPath: '/',
    devServer: {
        host: 'localhost',  // 自定义域名，需要在hosts文件里配置
        port: 8080,
        open: true,
        https: false,
        // 设置开发接口代理
        proxy: {
            // 服务一
            "/api": {
                // target 是后端给你的服务，可以通过ip配置，也可以通过域名配置
                // 当请求接口的时候遇到 "/api" 会自动转为target里的服务，解决跨域
                // 配置域名
                target: 'http://localhost:3000/',//本地跑通的网易云api地址
                ws: true,
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ''
                },
            },
            // 服务二
            // "/api/v1": {
            //   这里是通过ip来配置
            //   target: 'http://10.10.2.173:8080',
            //   ws: true,
            //   changeOrigin: true,
            // },
        },
    }
}

2.src下创建一个utils文件夹，utils下新建一个request.js文件，用于配置axios，没安装axios的，npm安装一下。

复制下面代码到request.js文件

import axios from "axios"
const http = axios.create({
        baseURL: '/api', //当请求接口的时候遇到 "/api" 会自动转为target里的服务，解决跨域
        timeout: 6000,
    })
    //请求拦截
http.interceptors.request.use(config => {
        return config
    }, err => {
        console.log(err);
    })
    //相应拦截
http.interceptors.response.use(res => {
    // return res.data.data
    return res.data //这里是res.data 还是res.data.data 看后端接口返回的数据结构。
}, err => {
    throw new Error(err)
})
export default http

3.utils文件夹创建一个api文件夹（在src下创建也可以，看个人习惯），里面存放具体页面的 axios 请求

我在api文件夹下创建了一个api.js，用于测试具体d网易云的登录接口

api.js具体代码如下，

import http from '../request' //导入request.js的axios配置

//登录接口
export const login = (params) => {
    return http ({
        method:get,
        url:'/login/cellphone',
        params:params
    })
}

4.在页面使用接口

为了演示方便，我直接在App.vue下使用接口，做一个简单的登录演示，代码如下：

<template>
  <div id="app">
    <div id="nav">
      <input v-model="phone" placeholder="请输入手机号" />
      <input v-model="password" placeholder="请输入密码" />
      <button @click="login(phone,password)">登录</button>
    </div>
    <router-view />
  </div>
</template>
<script>
import { login } from "./utils/api/api.js";//导入api.js里面封装好接口
export default {
  data() {
    return {
      phone: "",
      password: "",
    };
  },
  created() {},
  methods: {
    async login(phone, password) {
      const res = await login({
        phone: phone, //登录要求params传phone，password两个参数
        password: password,
      });
      console.log(res);
    },
  },
};
</script>
<style lang="less">
</style>

5.输入phone，password,点击登录，可以看到后台返回数据了，状态码是200，表示获取接口数据成功