vue2.x跨域处理（vue.config.js不起作用）

问题

刚刚入门vue，想实现vue页面请求后端验证码图片和登录功能。

后端提供接口，前端发送请求，似乎很简单的一个请求就可以解决，刚开始这不很简单么，但是，写完后发现我草率了。我前端的端口是8088，服务端的端口是2020，F12查看，发现获取验证码的请求怎么都是8088，故而页面显示空白。

度娘发现需要在前端做一个代理转发，那就按照度娘的结果一步步来吧。

这里已经安装axios。

① 建立一个vue.config.js 文件，如图位置

教程说参考vue官网文档：参考官网地址

有两种方法，先试试简单的吧。
vue.config.js文件写入以下内容

module.exports = {
  devServer: {
    proxy: 'http://localhost:2020'
  }
}

// 这种无效

login.vue文件

<template>
  <div>
    <el-form ref="loginFrom" :model="addAndEditFormData" :rules="addAndEditRules" class="form">
      <h3 class="loginTitle">宿舍管理系统</h3>
      <el-form-item prop="account" label="账  号：">
        <el-input clearable v-model="addAndEditFormData.account" placeholder="请输入账号" style="width: 80%"></el-input>
      </el-form-item>
      <el-form-item prop="password" label="密  码：">
        <el-input clearable v-model="addAndEditFormData.password" placeholder="请输入密码" style="width: 80%"></el-input>
      </el-form-item>
      <el-form-item prop="verification" label="验证码：">
        <el-input clearable v-model="addAndEditFormData.verification" placeholder="请输入验证码"
                  style="width: 50%"></el-input>
        <img id="img" @click="getVerification" :src="imgSrc" alt="验证码" title="点击更换验证码"/>
      </el-form-item>
      <el-checkbox class="rememberMe" v-model="rememberMe">记住我</el-checkbox>
      <el-form-item>
        <el-button type="primary" @click="handleConfirmEvent" style="width: 100%"><i class="el-icon-upload"></i> 登 录
        </el-button>
      </el-form-item>
      <div>
        <span>还没有账号？<router-link to="/register">去注册</router-link></span>
      </div>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'login',
  data() {
    return {
      addAndEditFormData: {
        account: '',
        password: '',
        verification: ''
      },
      rememberMe: true,
      imgSrc: '/getVerify?temp=' + new Date(), // 验证码地址
      message: '',
      addAndEditRules: {
        account: {
          required: true, message: '账号不能为空', trigger: 'blur'
        },
        password: {
          required: true, message: '密码不能为空', trigger: 'blur'
        },
        verification: {
          required: true, message: '验证码不能为空', trigger: 'blur'
        },
      },

    }
  },
  created() {

  },
  methods: {
  	// 点击更换验证码
    getVerification() {
      this.imgSrc = '/getVerify?temp=' + new Date();
    },
    // 登录按钮调用
    handleConfirmEvent() {},
  }
}
</script>

<style>
.form {
  border-radius: 15px;
  background-clip: padding-box;
  margin: 160px auto;
  width: 350px;
  padding: 15px 35px 15px 35px;
  background: antiquewhite;
  border: #2c3e50;
  box-shadow: 0 0 25px aqua;
}

.loginTitle {
  margin: 0 auto 40px auto;
  text-align: center;
  color: #3c8dbc
}

.rememberMe {
  text-align: left;
  margin-top: -5px;
  margin-bottom: 10px;
}
</style>

本以为会一帆风顺，结果刷新后一点效果都没有。将vue.config.js文件中的内容换成官网的第二种测试。

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:2020',
        ws: true,
        changeOrigin: true
      }
    }
  }
}

// 这种也无效

我以为自己哪里写错了，度娘后再改如下。

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:2020',
        ws: true,
        changeOrigin: true,
         pathReWrite: {
           '^/api': '/'
        }
      }
    }
  }
}

// 这种也无效

依旧不起作用。连续改好久有点懵。

看到proxyTable有点眼熟，点进去看看，然试着将配置放在config文件夹下的index.js 的 proxyTable中。
结果好了。

最后结果：