Ajax跨域请求No 'Access-Control-Allow-Origin' header is present on the requested resource

背景

安装完nodejs并使用React发送Ajax请求时，日志打印No ‘Access-Control-Allow-Origin’ header is present on the requested resource。

解决方案

之前的博客中的项目存在SessionFilter

<filter>
    <filter-name>SessionFilter</filter-name>
    <filter-class>com.lpf.utility.pub.SessionFilter</filter-class>
</filter>

<filter-mapping>
    <filter-name>SessionFilter</filter-name>
    <url-pattern>*.json</url-pattern>
</filter-mapping>

在doFilter中添加代码即可

response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));
response.setHeader("Access-Control-Allow-Credentials", "true");

fetch('http://localhost:8080/xxxx/xxxx.json?currentPage=1&pageNumber=20', {
            method: 'GET',
            mode:'cors',
            credentials: 'include',
            headers: new Headers({
                'Accept': 'application/json',
                'Content-Type': 'application/x-www-form-urlencoded'
            }),
        })
            .then((res)=> {
                return res.json()
            })
            .then((res)=> {
                this.setState({datas:res.data.cardPackageModelList});
            }).catch((error)=> {
            console.log(error);
        })