Network&etc/HTTP (16) 썸네일형 리스트형 리엑트 크롬 쿠키 저장안됨 해결 분명히 응답헤더에는 set-cookies가 잘찍히는데 브라우저 쿠키에 자동으로 저장이 안된다면? 원인은 sameSite였다. 명시하지않더라도 크롬정책에 의하여 기본값으로 세팅되어있다고한다. 해결방법은 서버에서 쿠키 구울때 sameSite:none랑 secure옵션을 추가해보자. 단 이렇게될경우 https에서만 작동된다. http 즉 로컬(http://localhost:3000/)로 개발할때는 크롬에서 막아 저장되지않으니 참고. router.post( "/", async (res, req) => { const jwt = 'test' const cookieOptions = { // sameSite: "strict", sameSite: "none", httpOnly: true, secure: true, // .. [400에러] Unexpected token o in JSON at position 1 error HTTP POST 전송도중 400에러와 SyntaxError에러를 만났다. SyntaxError는 자바스크립트 문법에 맞지않는 문을 해석할 때 발생하는 에러 객체라고 한다. 400은 서버로보낸 요청이 잘못되었을때 생기는 에러라고한다. JSON.parse도중에 발생한 에러인것을보니 JSON.stringify로보낸 객체를 parse하는 과정에서 발생한듯하였다. 웹브라우저에서 값이 어떻게 넘어가는지 디버깅을해보니 weather값과 count값관련하여 서버에서는 int를 원하지만 문자열로 넘어가는것을 확인하였다. 그래서 parseInt로 감싸 해결하였다. async function setVote(type, value){ const date = new Date().toUTCString()//utc await fe.. url 특수문자 처리 encodeURIComponent <-> decodeURIComponent url에 간혹 &와 같은 특수문자가 포함되기도하는데 그냥보내버리면 인식을 못한다고한다. 그럴경우 encodeURIComponent로 감싸주면된다! 예를들어 #000000의 경우 encodeURIComponent(#000000)이런식으로 하면됨 만약 인코딩한값을 html에 뿌리게될경우 #000000이아니라 %25000000이되는데 그럴경우 decodeURIComponent로 감싸주면된다. 참고로 인코딩이란 컴퓨터 정보의 형태나 형식을 표준화, 보안, 처리 속도 향상, 저장 공간 절약 등을 위해서 다른 형태나 형식으로 변환하는 것을 말한다. 쉽게말해 잘 사용할수있게 변환하는 것? 문자 인코딩, 동영상 인코딩이라는 용어로 자주사용한다. 예시코드 프론트 const tokenIdsArr = Object.keys(.. Rest API 사용시 Caching 주의 이미지파일이나 css, js에서만 캐시가 가능한줄 알았는데(Cacheable) Rest API에서도 가능하다는것을 배우게되었다. Get 요청, Head의 경우 웹브라우저상에서 캐싱이 쌓이기 때문에 데이터는 변경될지언정 웹브라우저에서 상에서는 이전 데이터를 보여줄수있으니 매우 주의 ㅠㅠㅠ... 여담으로 다른 메소드(post, patch)들은 본문내용까지 캐시키로 고려해야해서 구현이 쉽지안다고함 캐시로 쓰이는지 확인하는법 네트워크 탭에서 status가 연한색이면 캐시가 활용된것이라함 해결 방법1 쿼리스트링추가 1~1000까지의 랜덤한 숫자를 쿼리스트링으로 붙여서 캐싱문제를 해결함 let randomNum = Math.floor(Math.random() * 1000 + 1) await fetch(`...?v=.. cors 에러와의 만남 드디어 코스에러를 만나 호되게 삽질을 했다. 마치 프엔 신고식 같은 느낌ㅋㅋ proxy서버로 우회하는방법?은 요새 안통하는듯 하다. 1. API 402에러 - 백엔드 서버문제 2. server cors() 설정 노드 index.js 혹은 port를 실행하는곳으로 이동. 나같은경우 착각을했었는데 https로 시작하는경우 리엑트 프로젝트 server폴더가 아니라 관련 API를 제작한 프로젝트의 서버 index.js 를 찾아야한다. const cors = require('cors') app.use(cors()) 만약에 cors()설정을 내 환경에서만 하고싶으면 config에 추가 if(config.allow_cors) app.use(cors()) 3. 클라이언트 문제 해결방법이 여러가지가있는데 Access-C.. Failed to load resource: the server responded with a status of 404 (Not Found) 404에러 url, api자체를 인식 못할때 발생 경로가 잘못되어서 그럴수도있고 아니면 서버단에 정상 반영이 안되어있어서 그럴확률이 높다. fetch와 axios 모듈화 예제 fetch 특징: axios에 비해 header와 body에 처리가 필요함(옵션이라던지 제이슨처리 등). 자바스크립트에서 제공해줌, 과거에는 인터넷익스플로어에서는 미지원한다했는데 요새는..? export const fetchPost = async(url, requestBody) =>{ return await fetch(url, { method : "POST", headers: { 'Content-Type': 'application/json; charset=utf-8', 'dataType': 'json', }, body: JSON.stringify(requestBody) }) } //fetchGet //fetchPut //fetchDelete //통신 상태 처리 export const checkStatus.. [fetch] url form data 예시 https://blog.joyfui.com/1206 fetch url form data는 "no=1&name=blabla" 이러한 형태임 json이랑 다른형태 사용시 주의해야할점! 기존에 json으로 되어있지않은지 점검 'Content-Type': 'application/x-www-form-urlencoded' res.status성공(200)이면 return res.json() 안해도됨 function create_seeker() { let strURL = '/api/주소' let form = document.forms[0] let form_data = new FormData(form) let url_form_data = new URLSearchParams(form_data) const init = { .. 이전 1 2 다음
