[Vue 3] blocked by CORS 문제

 

리뷰 객

package com.ssafy.board.model.dto;

public class Review {
	private int num;
	private int videos_id;
	private String title;
	private String content;
	private String writer_name;
	private int view_cnt;
	private String create_time;
	
	public Review() {}

	public int getNum() {
		return num;
	}

	public void setNum(int num) {
		this.num = num;
	}

	public int getVideos_id() {
		return videos_id;
	}

	public void setVideos_id(int videos_id) {
		this.videos_id = videos_id;
	}

	public String getTitle() {
		return title;
	}

	public void setTitle(String title) {
		this.title = title;
	}

	public String getContent() {
		return content;
	}

	public void setContent(String content) {
		this.content = content;
	}

	public String getWriter_name() {
		return writer_name;
	}

	public void setWriter_name(String writer_name) {
		this.writer_name = writer_name;
	}

	public int getView_cnt() {
		return view_cnt;
	}

	public void setView_cnt(int view_cnt) {
		this.view_cnt = view_cnt;
	}

	public String getCreate_time() {
		return create_time;
	}

	public void setCreate_time(String create_time) {
		this.create_time = create_time;
	}

	@Override
	public String toString() {
		return "Review [num=" + num + ", videos_id=" + videos_id + ", title=" + title + ", content=" + content
				+ ", writer_name=" + writer_name + ", view_cnt=" + view_cnt + ", create_time=" + create_time + "]";
	}
	
	
	
	
	
	

}

 

