인프런 커뮤니티 질문&답변

<!-- ScriptSetup.vue -->
<template>
	<div class="container py-4">
		{{ msg }}
		<br />
		{{ message }}
		<input v-model="message" type="text" />
		<button @click="sayHello">click</button>
		<PostItem
			type="news"
			title="제목"
			contents="내용"
			:is-like="true"
		></PostItem>
		<PostItem
			type="news"
			title="제목"
			contents="내용"
			:is-like="true"
		></PostItem>
		<PostItem
			type="news"
			title="제목"
			contents="내용"
			:is-like="true"
		></PostItem>
		<hr />
		<TemplateRefsChild ref="child"></TemplateRefsChild>
		<template v-if="child">{{ child.message }}</template>
		<hr />
		<MyButton class="parent-class"></MyButton>
	</div>
</template>

<script setup>
import { ref } from 'vue';
import axios from 'axios';
import PostItem from '@/components/setup/PostItem.vue';
import TemplateRefsChild from './setup/TemplateRefsChild.vue';
import MyButton from './setup/MyButton.vue';

const msg = 'Hello World!';
const message = ref('');
const sayHello = () => {
	alert('Hello World!');
};
const child = ref(null);
defineExpose({
	msg,
});
const response = await axios(
	'https://dummy.restapiexample.com/api/v1/employees',
);
console.log('response: ', response);
// async function callApi() {
// 	const response = await axios('https://dummy.restapiexample.com/api/v1/employees')
// }
// callApi();
</script>

<style lang="scss" scoped></style>

1. ScriptSetup.vue 코드입니다!
   

2. 네트워크 탭에서 CORS 에러가 발생합니다 ㅠㅠ

3. 해당 부분 headers 내용입니다!

안녕하세요 🙂

코드상에 별 문제는 없고요, CORS error 저도 확인해 보니 동일한 에러가 나타나고 있습니다.

에러 결과를 확인해 보니 네트워크 에러로 해당 서버(dummy.restapiexample.com) 에서 정확한 에러 원인은 제공하고 있지 않아서요.

강의 내용은 Top Level await에 대한 테스트이니 해당 URL 말고 아래 테스트 URL로 요청하시면 될 것 같습니다.

const response = await axios('https://jsonplaceholder.typicode.com/posts');

감사합니다 !