CodeHoon

로컬 호스트(localhost) 에서 REST API를 이용, Axios 를 이용, Ajax를 이용하는데에 있어서 CORS 에러가 자주 발생한다.

이 방법은 localhost 에서 발생하는 CORS 오류를 막는 것이다. 

(만약 PUBLIC 으로 배포하였을 때에는 해당되지 않는다.)

구글 크롬 extension의 CORS Changer를 사용하면 단번에 해결이 된다.

[ 다운로드 - 확장 - 새로고침 ]

이 세 단계로 모두 해결된다.

REST API - AXIOS 를 사용하는데에 자꾸 localhost에서만 해당 api를 가져올 수 없다고, CORS 에러가 발생하길래 어쩔 수 없이 사용하였다.

해당 내용처럼 잘 출력된다. 하지만 로컬에서는 안됐다는 점..

■ 에러내용

Access to XMLHttpRequest at 'request url' from origin 'http://localhost:8081' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Vue.js 에서 회원 로그인 정보를 php 로 axios를 통해 보내고 200 success response를 받았다.

하지만 그 내용을 오류로 넘기고 싶을 때 처리하는 방법

.then((response) => {
          if( response.data == false ) {
              throw new Error('no data from server');
          } else {
              console.log('success');
           }
        })

        .catch((error) => {
            console.log(error);
            this.errors.push("회원정보가 존재하지 않습니다.");
        });

then() 내에서 new Error로 넘겨주면,
아래 catch(error) 에서 해당 에러를 출력해준다.
그리고 this.errors.push 를 통해 error라는 id 를 가진 html 태그에 에러 내용을 출력해준다.

■ 신경쓸 점

1. throw new Error( )

throw를 통해 새로운 에러 객체를 생성하는 작업. 
이 작업을 통해 catch가 에러를 인식하고 해당 내용을 출력한다.

2. catch(error) => {   

Arrow function의 인스턴스 함수의 기능을 이용하여,
에러 함수 내에서 전역변수( this. )를 사용할 수 있게 한다.

Linux, Ubuntu, Vue-cli, axios를 사용하는데, proxy 에러가 출력되었다.

Proxy error: Could not proxy request 

■ 해결 방법

해당 에러는 root 경로의 vue.config.js 에서 proxy 관련 정보를 수정하면 된다.

/vue.config.js

module.exports = {
  devServer: {
    proxy: {
      "/api": {
        target: "https://localhost:8081/",
      },
    },
}

기본 경로(/root)가 될 port 번호와 정보를 작성하면 된다.

proxy 문제가 해결된것을 확인하실 수 있습니다.

이렇게 axios를 이용해서 데이터를 올바른 경로에서 뽑아오면 되겠습니다.

Vue.js 3 + bootstrap이 되지 않아 Vuetify를 설치하려고 하였다. 그러나,,,

Vue.js 3 - Vuetify 를 설치하던 와중 에러 발생.

Error: You cannot call "get" on a collection with no paths. Instead, check the "length" property first to verify at least 1 path exists.
    at Collection.get (/usr/local/lib/node_modules/@vue/cli/node_modules/jscodeshift/src/Collection.js:213:13)
    at injectOptions (/usr/local/lib/node_modules/@vue/cli/lib/util/codemods/injectOptions.js:15:6)
    at runTransformation (/usr/local/lib/node_modules/@vue/cli/node_modules/vue-codemod/dist/src/runTransformation.js:60:17)
    at /usr/local/lib/node_modules/@vue/cli/lib/Generator.js:290:23
    at Array.forEach (<anonymous>)
    at Generator.resolveFiles (/usr/local/lib/node_modules/@vue/cli/lib/Generator.js:276:24)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async Generator.generate (/usr/local/lib/node_modules/@vue/cli/lib/Generator.js:175:5)
    at async runGenerator (/usr/local/lib/node_modules/@vue/cli/lib/invoke.js:111:3)
    at async invoke (/usr/local/lib/node_modules/@vue/cli/lib/invoke.js:92:3)

이렇게 또 에러가 발생하였다.

에러 원인 : "아직 지원을 하지 않는다?"

예. 또 지원을 안합니다. (vue3 어따가 써먹냐)

다운그레이드(down grade)를 하던가 다른 css framework를 사용하던가 해야하는데, 뭐가 남았을까용?

tailwind는 되나 실행해보러 갑니다.

 Vue.js 3, Cli - bootstrap 을 적용하던 와중 발생한 에러.

Uncaught TypeError: Cannot read properties of undefined (reading 'prototype') at eval 

해당하는 에러가 발생하였다. 

에러 발생 원인 - 아직 지원하지 않는다?

여러 문서들을 뒤적거린결과, bootstrap은 아직  Vue.js 3를 지원하지 않는다고 합니다... ㅠ

그렇기 때문에 Vue.js 3 => Vue.js 2  [downgrade] 를 해주시거나,

다른 css 프레임워크를 사용해주시면 되겠습니다... ㅠㅠ

java.lang.NullPointerException: Attempt to invoke virtual method 
'android.view.WindowInsetsController com.android.internal.policy.DecorView
.getWindowInsetsController()'on a null object reference

전체화면 적용 중에 

해당되는 에러가 발생하였다.

이 이유는 onCreate() 안에서 setContentView가 선언되기 전에 전체화면 적용하는 코드를 작성하였기 때문이다.

이와 같이 setContentView(binding.root) 가 끝난 후에 해당 내용을 작성해주는 것으로 이동시키면 해결.

안녕하세요 상훈입니다.

Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0

Vue.js , API, Fetch(), 비동기 통신 간에 에러가 발생하였습니다. 

이 에러가 처음에는 제가 오타를 내서 발생한 에러인줄 알았으나(근데 오타도 있었음), 

오타의 문제가 아니었습니다.

1. F12 -> Network 를 확인해주세요.

2. api를 가져올 때 주소를 잘못 작성한 것을 저는 확인하였습니다. 

그리고 다시 url_base를 사용하니 원활히 출력되었습니다!

주소 주의하세욤..

이상입니다.

참고

안녕하세요 상훈입니다.

Vue.js 3,  Tailwind.css 를 설치하여 프로젝트를 npm run serve 를 통해 실행하였는데 에러가 발생하였습니다.

 ERROR  Failed to compile with 1 error                                                                                                                                                                            오후 6:00:02
 error  in ./src/index.css

Syntax Error: Error: Loading PostCSS Plugin failed: Cannot find module 'tailwindcss'
Require stack:
- D:\Projects\loading-view\noop.js

(@D:\Projects\loading-view\postcss.config.js)
    at Array.map (<anonymous>)


 @ ./src/index.css 4:14-157 15:3-20:5 16:22-165
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.219.105:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

개략 Tailwindcss의 module을 찾을 수 없다는 문제인데요, 

$ npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

를 명령어로 입력(설치)해주신 뒤,

module.exports = {
  purge: {  content: ['./public/**/*.html', './src/**/*.vue'] },
  //  ...
}

위의 내용을

 이와 같이 tailwind.config.js 에 작성해주고 저장해주세요.

그리고 다시 프로젝트 구동 "npm run serve" 해주시면 정상적으로 실행이 됩니다.

이상입니다.

참고