React连接后台,解决跨域问题.

最新推荐文章于 2024-08-28 09:41:59 发布

江寸山

最新推荐文章于 2024-08-28 09:41:59 发布

阅读量865

点赞数

分类专栏： React 文章标签： react跨域问题 react连接后台

本文链接：https://blog.csdn.net/weixin_44664277/article/details/99091262

版权

React 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

第一步在web.xml文件导入文件

<filter>  
      <filter-name>cors</filter-name>  
      <filter-class>com.mr.filter.SimpleCORSFilter</filter-class>  
	</filter> 
	 
	<filter-mapping>  
	      <filter-name>cors</filter-name>  
	      <url-pattern>/*</url-pattern>  
	</filter-mapping>

第二部新建一个工具类

package com.mr.filter;
import javax.servlet.*;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

public class SimpleCORSFilter implements Filter {

    @Override
    public void destroy() {
    }

    @Override
    public void doFilter(ServletRequest req, ServletResponse res,FilterChain chain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) res;
        // 哪些方法或者路径可以请求进来   * 代表所有 
        response.setHeader("Access-Control-Allow-Origin", "*");
        // 可以进行请求的 请求方式  如 get  post
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
        // 请求保持的最长时间
        response.setHeader("Access-Control-Max-Age", "3600");
        // 请求的类型
        response.setHeader("Access-Control-Allow-Headers", "*");
        chain.doFilter(req, res);
    }

    @Override
    public void init(FilterConfig arg0) throws ServletException {
    }

}

第三部在react中发送axios请求就可以访问到了

axios.get('http://localhost:8080/react_navlink/foot/queryList.do',{
            params:{
                footStyleId:this.props.match.params.id,
                page:page,
                rows:pageSize,
            },