React，koa2前后端分离项目涉及cookie传递的方法

       随着前端技术的日新月异，公司项目大部分都采用了前后端分离的技术栈来实现，即前端部署在一个自己的服务端上，网站后台也部署在另一个端口。我目前的工作是完成登录态的维持，即采用session维持，这就需要传递cookie来完成。

        在这样的前提下，跨域成为了一个小的难点，解决办法有很多，jsonp，cors，proxy等等，前两种都离不开服务器的设置，我们这里只说我用到的，

刚开始我用cors来处理，

import cors from 'koa2-cors'

app.use(cors({
  origin:'http://localhost:3000',
  credentials:true,
}))

koa2为我们提供了很多的中间件，引入koa2-cors之后，将他进行简单的设置即可（重点：学习中间件的使用一定不能完全看网上的博客，还是得直接搜中间件的介绍，不然因为版本问题可能要走很多弯路）。

下图配置好，React项目的axios的baseURL，将它指向80端口，我们的react项目用的是3001端口，koa2用的是80端口;

        let baseApi = 'http://127.0.0.1:80';
           axios({
               url:options.url,
               method:options.method || 'get',
               baseURL:baseApi,
               timeout:5000,
               data: options.data ||  '',
   

这样子简单的配置好cors之后，我们顺利的解决了跨域问题，等等。。

下图是network界面，可以看到3001端口请求到了，127.0.0.1/employee/login下面的数据，因为80是默认端口，浏览器自动忽略了。

下图是cookie界面，cookie没有传过来，没有cookie我们无法完成登录态的维持，虽然localstorage也可以用，但是cookie会更好；

cookie去哪里了？我们去查查资料吧，网上资料众说纷纭，一时间有点乱，还是去看书吧， 

 

我们在js高程中找到了，主流浏览器用XHR实现了跨域的代理，但是为了安全保障，禁止携带cookie，其实想破解也不麻烦，把cookie放在数据包里面，我们手动写入和读出也能实现，这样子违背了cors的规定，我们还是走大路吧，不走小路；

既然这条路不好走，我们用proxy代理，这个porxy和ES6中的那个代理意义不同，因为我们本地有自己的服务器，我们将发送请求的主体由浏览器转为了前端的服务端，也就是webpack自带的服务器，让他去请求80端口，再把数据包转给我们，在这一步，我也是走了很多的弯路；

 首先百度上的资料不好找，react的资料更少，我按照这些资料怎么搞，都没有成功，原因有很多，技术这个东西有很多时候都是不能复制的。后来既然资料找不到，咱们去官网看文档吧，因为我的react项目是拿的create-react-app脚手架搭建的，所以，我们打开create-react-app官网去找，如果简单配置，在packjson里面写一句，

如果是自定义配置，下载一个插件，然后新建一个文件，几行代码就搞定了， 

       其实这样子配置完后，我的代码还是没有搞定，到第二天早上我才把问题解决掉，当时我无法判断哪里出的问题，后来发现了问题，是react的axios配置代码里面，没有关掉baseURL的配置，导致我代理失败，这就告诉大家一个经验，我们要一步一步的来调试，我们判断这个前后端proxy的代理，先建立一个简单的服务端， 看看是服务端的问题还是前端问题，经过筛查，前端的问题。

        后来服务端没问题，我于是在前端里面改来改去，终于改对了，记录本次艰难的cookie不同域问题，

总结：找答案还是得去官网找。

下图为服务端的输出，可以看到我们的origin为80端口，没有触发跨域

我的cookie设置用的koa2-session进行的设置，不是我手动设置的，源码我也没时间看，我猜想，在服务端设置cookie代码里面，修改它的domian，是不是可以让这个同域不同端口的跨域，完成携带cookie的任务，这几天忙着搞这个项目，没时间细挖，有时间再写一篇记录吧！