08 | 前后联调

这里是在简书仿简书的第八篇，早睡早起身体好

上篇已经将后端写好了，那么激动人心的联调来了，先来看一看连接上不。

网络请求函数放在network文件夹中，本次注册接口是和用户相关的，那就在该目录下创建user.js存放和用户相关的网络请求函数。

对于注册接口，前后端的约定是这样的。

那我们就可以这样做了

// network/user.js
import { request } from './request'


// 用户注册
export function register(name, password) {
  return request({
    method: "post",
    url: '/users',
    data: {
      name,
      password
    },
  })
}

当需要发起注册请求时调用该函数，并将用户名和密码导入就可以了。

---

下面来试一试。

不妨新建login路由文件，当然了，你在App.vue里尝试也是可以的。

两个表单input在data中预设name和password，使用v-model进行双向的数据绑定。
点击提交的按钮时注册函数拿到data中的用户信息发送请求。

<!--Login.vue-->
<div class="register">
      <form>
        <div>
          <input placeholder="用户名" type="text" v-model="name" />
        </div>
        <div>
          <input placeholder="密码" type="password" v-model="password" />
        </div>
        <button class="sign-in-button" type="button" @click="registerClick">
          <span id="sign-in-loading"></span>
          注册
        </button>
      </form>
    </div>

export default {
  data() {
    return {
      name: "",
      password: "",
    };
  },
  methods: {
    registerClick() {
      register(this.name, this.password).then((res) => {
        if (res.status === 200) {
          this.$toast.show("注册成功，请登录", 2000);
        } else if (res.status === 409) {
          this.$toast.show("注册失败", 2000);
        }
      });
    },
  },
}

好的，对于用户注册前端也写好了，那就来联调了。

---

后端项目启动，前端项目启动，打开页面输入用户名密码注册看一看。

毫无意外地，你会得到一个报错。

Access to XMLHttpRequest at 'http://localhost:3000/users' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

很明显是触发跨域，被浏览器给绊了。解决跨域的方案网上讨论很多，一搜就有，现在的话呢，更推荐使用cors，毕竟浏览器都告诉你了，犯不着还用什么jsonp了。主要是我不会。

好了，很简单嘛，开卷考试，在No 'Access-Control-Allow-Origin' header is present on the requested resource. 这句话里已经告诉我们解决方案了，在后端添加上好了。

// /jianshu_server/index.js
// 跨域问题
app.use(async (ctx, next) => {
  ctx.set("Access-Control-Allow-Origin", "*");
  await next()
})

后端设置完成后，打开前端用户注册页面试一试，是不是成功了，天真。你大概率会遇到下面的惊喜。

Access to XMLHttpRequest at 'http://localhost:3000/users' from origin 'http://localhost:8080' has been blocked by CORS policy: Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.

好的现在是 Headers 的问题，还是开卷考试，Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.这句话已经告诉了我们解决方案。

常见的请求头有 x-requested-with,Authorization,Content-Type,Accept,不妨都将他们加上。

// 跨域问题
app.use(async (ctx, next) => {
  ctx.set("Access-Control-Allow-Origin", "*");
  ctx.set("Access-Control-Allow-Headers", "x-requested-with,Authorization,Content-Type,Accept");
  await next()
})

那再测试一下。理论上，对于该注册接口，上述 cors 配置是够用的，在开发用户登录时，我们可能还要给跨域打交道。

经过简单的联调，我们实现了第一个功能，用户注册。