Front-End-Development-Notes 302重定向到同源网站cookie丢失的问题

302重定向到同源网站cookie丢失的问题

Open lizuncong opened this issue 3 years ago • 0 comments

问题

上周有个 java 的朋友问我，为什么第三方域名重定向到我们自己的服务时，请求头中的 cookie 会丢失。

本着好奇心，我就试试，没想到却成了我一个悬而未解的问题

复现场景

新建一个 server.js 文件

const express = require("express");

const app = express();

app.get("/api/auth", (req, res) => {
  res.setHeader("Access-Control-Allow-Origin", "*");
  res.redirect(302, "http://localhost:9000/server/api/authSuccess");
});

app.listen(4000);

这个服务非常简单，运行在 4000 前端，监听 /api/auth 并重定向到 http://localhost:9000/server/api/authSuccess。

在实际的业务场景中，http://localhost:4000/api/auth是第三方服务提供的鉴权服务，鉴权成功会重定向到我们提供的前端的 redirect url，即 http://localhost:9000/server/api/authSuccess。这里只是简化复现问题

新建一个 index.js 文件

const express = require("express");

const app = express();

app.get("/api/authSuccess", (req, res) => {
  console.log("3000端口请求成功");
  res.send("请求成功");
});

app.listen(3000);

在实际的业务场景中，http://localhost:9000/server/api/authSuccess 是我们自己的后端服务。

本地起一个简单的前端服务：

import React, { Component, PureComponent } from "react";
import ReactDOM from "react-dom";
class Counter extends Component {
  constructor(props) {
    debugger;
    super(props);
  }
  handleClick() {
    fetch("http://localhost:4000/api/auth");
  }
  handleClickAuth() {
    fetch("/server/api/authSuccess");
  }
  render() {
    return (
      <>
        <button onClick={this.handleClick}>点击发起鉴权请求</button>
        <button onClick={this.handleClickAuth}>
          手动发起 auth success 请求
        </button>
      </>
    );
  }
}

ReactDOM.render(<Counter />, document.getElementById("root"));

前端 webpack dev server 配置如下：

const devConfig = {
  devServer: {
    host: "0.0.0.0",
    port: "9000",
    contentBase: path.resolve(__dirname, "../dist"),
    // hot: true,
    headers: { "Access-Control-Allow-Origin": "*" },
    overlay: {
      errors: true,
    },
    proxy: {
      "/server": {
        target: "http://localhost:3000",
        // secure: false, // 如果请求的网址是https，需要配置secure: false
        pathRewrite: {
          "/server": "",
        },
        changeOrigin: true,
      },
    },
  },
};

注意这里代理了所有的 /server 的请求并将 /server 替换成空字符串

先来看下 cookie 面板，可以看到有设置了一个 cookie