如何与 Cloudfront 和 ec2 节点服务器通信？

Posted 2023-03-27

【中文标题】如何与 Cloudfront 和 ec2 节点服务器通信？

【英文标题】：How can I communicate with Cloudfront and the ec2 node server?

【发布时间】：2021-10-25 02:09:16

【问题描述】：

使用堆栈

Client: React、Redux、axios

Server:AWS-EC2、Route 53、S3、CloudFront、NodeJS、express

首先，我从 route53 购买了一个域名。（ACM 证书颁发完成）

其次，我将bucket中的build文件注册为S3中的静态网站。

第三，将 Route 53 和 S3 存储桶链接到 CloudFront。

第四，EC2设置ELB和EIP。

第五，ec2包含node.js epxress服务器。

第六， CloudFront，从 S3 重定向 (www.domain.link => domain.link) 设置为

有问题的Client和Server的代码如下。

Client.js

import axios from "axios";
import  TYPES, MAF  from "./types";
const API_AUTH = "https://www.domain.link/auth";
const API_USER = "https://www.domain.link";
//필수!!
axios.defaults.withCredentials = true;

export function loggedIn(data) 
  return (dispatch) => 
    axios.post(`$API_AUTH/login`, data).then((res) => 
      console.log(res);
      dispatch(
        type: TYPES.LOGIN_SUCCESS,
        // payload: res.data.userData,
      );

      dispatch(
        type: MAF.HIDE_MODAL,
      );
    );
  ;


export function register(data) 
  return (dispatch) => 
    axios.post(`$API_AUTH/register`, data).then((res) => 
      dispatch(
        type: TYPES.REGISTER_SUCCESS,
        payload: res.data,
      );
    );
  ;

server.js

./routes/user.js

const router = require("express").Router();

const 
  login,
  register,
  logout,
  profile,
 = require("../controller/userController/userController");
const  authorization  = require("../config/JWTConfig");

router.post("/auth/login", login);
router.post("/auth/register", register);
router.get("/auth/logout", authorization, logout);
router.get("/auth/profile", authorization, profile);

module.exports = router;

./app.js

const express = require("express");
// const passportConfig = require("./passport/index");
const passport = require("passport");
const http = require("http");
const https = require("https");
const path = require("path");
const fs = require("fs");
const cors = require("cors");
const cookieParser = require("cookie-parser");
const logger = require("morgan");

require("dotenv").config();
const authRoute = require("./routes/users");
const mainRoute = require("./routes/main");
const port = process.env.PORT || 3000;
const app = express();

const whitelist = [
  "http://localhost:3000",
  "http://*.doamin.link",
  "http://doamin.link",
  "http://doamin.link/*",
];
const corsOption = 
  origin: function (origin, callback) 
    if (whitelist.indexOf(origin) !== -1 || !origin) 
      callback(null, true);
     else 
      callback(new Error("Not allowed by CORS"));
    
  ,
  credentials: true,
  methods: ["GET", "POST", "PUT", "DELETE", "OPTION"],
;

app.use(cookieParser());

app.use(logger("dev"));

app.use(cors(corsOption));
app.use(express.urlencoded( extended: false ));
app.use(express.json());

app.use(mainRoute);
app.use(authRoute);

let server;

if (fs.existsSync("./cert/key.pem") && fs.existsSync("./cert/cert.pem")) 
  const privateKey = fs.readFileSync(__dirname + "/cert/key.pem", "utf8");
  const certificate = fs.readFileSync(__dirname + "/cert/cert.pem", "utf8");
  const credentials =  key: privateKey, cert: certificate ;

  server = https.createServer(credentials, app);
  server.listen(port, () => console.log("https server Running"));
 else 
  server = app.listen(port, () => 
    console.log(`http server Running`);
  );


module.exports = server;

当我单击 Postman 或浏览器登录按钮时，出现此错误。

Access to XMLHttpRequest at 'https://www.domain.link/login' 
from origin 'https://domain.link' has been blocked by CORS policy: 
Response to preflight request doesn't pass access control check:
 No 'Access-Control-Allow-Origin' header is present on the requested resource.

createError.js:16 Uncaught (in promise) Error: Network Error
    at e.exports (createError.js:16)
    at XMLHttpRequest.p.onerror (xhr.js:84)

domain.link 或www.domain.link 或出现上述错误。

Postman

如何让 CloudFront + S3 与 EC2 通信？

在您的浏览器或邮递员中

www.domain.link 连接到 domain.link 后

当您发出登录按钮或发布请求时

我希望它运作良好。

如果缺少什么，请告诉我缺少什么。我会添加更多。

【问题讨论】：

您是否在 CloudFront 中启用了 POST？

不，我应该在 CloudFront 的哪个位置添加它？起源？行为？

【参考方案1】：

您在缓存行为中指定allowed methods for CloudFront。默认情况下只允许 GET 和 HEAD：

【讨论】：

啊，说到这个，我选了那个。但是，我仍然收到 cors 错误。

@spec 您的来源是 S3 还是 EC2 实例？

在 route53 中注册的域通过 cloudfront 链接到 s3。 domain.link, www.domain.link ec2 没有在 origin 注册。

@spec POST 不受任何地方的 S3 支持。查看我链接的文档了解详细信息。

@spec 进展如何？仍然不清楚为什么它可能不适合您？