review mapper

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
  PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
  "https://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.ssafy.board.model.dao.ReviewDao">

	<!-- 리뷰 목록 다 가져와라 -->
	<select id="selectAll" resultType="Review">
		SELECT * FROM review
	</select>

	<!-- id에 해당하는 리뷰 가져오기, 상세 리뷰 조회 -->
	<select id="selectOne" parameterType="int" resultType="Review">
		SELECT *
		FROM review
		WHERE num = #{num}
	</select>

	<!-- 조회수 증가 -->
	<update id="updateViewCnt" parameterType="int">
		UPDATE review
		SET
		view_cnt = view_cnt + 1
		WHERE num = #{num}
	</update>

	<!-- 리뷰등록하기 -->
	<insert id="insertReview" parameterType="Review">
		INSERT INTO review (num,
		videos_id, title, content, writer_name, view_cnt,
		create_time)
		VALUES (#{num}, #{videos_id},
		#{title}, #{content},#{writer_name}, #{view_cnt}, now())
	</insert>

	<!-- 리뷰 삭제 -->
	<delete id="deleteReview" parameterType="int">
		DELETE FROM review
		WHERE
		num = #{num}
	</delete>

	<!-- 리뷰 수정 -->
	<update id="updateReview" parameterType="review">
    UPDATE review
    SET title = #{title},
        content = #{content},
        create_time = now()
    WHERE num = #{num}
</update>

</mapper>

 

vue

<template>
    <div>
        <h1>리뷰 수정 페이지입니다.</h1>
        <div>
            <strong>리뷰 번호:</strong> {{ num }}
        </div>
        <div>
            <div>
            <strong>영상 번호:</strong> {{ videos_id }}
        </div>

            <label for="name">제목</label>
            <input type="text" id="name" v-model="title" /><br />
        </div>
        <div>
            <label for="name">내용</label>
            <input type="text" id="name" v-model="content" /><br />
        </div>
        <div>
            <strong>작성자:</strong> {{ writer_name }}
        </div>
        <div>
            <strong>만든 시간:</strong> {{ create_time }}
        </div>
        <button @click="submit(updateForm, review.num)">등록</button>
    </div>
</template>

<script setup>

import { ref, computed, onMounted } from "vue";
import { useReviewStore } from "@/stores/Review";
import { useRouter, useRoute } from "vue-router";

const reviewStore = useReviewStore();

const num = ref("");
const videos_id = ref("");
const title = ref("");
const content = ref("");
const writer_name = ref("");
const view_cnt = ref("");
const create_time = ref("");


let review = computed(() => reviewStore.oneReview);

const submit = function () {
    const newReview = {
        num: num.value,
        videos_id: videos_id.value,
        title: title.value,
        content: content.value,
        writer_name: writer_name.value,
        view_cnt: view_cnt.value,
        create_time: create_time.value,
    };
    reviewStore.modifyReview(newReview);
}

onMounted(()=>{
        const route = useRoute();
        const NumParam = reviewStore.oneReview.num;

        console.log("넘파람은? "+NumParam);
        num.value = review.value.num;
        videos_id.value = review.value.videos_id;
        title.value = review.value.title;
        content.value = review.value.content;
        writer_name.value = review.value.writer_name;
        view_cnt.value = review.value.view_cnt;
        create_time.value = review.value.create_time;
    }
)

</script>

<style scoped></style>

 

mysql

CREATE TABLE IF NOT EXISTS review (
    num INT(10) NOT NULL AUTO_INCREMENT PRIMARY KEY,
    videos_id INT(10) NOT NULL,
    title VARCHAR(300) NOT NULL,
    content VARCHAR(300) NOT NULL,
    writer_name VARCHAR(40) NOT NULL,
    view_cnt INT(10) DEFAULT 0,
    create_time TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    FOREIGN KEY (videos_id) REFERENCES videos(id),
    FOREIGN KEY (writer_name) REFERENCES users(id)
);

INSERT INTO review (videos_id, title, content, writer_name)
VALUES 
(1, "좋아요", "매일보면서따라해요", "ssafy"),
(3, "상체 맛있다", "식사 중식사 중식사 중식사 중식사 중식사 중식사 중식사 중식사 중식사 중식사 중식사 중", "ssafy"),
(4, "너무 힘듭니다", "이걸 어떻게 합니까", "ssafy"),
(2, "저는 쉬운데요", "ㅋㅋ", "ssafy");

 

store.js 문제되는 부분

//  const REST_REVIEW_API = 'http://localhost:8080/api/review'

const modifyReview = function (review) {
        console.log("modifyReview");
        console.log("리뷰수정" + review + "번호는" + review.num);
        console.log(review);
        axios({
            url: `${REST_REVIEW_API}/${review.num}`,
            method: 'PUT',
            data: review, // Ensure that review is wrapped in an object
            headers: {
                'Content-Type': 'application/json', // Adjust the content type if needed
            },
        })
            .then(() => {
                console.log("전송 성공");
                router.push({ name: 'VideoDetail' });
            })
            .catch((err) => {
                console.log(err);
            });
    };

 

store.js 전체

import { ref, computed } from 'vue'
import { defineStore } from 'pinia'
import router from '@/router'
import axios from 'axios'

const REST_REVIEW_API = 'http://localhost:8080/api/review'

export const useReviewStore = defineStore('review', () => {

    // //리뷰리스트
    const reviewList = ref({})

    const getReviewList = function () {
        console.log("리뷰 전체 가져오기");
        axios.get(`${REST_REVIEW_API}`)
            .then((res) => {
                reviewList.value = res.data
                console.log(reviewList.value)

            })
    }

    // 페이지 이동함수
    const moveCreate = function () {
        router.push("/review/create")
    }

    const moveUpdate = function (num) {
        router.push(`/review/${num}/modify`)
    }




    //리뷰 등록
    const createReview = function (review) {
        console.log(review)
        axios({
            url: `${REST_REVIEW_API}`,
            method: 'POST',
            data: review,
            headers: {
                'Content-Type': 'application/json', // Adjust the content type if needed
            },
        })
            .then(() => {
                router.push({ name: 'VideoDetail' })
            })
            .catch((err) =>
                console.log(err))
    }

    // 리뷰 하나만 가져오기

    const oneReview = ref({})

    const getRevieww = function (num) {
        console.log("getRevieww");
        axios.get(`${REST_REVIEW_API}/${num}`)
            .then((res) => {
                oneReview.value = res.data;
                router.push(`/review/${num}`);
            })
    }
    const modifyReview = function (review) {
        console.log("modifyReview");
        console.log("리뷰수정" + review + "번호는" + review.num);
        console.log(review);
        axios({
            url: `${REST_REVIEW_API}/${review.num}`,
            method: 'PUT',
            params: review, // Ensure that review is wrapped in an object
            headers: {
                'Content-Type': 'application/json', // Adjust the content type if needed
            },
        })
            .then(() => {
                console.log("전송 성공");
                router.push({ name: 'VideoDetail' });
            })
            .catch((err) => {
                console.log(err);
            });
    };


    return { modifyReview, moveUpdate, reviewList, oneReview, getReviewList, createReview, moveCreate, getRevieww }
})

 

 

값은 잘 받아오는 것을 볼 수 있다.

 

	// 5.수정하기
	// @RequestMapping("/api")
	@PutMapping("/review/{num}") // JSON으로 넘어왔을 때 처리
	public ResponseEntity<Review> update(@RequestBody Review review, @PathVariable int num) {
		System.out.println("수정확인하자  "+num);
		review.setNum(num);
		reviewService.modifyReview(review);
		return new ResponseEntity<Review>(review, HttpStatus.OK);
	}

외않되???

내 황금같은 토요일, 개인공부도 못하고 , 고문만 받아 ,나 ㅎㄷㅁㅁㅇㅎㅁㅇㅎㅁㅇㅎㅁㅇㅎㅁㅇㅎ