How can I communicate with Cloudfront and the ec2 node server? - node.js

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: