后端配置文件:

@Configuration
public class WebAppConfiguration implements WebMvcConfigurer {

	/**
	 * 解决跨域问题
	 **/
	@Override
	public void addCorsMappings(CorsRegistry registry) {
		registry.addMapping("/**")
				// 设置允许跨域请求的域名
				.allowedOrigins("*")
				// 是否允许证书
				.allowCredentials(true)
				// 设置允许的方法
				.allowedMethods("GET", "POST", "DELETE", "PUT", "OPTIONS", "HEAD", "PATCH")
				// 设置允许的header属性
				.allowedHeaders("*")
				// 跨域允许时间
				.maxAge(3600);
	}


}

跨域报错:我的接口中用到的参数是HttpServletRequest对象,这个对象容易获得,所以不存参数问题,所以后端接口是可以直接访问的,但是在这个接口中我用HttpServletRequest对象在获取Cookie时出现了问题,因为在前端setCookie没有成功,导致这里一直没有获取到cookie,数据返回一直为null,而访问其他接口时又用到这个数据,导致其他接口出现如上Access-Control-Allow-Origin错误。

解决办法:在过滤器中添加以下方法便可以成功解决,注意Access-Control-Allow-Origin不要设置为*,设置为*有可能还是会提示跨域

@Component
public class AuthFilter implements Filter {

  

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

    }

    @Override
    public void doFilter(ServletRequest req, ServletResponse resp, FilterChain chain) throws IOException, ServletException {
        HttpServletRequest request = (HttpServletRequest) req;
        HttpServletResponse response = (HttpServletResponse) resp;
        response.addHeader("Access-Control-Allow-Origin", request.getHeader("origin"));
        response.addHeader("Access-Control-Allow-Credentials", "true");
        
        chain.doFilter(request, response);
        

    }

    @Override
    public void destroy() {

    }

   
}

那么使用GET方法确实是不跨域了,但是在使用POST提交数据的时候,发现前端又提示跨域,实际上现在就简单了,前端有一个组件QS,前端在发送请求的时候 使用qs包装一下请求参数;

axios.post("/api", qs.stringify({
				      name: "ALin",
					  id: "666"
				})).then(res => {
				
				})

参考文档:写了Access-Control-Allow-Origin,还报跨域错误解决过程 | 码农家园

已解决:axios get请求不跨域,post请求跨域了_阿林阿林的博客-CSDN博客_get不跨域 但post跨域

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