软件工程日报--vue获取后端数据(解决跨域问题)

vue获取后端数据##

在前端框架的学习中,我很想知道vue3如何与后端交互就像在uniApp中可以使用uni.request来进行交流.
在web中我们可以使用之前熟悉的axois技术.但是在操作中确实遇到了不少问题

1.装载插件##

使用axois需要装载axios,实际操作也十分简单就是在vs终端中执行命令(注意要在项目停止后输出)

npm i axios

等到包安装成功之后直接导入axois就可以使用了,在我的测试中,直接在钩子函数里获取后端数据,但是发生了错误!!!

import axios from 'axios'
onMounted(() => {

   axios.get('http://localhost:7469/brand-case/brand/selectAll')
   .then(response => {

       console.log("success");
     //  console.log(response.data);
     data.push(...response.data);
   })
   .catch(error => {
       alert('error');
       console.log(error);
   })

  //  console.log('fullName mounted');
})

跨域问题##

我搜索错误信息,发现是跨域问题,

然后我看到了一个大佬的博客
https://blog.csdn.net/weixin_51146329/article/details/124515164
使用这个filter来解决这个问题

package com.itheima.Filter;

import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebFilter(filterName = "CrossOriginFilter",urlPatterns = "/*")
public class CrossOrignFilter implements Filter {

    @Override
    public void init(FilterConfig filterConfig) throws ServletException {

    }

    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {

        // 响应参数格式设置
        request.setCharacterEncoding("UTF-8");
        response.setCharacterEncoding("UTF-8");
        response.setContentType("application/json");

        HttpServletResponse response1 = (HttpServletResponse) response;
        /* 允许跨域的主机地址 */
        response1.setHeader("Access-Control-Allow-Origin", "*");
        /* 允许跨域的请求方法GET, POST, HEAD 等 */
        response1.setHeader("Access-Control-Allow-Methods", "*·");
        /* 重新预检验跨域的缓存时间 (s) */
        response1.setHeader("Access-Control-Max-Age", "3600");
        /* 允许跨域的请求头 */
        response1.setHeader("Access-Control-Allow-Headers", "*");
        /* 是否携带cookie */
        response1.setHeader("Access-Control-Allow-Credentials", "true");

        chain.doFilter(request, response1);
    }

    @Override
    public void destroy() {

    }
}