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

Question

using stack

Client: React, Redux, axios

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

First, I bought a domain from route53.(ACM certificate issuance completed)

Second, I registered the build file in the bucket as a static website in S3.

Third, linked the Route 53 and S3 bucket to CloudFront.

Fourth, EC2 set ELB and EIP.

Fifth, ec2 contains node.js epxress server.

Sixth, CloudFront, Redirect from S3 ( www.domain.link => domain.link) was set to

The code of the problematic Client and Server is as follows.

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;

When I click the Postman or browser login button, this error occurs.

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 or www.domain.link or the above error occurs.

Postman

How do I get CloudFront + S3 to communicate with EC2?

in your browser or postman

www.domain.link After connecting to domain.link

When you make a login button or post request

I hope it works well.

If something is missing, please let me know what is missing. I will add more.

Answer 1

You specify allowed methods for CloudFront in your cache behavior. By default only GET and HEAD are allowed: