인프런 커뮤니티 질문&답변
작성한 질문수
CORS - Access-Control-Allow-Origin 누락 문제
작성
·
36
0
강좌보면서 proxy 설정하고 back 폴더 npm run dev, alecture 폴더 npm run build 했는데 회원가입 버튼을 누르니
콘솔창에 시간차로 계속 Access to XMLHttpRequest at 'https://sleact.nodebird.com/api/users' from origin 'http://localhost:3095' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
app.js:2
GET https://sleact.nodebird.com/api/users net::ERR_FAILED 200 (OK)
(익명) @ app.js:2
e.exports @ app.js:2
e.exports @ app.js:2
l.request @ app.js:2
r.forEach.l.<computed> @ app.js:2
(익명) @ app.js:2
r.Z @ 678.js:1
(익명) @ app.js:2
(익명) @ app.js:2
(익명) @ app.js:2
(익명) @ app.js:2
o @ app.js:2
(익명) @ app.js:2
(익명) @ app.js:2
D @ app.js:2
[신규] Edge에서 Copilot을 사용하여 콘솔 오류 설명: 클릭
오류를 설명합니다.
자세한 정보
다시 표시 안 함
signup:1 Access to XMLHttpRequest at 'https://sleact.nodebird.com/api/users' from origin 'http://localhost:3095' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
app.js:2
GET https://sleact.nodebird.com/api/users net::ERR_FAILED 200 (OK)
(익명) @ app.js:2
e.exports @ app.js:2
e.exports @ app.js:2
l.request @ app.js:2
r.forEach.l.<computed> @ app.js:2
(익명) @ app.js:2
r.Z @ 678.js:1
(익명) @ app.js:2
(익명) @ app.js:2
(익명) @ app.js:2
(익명) @ app.js:2
o @ app.js:2
(익명) @ app.js:2
setTimeout
onErrorRetry @ app.js:2
(익명) @ app.js:2
(익명) @ app.js:2
(익명) @ app.js:2
u @ app.js:2
Promise.then
c @ app.js:2
(익명) @ app.js:2
o @ app.js:2
(익명) @ app.js:2
(익명) @ app.js:2
D @ app.js:2
signup:1 Access to XMLHttpRequest at 'https://sleact.nodebird.com/api/users' from origin 'http://localhost:3095' 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.
319.js:1 undefined
app.js:2
POST https://sleact.nodebird.com/api/users net::ERR_FAILED라는 오류가 발생합니다. copilot을 실행시켜보니 Access-Control-Allow-Origin과 Origin이 같아야하는데 Access-Control-Allow-Origin 부분이 누락되었다고 나옵니다.
네트워크 200번대는 실행에는 성공한거라고 들었는데... 도움주시면 감사하겠습니다!
제 webpack.config.ts 첨부하겠습니다.
import path from 'path';
//import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin';
import webpack, { Configuration as WebpackConfiguration } from "webpack";
import { Configuration as WebpackDevServerConfiguration } from "webpack-dev-server";
//import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
interface Configuration extends WebpackConfiguration {
devServer?: WebpackDevServerConfiguration;
}
import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
const isDevelopment = process.env.NODE_ENV !== 'production';
const config: Configuration = {
name: 'sleact',
mode: isDevelopment ? 'development' : 'production',
devtool: !isDevelopment ? 'hidden-source-map' : 'eval',
resolve: {
extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'],
alias: {
'@hooks': path.resolve(__dirname, 'hooks'),
'@components': path.resolve(__dirname, 'components'),
'@layouts': path.resolve(__dirname, 'layouts'),
'@pages': path.resolve(__dirname, 'pages'),
'@utils': path.resolve(__dirname, 'utils'),
'@typings': path.resolve(__dirname, 'typings'),
},
},
entry: {
app: './client',
},
module: {
rules: [
{
test: /\.tsx?$/,
loader: 'babel-loader',
options: {
presets: [
[
'@babel/preset-env',
{
targets: { browsers: ['IE 10'] },
debug: isDevelopment,
},
],
'@babel/preset-react',
'@babel/preset-typescript',
],
env: {
development: {
plugins: [require.resolve('react-refresh/babel')],
},
},
},
exclude: path.join(__dirname, 'node_modules'),
},
{
test: /\.css?$/,
use: ['style-loader', 'css-loader'],
},
],
},
plugins: [
// new ForkTsCheckerWebpackPlugin({
// async: false,
// // eslint: {
// // files: "./src/**/*",
// // },
// }),
new webpack.EnvironmentPlugin({ NODE_ENV: isDevelopment ? 'development' : 'production' }),
],
output: {
path: path.join(__dirname, 'dist'),
filename: '[name].js',
publicPath: '/dist/',
},
devServer: {
historyApiFallback: true, // react router
port: 3090,
devMiddleware: { publicPath: '/dist/' },
static: { directory: path.resolve(__dirname) },
proxy: {
'/api/': {
target: 'http://localhost:3095',
changeOrigin: true,
},
},
},
};
if (isDevelopment && config.plugins) {
// config.plugins.push(new webpack.HotModuleReplacementPlugin());
// // config.plugins.push(new ReactRefreshWebpackPlugin());
// // config.plugins.push(new BundleAnalyzerPlugin({ analyzerMode: 'server', openAnalyzer: true }));
}
if (!isDevelopment && config.plugins) {
// config.plugins.push(new webpack.LoaderOptionsPlugin({ minimize: true }));
// // config.plugins.push(new BundleAnalyzerPlugin({ analyzerMode: 'static' }));
}
export default config;
답변 3
0
0
지금 어딘가에서 계속 https://sleact.nodebird.com/api/users 로 요청을 보내고 있는 것인데요. 환경변수같은 곳에 sleact.nodebird.com이 없는지 프로젝트에서 문자열 검색해보세요.
0
안녕하세요, 인프런 AI 인턴입니다. nayoung hwang님께서 질문하신 CORS 오류 문제에 대해 답변드리겠습니다.
보통 CORS 오류는 서버에서 특정 도메인에서의 요청을 허용하지 않을 때 발생합니다. 이번 경우에는 Access-Control-Allow-Origin 헤더가 누락되어 있다는 오류가 발생하고 있습니다. 다음은 몇 가지 확인 및 해결 방법입니다:
CORS 설정 확인: 백엔드 서버(
http://localhost:3095)의 CORS 설정을 확인해주세요. 서버에서Access-Control-Allow-Origin헤더를 추가해야 합니다. Express를 사용하실 경우cors미들웨어를 다음과 같이 이용하실 수 있습니다:const corsOptions = { origin: 'http://localhost:3090', // 요청을 허용할 도메인 credentials: true // 요청에 쿠키를 포함할 경우 true로 설정 }; app.use(cors(corsOptions));운영 환경과 개발 환경 분리: Webpack에서 개발 환경에서는
.dev등의 파일을 로드하고, 프로덕션 환경에서는 추가적인 설정을 사용하도록 하여 환경을 분리 해주세요. 이 때,NODE_ENV환경 변수를 잘 확인하시고 설정이 적용되었는지 확인 바랍니다.Proxy 설정 확인: 올바르게 설정되었는지 다시 한 번 확인해주세요. 각 환경에서 요청이 제대로 전환되고 있는지 확인할 필요가 있습니다.
콘솔 로그 확인: 백엔드의 로그를 확인하여 CORS 요청이 어떻게 처리되고 있는지 확인해 보고, 문제가 있는 곳을 찾는 것이 중요합니다.
유사한 질문들이 있는 경우, 다음 링크를 참고하시면 유사한 문제를 해결하는 데 도움이 될 것입니다:
CORS 문제는 종종 서버 측 설정 문제입니다. 서버 설정을 꼼꼼히 확인해 보시고 필요한 설정이 모두 완료되었는지 다시 한 번 체크해주세요.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
back 파일, alecture 파일 다 찾아봤는데 안보이는 것 같아요.......... 그래서 back의 app.js를 const express = require("express");
const dotenv = require("dotenv");
const morgan = require("morgan");
const session = require("express-session");
const cookieParser = require("cookie-parser");
const cors = require("cors");
const path = require("path");
const hpp = require("hpp");
const helmet = require("helmet");
const passport = require("passport");
dotenv.config();
const { sequelize } = require("./models");
const passportConfig = require("./passport");
const apiRouter = require("./routes/api");
const webSocket = require("./socket");
const app = express();
app.set("PORT", process.env.PORT || 3095);
sequelize
.sync()
.then(() => {
console.log("DB 연결 성공");
})
.catch(console.error);
passportConfig();
const prod = process.env.NODE_ENV === "production";
// CORS 설정
const corsOptions = {
origin: "http://localhost:3090", // 요청을 허용할 도메인
credentials: true, // 쿠키를 포함한 요청 허용
};
// CORS 미들웨어를 최상단에 적용
app.use(cors(corsOptions));
app.options("*", cors(corsOptions)); // 모든 경로에 대해 CORS preflight 요청 허용
if (prod) {
app.enable("trust proxy");
app.use(morgan("combined"));
app.use(helmet({ contentSecurityPolicy: false }));
app.use(hpp());
} else {
app.use(morgan("dev"));
}
app.use(express.static(path.join(__dirname, "public")));
app.use("/uploads", express.static(path.join(__dirname, "uploads")));
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.use(cookieParser(process.env.COOKIE_SECRET));
const sessionOption = {
resave: false,
saveUninitialized: false,
secret: process.env.COOKIE_SECRET,
cookie: {
httpOnly: true,
},
};
if (prod) {
sessionOption.cookie.secure = true;
sessionOption.cookie.proxy = true;
}
app.use(session(sessionOption));
app.use(passport.initialize());
app.use(passport.session());
app.use("/api", apiRouter);
app.get("*", (req, res, next) => {
res.sendFile(path.join(__dirname, "public", "index.html"));
});
const server = app.listen(app.get("PORT"), () => {
console.log(`listening on port ${app.get("PORT")}`);
});
webSocket(server, app);
로 바꾼 후 npm run dev, npm run build 차례로 실행했는데 콘솔창에 signup:1 Access to XMLHttpRequest at 'https://sleact.nodebird.com/api/users' from origin 'http://localhost:3095' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
app.js:2
GET https://sleact.nodebird.com/api/users net::ERR_FAILED 200 (OK) 오류가 계속 주기적으로 발생합니다.