Vue+Koa2+Axios遇到的登录接口端口跨域问题

Login.vue的处理

在Login.vue的methods下键入以下代码

        axios({
          method:'POST',
          url:'api地址',
          data:{
            userName:this.data.name,
            password:this.data.pass
          },
          //由于api接收的数据为form-data，故下面代码将data转换为form-data
            transformRequest: [
              function (data) {
              let ret = ''
              for (let it in data) {
                ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
              }
              ret = ret.substring(0, ret.lastIndexOf('&'));
              return ret
            }
          ]
          //下面的代码是设置响应头，测试过后发现可有可无则进行了注释。
          // headers: {'Content-Type':'application/x-www-form-urlencoded'},
        }).then((res) => {
          console.log(res);
        })

注意！！如果这里post出了400 bad request错误，则大概率是前端传输的数据类型与后端的数据类型不匹配的原因，也就是要加transformRequest属性

400还有可能是你的浏览器没有允许所有cookie，可以去尝试设置一下

Koa2中的处理

在路由经过的第一个中间件），加入 ctx.append(“Access-Control-Allow-Origin”, “*”);
（若直接连接controller，则直接controller里加入）

若不加这个，前端估计会报跨域的错

完成的结果！！

前端传来喜讯！！！

总结

太菜了，多看点文档能解决很多问题，不能总靠搜索错误解决问题~