Vue调用后端api接口出现跨域问题，只要三步解决问题

本是古典何须时尚 2023-09-26 23:57 8阅读 0赞

问题： 当我们在自己的个人电脑上去进行vue调用后端的操作时，经常会遇到跨域问题

![d4f6169cf5264714b04e048783612db5.png][]

解决方式：

1.在Vue项目中调用api接口的地方加上

'Access-Control-Allow-Origin': '*'

2.在后端代码项目重写Filter类

package bank.filter;
    import javax.servlet.*;
    import javax.servlet.annotation.WebFilter;
    import javax.servlet.http.HttpServletResponse;
    import java.io.IOException;
    
    @WebFilter(filterName = "CorsFilter")
    public class CorsFilter implements Filter{
        @Override
        public void init(FilterConfig filterConfig) throws ServletException {
    
        }
    
        @Override
        public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
            HttpServletResponse response = (HttpServletResponse) servletResponse;
            response.setHeader("Access-Control-Allow-Origin", "*");
            response.setHeader("Access-Control-Allow-Methods", "GET, POST, DELETE, PUT, OPTIONS");
            response.setHeader("Access-Control-Allow-Headers", "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With");
    
            filterChain.doFilter(servletRequest, servletResponse);
        }
    
    
        @Override
        public void destroy() {
    
        }
    }

3. 在控制类方法上加上允许跨域的注解

@CrossOrigin(origins = "*", maxAge = 3600)

搞定收工：

![a8ed3559305b4bf79532873abb040214.png][]

[d4f6169cf5264714b04e048783612db5.png]: https://img-blog.csdnimg.cn/d4f6169cf5264714b04e048783612db5.png
[a8ed3559305b4bf79532873abb040214.png]: https://img-blog.csdnimg.cn/a8ed3559305b4bf79532873abb040214.png