前后端分离项目，Vue使用Axios发送异步请求

最新推荐文章于 2024-06-27 19:13:37 发布

山枕檀痕

最新推荐文章于 2024-06-27 19:13:37 发布

阅读量334

点赞数

文章标签： vue.js 前端 springboot

本文链接：https://blog.csdn.net/qq_45155769/article/details/131576056

版权

文章介绍了两种方式搭建前端项目，一是通过vue-cli创建Webpack项目，引入axios并配置基础路径，处理跨域问题。二是纯前端项目，直接引入vue、axios、ElementUI等资源，并使用live-server启动服务。同时，文章提到了跨域的解决方案，通过在请求头添加自定义字段并后端判断放行。

摘要由CSDN通过智能技术生成

第一种，通过vue-cli 脚手架工具搭建的前端项目

安装脚手架工具命令：

npm install -g vue-cli

vue-cli快速创建webpack项目（路由router之前全部会回车，路由之后全部选n ）：

vue init webpack

在main.js文件里引入axios

import axios from 'axios'


//配置axios的全局基本路径
axios.defaults.baseURL='http://localhost:8080';
//全局属性配置，在任意组件内可以使用this.$http获取axios对象
Vue.prototype.$http = axios

axios发送请求时可能会出现跨域问题（协议、域名、端口号任意一个不同就跨域），可以在main.js添加如下命令：

axios.defaults.withCredentials = true; // 当前请求为跨域类型时，是否在请求中携带cookie

第二种，纯前端项目

引入vue，axios，elementUI和公共资源：注意在线引入需要联网才能访问

<!-- 引入VUE：本地引入：前端js框架 -->
<script src="static/js/vue.js"></script>
<!-- 引入Axios：CDN外部引入：用来做请求发送的 -->
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<!-- 引入ElementUI：css样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入ElementUI：组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- 引入公共js文件 -->
<script src="static/js/common.js"></script>

common.js中：

//配置axios的基础路径
axios.defaults.baseURL="http://127.0.0.1:8080"
//配置aixos配置全局属性
Vue.prototype.$http=axios;

live-server服务器，传统导入js开发的模式没法直接服务器方式调试，需要安装live-server服务器，这个服务器就是node一个模块

安装：npm install -g live-server
启动项目：live-server --port=80
注意：live-server服务器自带热刷新

跨域问题解决：在common.js中配置axios请求的前置拦截器，在请求头中添加一个自己定义的字段标识这是前端项目的请求，后台判断这个请求头实现放行就行。

// request拦截器
axios.interceptors.request.use(config => {
    config.headers['FRONT'] = "font";
    return config;
}, error => {
  console.log('request拦截器 - 发生异常：');
  console.log(error);
  Promise.reject(error);
});

package com.huawei.interceptor;

import com.huawei.constant.SystemConstant;
import org.springframework.stereotype.Component;
import org.springframework.web.servlet.HandlerInterceptor;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

@Component
public class LoginInterceptor implements HandlerInterceptor {
    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        String font = request.getHeader("FRONT");
        if(font != null ){
            return true;
        }
        HttpSession session = request.getSession();
        Object obj = session.getAttribute(SystemConstant.USER_IN_SESSION);
        if (obj == null) {
            // 给浏览器响应一个json数据
            response.setContentType("application/json;charset=utf-8");
            response.getWriter().println("{\"success\":false,\"message\":\"toLogin\"}");
            return false;
        }
        return true;
    }
}