兰州移动端网站建设,怎么弄视频,o2o的代表性电商平台,重庆信息网站推广解决跨域 一、SpringBoot配置二、配置SpringSecurity三、修改端口四、修改vue项目4.1 拿到token4.2 前端存储token4.3 前端请求头携带token 五、测试5.1 认证测试5.2 授权测试 一键三连有没有捏~~ 浏览器出于安全的考虑#xff0c;使用 XMLHttpRequest对象发起 HTTP请求时必须… 解决跨域 一、SpringBoot配置二、配置SpringSecurity三、修改端口四、修改vue项目4.1 拿到token4.2 前端存储token4.3 前端请求头携带token 五、测试5.1 认证测试5.2 授权测试 一键三连有没有捏~~ 浏览器出于安全的考虑使用 XMLHttpRequest对象发起 HTTP请求时必须遵守同源策略否则就是跨
域的HTTP请求默认情况下是被禁止的。 同源策略要求源相同才能正常进行通信即协议、域名、端口号都完全一致。
前后端分离项目前端项目和后端项目一般都不是同源的所以肯定会存在跨域请求的问题。
所以我们就要处理一下让前端能进行跨域请求。
一、SpringBoot配置
配置运行跨域请求 二、配置SpringSecurity
②开启SpringSecurity的跨域访问
由于我们的资源都会收到SpringSecurity的保护所以想要跨域访问还要让SpringSecurity运行跨域访问。 三、修改端口 四、修改vue项目
vue项目
阿里云盘
文件太多了百度网盘传不上用阿里云盘嗯。2万多个文件
https://www.alipan.com/t/la1A8NRdoGJjipuJwrZU用postman是肯定不存在跨域问题的。因为它不是浏览器所以我们要找一个前端的项目就随便找了一个vue工程。修改一下vue项目。
4.1 拿到token
创建一个登录页面
代码如下
templateel-form stylewidth: 20% :modelruleForm refruleForm label-width100px classdemo-ruleFormel-form-item label账号 propuserNameel-input v-modelruleForm.userName/el-input/el-form-itemel-form-item label密码 proppasswordel-input v-modelruleForm.password/el-input/el-form-itemel-form-itemel-button typeprimary clicksubmitForm(ruleForm)提交/el-button/el-form-item/el-form
/templatescriptexport default {data() {return {ruleForm: {userName: ,password: }};},methods: {//这个是提交方法submitForm(formName) {this.$refs[formName].validate((valid) {if (valid) {axios.post(http://localhost:8888/user/login,this.ruleForm).then(res{console.log(res.data.data.token);if(res.data.code 200){this.$alert(this.ruleForm.userName账号登录成功, 消息, {confirmButtonText: 确定,})}})} else {return false;}});}}}
/scriptstyle scoped/style路由的配置就直接略过了不是重点。。。。。
运行前端vue项目 然后测试一下登录成功解决跨域请求拿到token 4.2 前端存储token
修改一下登录页面认证登录成功之后把返回的token接收存入localStorage 测试一下没有问题本地存储了token 4.3 前端请求头携带token
先创建一个hello页面
代码如下
templateel-form stylewidth: 20% label-width100px classdemo-ruleFormel-form-itemel-button typeprimary clicksubmitForm()测试hallo接口/el-button/el-form-item/el-form
/templatescriptexport default {methods: {//这个是提交方法submitForm() {axios.post(http://localhost:8888/hello,this.ruleForm).then(res{})}}}
/scriptstyle scoped/style启动项目页面测试一下
认证失败因为请求头没有携带任何token 创建一个utils文件夹在utils下创建request.js 在main.js进行全局引入 修改hello接口只需要写一个hello就行了不需要写全部的接口地址 五、测试
5.1 认证测试
填一个错误的密码认证失败 填入一个正确的密码认证成功 5.2 授权测试
然后我们测试一下请求头已经携带了token了 然后看一下响应都没有问题OK这个账号是有这个权限的。 我们把权限改了 再进行一下测试当前账号已经没有权限了。 一键三连有没有捏~~
