CORS policy 에러

오늘은 웹접속시 매우 많이 겪는 에러인 CORS 관해서 포스팅 해보려 합니다.

 

Access to fetch at 'URL주소' from origin 'URL 주소' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

 

위와 같은 에러를 개발자도구에서 굉장히 많이 봤었는데 구글링해보면 소스코드를 다시 짜야한다~~ 이런 방안 밖에 없어서 답답한 경험이었는데요! 저와 같은 어려움을 겪고 계실 분들을 위해 제 해결 방안을 써보겠습니다.

 

우선 저는 웹접속시 사용하는 주소가 ingress를 사용중이었습니다. 그리고 해당 ingress와 관련된 config 파일이 존재합니다.

[root@master ~]# kubectl get cm -A |grep gateway-config
api-gateway-system                  gateway-config                                           1      4d21h

[root@master ~]# kubectl edit cm -n api-gateway-system gateway-config
apiVersion: v1
data:
  traefik.yml: |
    http:
      serversTransports:
        insecure:
          insecureSkipVerify: true
        tmaxcloud:
          serverName: @
          rootCAs:
            - @
        kubernetes:
          rootCAs:
            - /run/secrets/kubernetes.io/serviceaccount/ca.crt
      middlewares:
        dashboard-auth:
          basicAuth:
            users:
              - "admin:@"
        cors-header:
          headers:
            accessControlAllowMethods:
              - "*"
            accessControlAllowHeaders:
              - "*"
            accessControlAllowOriginList:
              - "https://test.cloud.link"
            accessControlAllowOriginListRegex:
              - "([a-z]+)\\.cloud\\.link"
            accessControlMaxAge: 100
            addVaryHeader: true
        hypercloud-stripprefix:
          stripPrefix:

해당 cm의 cors-header 부분에 ingress주소와 아래의 accessControlAllowOriginListRegex 값을 제대로 세팅해주고 나면 접속시에 cors에러가 사라지는 것을 보실 수 있습니다.