2023/11/4 vue前后端分离axios发请求报错

问题:

Access to XMLHttpRequest at 'http://localhost:8080/FactoryERP/Selectout' from origin 'http://localhost:7070' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

产生的原因

出现这条信息就是说明出现express跨域问题 。

这表明我们的请求已经成功发送到服务器端且服务器端对此进行了响应，但由于同源策略，我们并不能观察到响应内容。

网上前端vue配置文件无效,问题出在后端

解决方法:

后端采用的servlet没有设置响应头,添加一个过滤器filter

package com.example.servlet;

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

@WebFilter("/*")
public class CorsFilter implements Filter {
    public void init(FilterConfig config) throws ServletException {
    }

    public void destroy() {
    }

    @Override
    public void doFilter(ServletRequest req, ServletResponse resp, FilterChain chain) throws ServletException, IOException {
        // 允许任何域名访问
        HttpServletResponse response = (HttpServletResponse) resp;
        ((HttpServletResponse) response).setHeader("Access-Control-Allow-Origin", "*");

        // 允许指定的请求方法访问

        response.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE");

        // 允许自定义的请求头部

        response.setHeader("Access-Control-Allow-Headers", "Content-Type, Authorization");

        chain.doFilter(req, resp);
    
    }
}