React 中 fetch 的跨域与cookie共享

最近新开了一个项目，前端使用react，后端使用springmvc。数据的交互使用ES6的新API:fetch。由于存在跨域问题，react下fetch的参数，和后端springmvc都要做相应的配置。

####前端请求：

fetch(requestData(your_url,'POST',{email:email,password:password}))
        .then(response => response.json())
        .then(json => console.log(json)

function getRequestData(url, method, params) {

    if(!method) {
        method = 'GET';
    }

    let requestParam = {
        method: method,
        mode: 'cors',
        credentials: "include",
        headers: new Headers({
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        })
    };

    if (params != null) {
        Object.assign(requestParam, {body: JSON.stringify(params)});
    }
    return new Request(url, requestParam);
}

####JAVA代码

1. web.xml 配置

    
        cors
        com.dommain.filter.CORSFilter
    
    
        cors
        /mobile/*
    
   

2.CORSFilter 代码

package com.domian.filter;

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

public class CORSFilter implements Filter {

    @Override
    public void destroy() {
    }

    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) res;

         //前端react项目的域名
        response.setHeader("Access-Control-Allow-Origin", "http://localhost:3500");
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
        response.setHeader("Access-Control-Max-Age", "3600");
        //设置允许访问cookie
        response.setHeader("Access-Control-Allow-Credentials", "true");
        response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
        chain.doFilter(req, res);
    }


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

}

3. controller 代码

   @RequestMapping("/dologin")
   @ResponseBody
   public User login(@RequestBody Map user) {
       Subject subject = SecurityUtils.getSubject();
       UsernamePasswordToken token = new                         UsernamePasswordToken(user.get("email"), user.get("password"));
       subject.login(token);
       return currentUserService.getCurrentUser();
   }
   

转载于:https://my.oschina.net/imeasyer/blog/677728