折腾：
【未解决】reactjs中如何获页面请求时的http的header或cookie
期间，想要实现：
在浏览器中，打开对应的页面，比如：
http://localhost:3050/project_name/home
同时传入对应的cookie
想到了curl
curl cookie GET
去试试：
➜ ReactjsTemplate git:(master) ✗ curl -v –cookie “useIdCurl=crifanCurl” http://localhost:3050/project_name/home * Trying ::1… * TCP_NODELAY set * Connection failed * connect to ::1 port 3050 failed: Connection refused * Trying 127.0.0.1… * TCP_NODELAY set * Connected to localhost (127.0.0.1) port 3050 (#0) > GET /project_name/home HTTP/1.1 > Host: localhost:3050 > User-Agent: curl/7.54.0 > Accept: */* > Cookie: useIdCurl=crifanCurl > < HTTP/1.1 200 OK < X-Powered-By: Express < Accept-Ranges: bytes < Cache-Control: public, max-age=0 < Last-Modified: Fri, 15 Sep 2017 06:02:31 GMT < ETag: W/”cba-15e8421a4d8″ < Content-Type: text/html; charset=UTF-8 < Content-Length: 3258 < Vary: Accept-Encoding < Date: Fri, 15 Sep 2017 09:59:59 GMT < Connection: keep-alive < <!DOCTYPE html> <html> <head> <link rel=”preload” href=”/project_name/styles.css?1fb5487993d857085a7a” as=”style”> <link rel=”preload” href=”/project_name/vendor.bundle.js?1fb5487993d857085a7a” as=”script”> <link rel=”preload” href=”/project_name/index.js?1fb5487993d857085a7a” as=”script”> <meta charset=”utf-8″> <meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″> <meta name=”format-detection” content=”telephone=no”> <title>Project Name</title> <meta name=”application-name” content=”Project Name”> <!– iOS Safari –> <meta name=”apple-mobile-web-app-title” content=”Project Name”> <meta name=”description” content=””> <!– Tell the browser to be responsive to screen width –> <meta name=”viewport” content=”width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no”> <!– <link rel=”manifest” href=”/project_name/manifest.json”> –> <!– Theme Color –> <!– Chrome, Firefox OS and Opera –> <meta name=”theme-color” content=”#673ab8″> <!– iOS Safari –> <meta name=”apple-mobile-web-app-status-bar-style” content=”#673ab8″> <!– icons –> <link rel=”icon” sizes=”16×16″ href=”/project_name/assets/img/icons/favicon-16×16.png”> <link rel=”icon” sizes=”32×32″ href=”/project_name/assets/img/icons/favicon-32×32.png”> <link rel=”icon” sizes=”192×192″ href=”/project_name/assets/img/icons/favicon-192×192.png”> <!– icons for Safari –> <link rel=”apple-touch-icon” href=”/project_name/assets/img/icons/touch-icon-iphone.png”> <!– 180×180 –> <link rel=”apple-touch-icon” sizes=”152×152″ href=”/project_name/assets/img/icons/touch-icon-ipad.png”> <link rel=”apple-touch-icon” sizes=”180×180″ href=”/project_name/assets/img/icons/touch-icon-iphone-retina.png”> <link rel=”apple-touch-icon” sizes=”167×167″ href=”/project_name/assets/img/icons/touch-icon-ipad-retina.png”> <!– iOS Safari –> <meta name=”apple-mobile-web-app-capable” content=”yes”> <!– include styles css files here –> <!– Bootstrap 3.3.7 –> <link rel=”stylesheet” href=”/project_name/assets/lib/bootstrap/css/bootstrap.min.css”> <link rel=”stylesheet” href=”/project_name/assets/lib/bootstrap/css/bootstrap-theme.min.css”> <!– Latest compiled and minified CSS –> <!– <link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css”>; –> <!– Optional theme –> <!– <link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap-theme.min.css”>; –> <link href=”/project_name/styles.css?1fb5487993d857085a7a” rel=”stylesheet”></head> <body> <div id=’app_root’> </div> <!– include third-parth lib (jquery, …) here if necessary –> <!– <script src=”/project_name/assets/lib/jquery/jquery-3.1.1.min.js”></script> –> <!– HtmlWebpackPlugin will generated code include index.js and vendor.bundle.js here –> <script type=”text/javascript” src=”/project_name/vendor.bundle.js?1fb5487993d857085a7a”></script><script type=”text/javascript” src=”/project_name/index.js?1fb5487993d857085a7a”></script></body> </html> * Connection #0 to host localhost left intact |
虽然的确是传递了cookie过去了：
但是此处是命令行，无法调试，看到网页输出的log，无法知道reactjs程序内部是否得到了该cookie
然后想到，看看能否在Chrome浏览器中，打开某个页面时，手动cookie
react js chrome set cookie
Response cookies not being set · Issue #386 · github/fetch
React Chrome Developer Tools – React Blog
chrome set cookie before open page
Clear, enable, and manage cookies in Chrome – Computer – Google Chrome Help
set cookies before loading page · Issue #921 · segmentio/nightmare
Nate Good: Software Engineering, Product Development
结果在Chrome地址栏中输入：
document.cookie=”userIdInBar=crifanInBar”
结果并没有赋值cookie
而是跳转到搜索页面了：
用了postman，效果和终端curl访问是一样的：
【总结】
目前没有找到办法，可以方便的，在PC端模拟浏览器访问时，把cookie传入到reactjs的页面的。
终端中的curl，或者postman中，可以设置cookie，但是返回的是html -》 没法查看页面
Chrome的调试工具中，没法在打开页面之前设置cookie
转载请注明：在路上 » 【未解决】如何打开ReactJS页面时传递cookie进去