文档章节

React 中 fetch 的跨域与cookie共享

JayeCoder
 JayeCoder
发布于 2016/05/18 20:45
字数 289
阅读 362
收藏 0

最近新开了一个项目,前端使用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 配置

     <filter>
         <filter-name>cors</filter-name>
         <filter-class>com.dommain.filter.CORSFilter</filter-class>
     </filter>
     <filter-mapping>
         <filter-name>cors</filter-name>
         <url-pattern>/mobile/*</url-pattern>
     </filter-mapping>
    

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 {
    }

}
  1. controller 代码

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

© 著作权归作者所有

JayeCoder
粉丝 0
博文 3
码字总数 950
作品 0
苏州
高级程序员
私信 提问
fetch使用的常见问题及其解决办法

首先声明一下,本文不是要讲解fetch的具体用法,不清楚的可以参考 MDN fetch教程。 fetch默认不携带cookie 配置其 credentials 项,其有3个值: omit: 默认值,忽略cookie的发送 same-origi...

舍我其谁2013666
05/31
0
0
fetch的常见问题及其解决办法

摘要: 玩转fetch。 作者:wonyun 原文:fetch使用的常见问题及其解决办法 Fundebug经授权转载,版权归原作者所有。 首先声明一下,本文不是要讲解fetch的具体用法,不清楚的可以参考MDN fet...

Fundebug
07/18
0
0
前端战五渣学JavaScript——前端数据存储

说起前端数据存储,那就不得不提到Cookie、sessionStorage和localStorage,这是我们接触到的最熟悉的前端数据存储的单词,作为一个前端开发、前端工程师,这三个单词用没用过先不管,但你在学...

前端战五渣
04/29
0
0
怎样与 CORS 和 cookie 打交道

翻译:疯狂的技术宅 前言 CORS 与 cookie 在前端是个非常重要的问题,不过在大多数情况下,因为前后端的 domain 一般是相同的,所以很少去关心这些问题。或者只是要求后端设置 就行了,很少去...

前端先锋
04/04
0
0
React中Fetch之cors跨域请求的使用

本篇文章主要介绍了react中fetch之cors跨域请求的实现方法,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下。如有不足之处,欢迎批评指正。 项目中使用了react,当...

前端攻城小牛
2018/12/20
0
0

没有更多内容

加载失败,请刷新页面

加载更多

SpringBoot中 集成 redisTemplate 对 Redis 的操作(二)

SpringBoot中 集成 redisTemplate 对 Redis 的操作(二) List 类型的操作 1、 向列表左侧添加数据 Long leftPush = redisTemplate.opsForList().leftPush("name", name); 2、 向列表右......

TcWong
今天
7
0
排序––快速排序(二)

根据排序––快速排序(一)的描述,现准备写一个快速排序的主体框架: 1、首先需要设置一个枢轴元素即setPivot(int i); 2、然后需要与枢轴元素进行比较即int comparePivot(int j); 3、最后...

FAT_mt
昨天
4
0
mysql概览

学习知识,首先要有一个总体的认识。以下为mysql概览 1-架构图 2-Detail csdn |简书 | 头条 | SegmentFault 思否 | 掘金 | 开源中国 |

程序员深夜写bug
昨天
10
0
golang微服务框架go-micro 入门笔记2.2 micro工具之微应用利器micro web

micro web micro 功能非常强大,本文将详细阐述micro web 命令行的功能 阅读本文前你可能需要进行如下知识储备 golang分布式微服务框架go-micro 入门笔记1:搭建go-micro环境, golang微服务框架...

非正式解决方案
昨天
9
0
前端——使用base64编码在页面嵌入图片

因为页面中插入一个图片都要写明图片的路径——相对路径或者绝对路径。而除了具体的网站图片的图片地址,如果是在自己电脑文件夹里的图片,当我们的HTML文件在别人电脑上打开的时候图片则由于...

被毒打的程序猿
昨天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部