后端配置了跨域配置前端访问还是提示跨域

后端配置文件:

@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跨域

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值