最新消息:20210816 当前crifan.com域名已被污染,为防止失联,请关注(页面右下角的)公众号

【未解决】如何打开ReactJS页面时传递cookie进去

ReactJS crifan 3218浏览 0评论

折腾:

【未解决】reactjs中如何获页面请求时的http的header或cookie

期间,想要实现:

在浏览器中,打开对应的页面,比如:

http://localhost:3050/project_name/home

同时传入对应的cookie

想到了curl

curl cookie GET

curl网站开发指南 – 阮一峰的网络日志

去试试:

➜  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

reactjs – Be able to use Cookie from already conected in websites in Chrome Extension – Stack Overflow

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进去

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
82 queries in 0.179 seconds, using 22.14MB memory