has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. 오류 처리

vue.js나 react등을 노드에서 로컬에서 작업할 때 서버에 리퀘스트 요청을 하면

아래와 같은 CORS 오류가 생긴다. 

이를 proxy설정으로 간단히 해결 할 수 있다.

 

1. vue.config.js 파일의 module.exports괄호 안에 프록시 설정을 한다.

예)

  	module.exports = {
    	publicPath: process.env.VUE_APP_PUBLIC_PATH,
    	devServer: {
      	proxy: {
        	'^/api': {
          	target: '서버 url',
          	ws: true,
          	changeOrigin: true,
          	pathRewrite: {
            	'^/api': ''
          			}
        		},
      		}
  		}
  	}

 

 

2. .env.local 파일의 path를 변경한다.

예)

 

# Public Path
VUE_APP_PUBLIC_PATH=/

# Ajax data수신용
VUE_APP_API_URL=api/example/porter

# 서버 url 페이지 이동용
VUE_APP_SUBMIT_URL=api/example/porter

# 로그인URL
VUE_APP_LOGIN_URL=최초 화면path

# 크로스 도메인의 쿠키 대응flag
VUE_APP_COOKIE_FLAG=true

 

*참조

https://crunchify.com/how-to-fix-access-control-allow-origin-issue-for-your-https-enabled-wordpress-site-and-maxcdn/

How to fix Access-Control-Allow-Origin (CORS origin) Issue for your HTTPS enabled WordPress Site and MaxCDN • Crunchify