这里是在简书仿简书的第八篇，早睡早起身体好
上篇已经将后端写好了，那么激动人心的联调来了，先来看一看连接上不。
网络请求函数放在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 配置是够用的，在开发用户登录时，我们可能还要给跨域打交道。
经过简单的联调，我们实现了第一个功能，用户注册。
网友评论