Dockerized React应用- HTTPS=true不起作用

hgtggwj0  于 2023-08-03  发布在  Docker
关注(0)|答案(1)|浏览(132)

我有一个连接到后端的React应用程序。后端配置为HTTPS,并且工作正常,直到我尝试从React应用程序向它发出任何请求。我已经将两者都配置到一个公共域的不同子域上(通过主机文件;它们实际上都在本地主机上运行,尽管我试图弄清楚如何改变),所以CORS工作正常,但它拒绝设置PHP会话cookie,因为前端是HTTP,而后端是HTTPS:
x1c 0d1x的数据
两者都在Docker中运行,独立的项目,独立的docker-compose文件;后端在端口80/443上,前端只在3011上(也许这就是问题所在,但我不能将前端设置为也使用端口80/443,因为它们已经在使用中)。
我一直在尝试让我的Dockerized React应用程序在HTTPS模式下运行。根据https://create-react-app.dev/docs/using-https-in-development/(以及网络上的大量其他来源,如https://www.mariokandut.com/how-to-setup-https-ssl-in-localhost-react/https://www.youtube.com/watch?v=neT7fmZ6sDE),它应该像生成证书并指定一些导致证书及其密钥的环境变量一样简单。
然而,当我这样做时,它仍然拒绝在HTTPS模式下运行,我不知道为什么:


在我看来,这个问题很明显是由Docker引起的,但我对它不是很熟悉,我花了一整天的时间试图解决整个事情的各种问题,但这个问题我无法处理,所以我在这里。
docker-compose.dev.yml

version: "3.8"
services:
  node:
    environment:
      - WATCHPACK_POLLING=true
    build:
      context: .
      target: dev
    volumes:
      - ./:/opt/project
      - /opt/project/node_modules/
    ports:
      - "3011:3011"

字符串
Dockerfile相关部分:

FROM node:lts-alpine AS dev
WORKDIR /opt/project
COPY . .
RUN npm ci
ENV HTTPS=true
ENV SSL_CRT_FILE=./ssl/cert.pem
ENV SSL_KEY_FILE=./ssl/key.pem
CMD npm run start


是什么原因导致这个被诅咒的React应用程序无法在HTTPS模式下工作?

jtw3ybtb

jtw3ybtb1#

由于您的服务器运行在HTTPS上,并且您已经使用了Secure属性,因此您可以在cookie设置中启用SameSite=None以正确支持跨域凭据。
然后,您应该能够使用任何客户端主机进行连接(尽管有CORS)。
如果您打算在生产中使用单独的主机,这可能很方便,因为您不需要根据环境切换SameSite
否则,看起来不像是在用HTTPS=true运行React应用。如果在最初运行应用程序后将ENV命令添加到Dockerfile,则需要重建映像

docker compose build

字符串
或者,避免在Docker构建中可能定期更改的内容,并在运行时简单地设置它们

environment:
  - WATCHPACK_POLLING=true
  - HTTPS=true
  - SSL_CRT_FILE=/opt/project/ssl/cert.pem
  - SSL_KEY_FILE=/opt/project/ssl/key.pem


然后,您应该能够在浏览器中打开https://localhost:3011(或者您喜欢使用的任何Map主机名)。

cra-node-1  | Starting the development server...
cra-node-1  |
cra-node-1  | Compiled successfully!
cra-node-1  |
cra-node-1  | You can now view cra in the browser.
cra-node-1  |
cra-node-1  |   Local:            https://localhost:3011
cra-node-1  |   On Your Network:  https://172.18.0.2:3011
cra-node-1  |
cra-node-1  | Note that the development build is not optimized.
cra-node-1  | To create a production build, use npm run build.
cra-node-1  |
cra-node-1  | webpack compiled successfully

相关问题