发送短信验证码登陆-前端

Vue进阶篇（一）之实现发送短信验证码登陆
https://blog.csdn.net/qq_41134769/article/details/85321965

用户名风起时yft
手机 18234182076

两个接口：
1个点击获取验证码，发个请求给后端，把参数：手机号发给后端去请求这个接口

然后把手机号和验证码再发给后端，后台去验证成功的话就登录

监听状态码，发送请求成功会有返回值

axios学习 https://www.cnblogs.com/libin-1/p/6607945.html
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。Axios的中文文档以及github地址如下：

中文：https://www.kancloud.cn/yunye/axios/234845
github:https://github.com/axios/axios
vue路由文档：https://router.vuejs.org/zh/

npm install axios
npm install --save vue-resource

在这里插入图片描述
main.js

import axios from 'axios'
import VueResource from 'vue-resource'
Vue.use(VueResource)
Vue.prototype.$http = axios
Vue.prototype.HOST = '/api'

vue-resource是Vue.js的一款插件，它可以通过XMLHttpRequest或JSONP发起请求并处理响应。也就是说，$.ajax能做的事情，vue-resource插件一样也能做到，而且vue-resource的API更为简洁。

vue.config.js

},

错误

扫描二维码关注公众号，回复： 11712802 查看本文章

Access to XMLHttpRequest at 'http://www.baidu.com/' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.、

前端跨域解决方案（了解）

描述：由于使用vue脚手架的目的就是使前后端分离，前端请求后端的数据在测试阶段设计到跨域请求问题，在前端中我们可以通过如下配置解决跨域请求问题。

第一步（在config文件夹下的index.js中进行如下修改）

proxyTable:{
     "/api":{
         target:"后端提供服务的前缀地址",
         changeOrigin:true,
         pathRewrite:{
              '^/api':''
         }
     }
},

第二步（在main.js中添加一个代理）

Vue.prototype.HOST='/api'

再进行请求的时候只需要使用url = this.HOST+"请求的Mappering地址"即可。

（注意：在上述过程中修改了config下的配置文件，服务需要重新启动，才能生效）

原文：https://blog.csdn.net/LJJ1338/article/details/81812035

发送短信验证码登陆-前端

前端跨域解决方案（了解）

猜你喜欢