* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.
* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.
5주차 숙제를 html파일만으로 작성했는데 모든 것이 완벽하게 작동을 잘 하였습니다. firestore에 데이터 기록과 읽어와서 작업하기 까지 이상없이 잘 작동하였습니다.
그러나 그 html 파일에서 js 파트를 분리하여 실행하였더니, CORS policy에러가 콘솔창에 기록되었습니다.
커뮤니티에 와서 확인해 보니 수강생 중 한 분(김지선)이 1월 2일에 질문한 내용과 동일하였습니다. 거기에 나온 답변대로 chrome 속성을 변경하고 관리자권한으로 실행해 보았지만 결과는 동일한 에러가 발생했습니다. 혹시 웹브라우저의 문제인가 해서 웹브라우저를 MS엣지로 바꾸어 보았으나 역시 동일한 에러가 발생하였습니다.
작성한 코드를 복붙해 올리겠으니 잘 부탁드립니다. 참고로 숙제의 과정은 코멘트한대로 작성하도록 하였고 수정할 필요가 없는 부분은 그대로 두어 수정을 최소화 했습니다.
작성한 코드 및 에러 메세지
[에러메세지]
Access to script at 'file:///C:/Users/joons/Desktop/sparta/%EC%9B%B9%EA%B0%9C%EB%B0%9C_%EC%8B%A4%EC%8A%B52/food5_step1.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted.
Failed to load resource: net::ERR_FAILED
[html파일]
<script src="food_5_1.js" type="module"></script>
"food_5주차_실습.js"을 제가 작성한 파일명인 "food_5_1.js"로 바꾸어 주었고 나머지 전체 코드는 하나도 바꾼게 없어서 별도로 첨부하지 않겠습니다.
[javascript파일] food_5_1.js
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-app.js";
import { getFirestore } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
import { collection, addDoc } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
import { getDocs } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
apiKey: "AIzaSyA3zwgqD_aMEqyy-F6yHLnqnj6WtkkLTUg",
authDomain: "sparta-76679.firebaseapp.com",
projectId: "sparta-76679",
storageBucket: "sparta-76679.appspot.com",
messagingSenderId: "643677632998",
appId: "1:643677632998:web:12a9d90e259dbf48d57e27",
measurementId: "G-4F12XTQ89M"
};
// Firebase 인스턴스 초기화
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
$("#addBtn").click(async function () {
let image = $('#floatingInput').val();
let title = $('#foodTitle').val();
let star = $('#inputGroupSelect03').val();
let comment = $('#floatingTextarea').val();
try {
const docRef = await addDoc(collection(db, "foods"), {
'image': image,
'title': title,
'star': star,
'comment': comment
});
alert('음식이 추가 되었습니다!');
window.location.reload();
} catch (e) {
console.error("Error adding document: ", e);
}
});
$(".row-cols-3").empty();
const querySnapshot = await getDocs(collection(db, "foods"));
querySnapshot.forEach((doc) => {
let image = doc.data().image;
let title = doc.data().title;
let comment = doc.data().comment;
let star = "⭐".repeat(doc.data().star);
console.log(image,title,comment,star);
let tempHtml = `
<div class="col">
<div class="card h-100">
<img src="${image}"
class="card-img-top" alt="...">
<div class="card-body">
<h4 class="card-title">${title}</h4>
<p class="card-text">${comment}</p>
<p class="card-text">${star}</p>
</div>
</div>
</div>`;
$(".row-cols-3").append(tempHtml);
});
[추신]
무려 7일동안 이것저것 다 해보았습니다.
오류 발생 시, 작성한 코드 전체와 에러 메시지를 첨부해 주세요.
Tip 1) </> 아이콘을 눌러 코드박스를 만들어 보세요.
Tip 2) Ctrl+A(맥의 경우 Command+A) 단축키로 코드를 한 번에 선택할 수 있어요!
