介绍

上一节只是创建的简单的前端界面。在这一部分,介绍如何在vue中发送网络请求给后端。

axios介绍

在这里使用axios发送前端网络请求。 axios是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端.
官网 <https://github.com/axios/axios>

安装配置
npm install axios
使用示例在官网也有。

使用

在这里使用封装后的axios
参考: https://www.jianshu.com/p/3ab216fa185c
<https://www.jianshu.com/p/3ab216fa185c>

第一步:封装源码request.js
//1. 引入 axios import axios from 'axios' //2. 创建axios对象,配置默认配置 const
httpRequest=axios.create({ baseURL:"localhost:8088", // api的base_url timeout:
15000 // 请求超时时间 }) //3. 创建 request拦截器
httpRequest.interceptors.request.use(config => {return config }, error => {
Promise.reject(error) }) //4. 创建response 拦截器
httpRequest.interceptors.response.use(response => response,error => { if (error
&&error.response) { switch (error.response.status) { case 400: error.message =
'请求错误' break case 403: error.message = '权限不足,请联系管理员' break case 404: error
.message =`请求地址出错: ${error.response.config.url}` break case 500: error.message =
error.response.data.errorMsg break default: error.message = '服务器内部错误' } } return
Promise.reject(error) }) //5. 导入 export default httpRequest
第二步:创建login.js调用httpRequest发送请求
import request from '@utils/request' export function login(params) { return
request({ url:'/api/login.do', method: 'get', params:params }) }
上述只是简单封装axois,先用起来,在实际场景中,还需要考虑登陆状态的处理。

第三步:在Login.vue中调用方法login.js
<script> //引入login import {login} from '@/api/login.js' ... methods: {
onSubmit() { //这里调用login方法 login(this.loginForm).then(function () {
this.$router.push("/home") }) } }
在vue中调用SpringBoot的接口还需要配置proxyTable
proxyTable: { '/api': { target: 'http://localhost:8088', // 接口的域名 // secure:
false, // 如果是https接口,需要配置这个参数 changeOrigin: true, // 如果接口跨域,需要进行这个参数配置
pathRewrite: {'^/api': '' } } },
直接配置上述请求会出现跨域问题(前端):
Failed to load http://localhost:8088/api/login.do?username=das&password=asd: No
'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'http://localhost:8080' is therefore not allowed access. createError.js?
16d0:16 Uncaught (in promise) Error: Network Error at createError
(createError.js?16d0:16) at XMLHttpRequest.handleError (xhr.js?ec6c:87)
createError @ createError.js?16d0:16 handleError @ xhr.js?ec6c:87 Promise.then
(async) onSubmit @ Login.vue?03db:35 invoker @ vue.esm.js?efeb:2027 Vue.$emit @
vue.esm.js?efeb:2538 e.(anonymous function) @ backend.js:1 handleClick @ element
-ui.common.js?ccbf:9715 invoker @ vue.esm.js?efeb:2027 fn._withTask.fn._with
Task @ vue.esm.js?efeb:1826 xhr.js?ec6c:178 Cross-Origin Read Blocking (CORB)
blocked cross-origin responsehttp://localhost:8088/api/login.do
?username=das&password=asdwith MIME type application/json. See https
://www.chromestatus.com/feature/5629709824032768 for more details.
解决办法一 <https://www.cnblogs.com/zircon/p/9091225.html>,在请求的LoginController上加上注解。
@CrossOrigin

解决办法二 <https://blog.csdn.net/a78270528/article/details/78282804>
在Application中增加如下配置
@Bean public CorsFilter corsFilter() { final UrlBasedCorsConfigurationSource
source =new UrlBasedCorsConfigurationSource(); final CorsConfiguration config =
new CorsConfiguration(); config.setAllowCredentials(true); // 允许cookies跨域
config.addAllowedOrigin("*");//
允许向该服务器提交请求的URI,*表示全部允许。。这里尽量限制来源域,比如http://xxxx:8080 ,以降低安全风险。。
config.addAllowedHeader("*");// 允许访问的头信息,*表示全部 config.setMaxAge(18000L);//
预检请求的缓存时间(秒),即在这个时间段里,对于相同的跨域请求不会再预检了 config.addAllowedMethod("*");//
允许提交请求的方法,*表示全部允许,也可以单独设置GET、PUT等 /* config.addAllowedMethod("HEAD");
config.addAllowedMethod("GET");// 允许Get的请求方法 config.addAllowedMethod("PUT");
config.addAllowedMethod("POST"); config.addAllowedMethod("DELETE");
config.addAllowedMethod("PATCH");*/ source.registerCorsConfiguration("/**",
config);return new CorsFilter(source); }
解决办法三使用Nginx解决跨域问题
<https://blog.csdn.net/sky786905664/article/details/79189378>

友情链接
ioDraw流程图
API参考文档
OK工具箱
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:ixiaoyang8@qq.com
QQ群:637538335
关注微信