[아폴로버전문제] 파일 업로드 에러 : This operation has been blocked as a potential Cross-Site Request Forgery (CSRF). Please either specify a 'content-type' header

스토리지에 사진을 업로드해야하는데 아래 에러가 계속 발생했다 

 

 

{
    "errors": [
        {
            "message": "This operation has been blocked as a potential Cross-Site Request Forgery (CSRF). Please either specify a 'content-type' header (with a type that is not one of application/x-www-form-urlencoded, multipart/form-data, text/plain) or provide a non-empty value for one of the following headers: x-apollo-operation-name, apollo-require-preflight\n",
            "extensions": {
                "code": "BAD_REQUEST",
                "stacktrace": [
                    "BadRequestError: This operation has been blocked as a potential Cross-Site Request Forgery (CSRF). Please either specify a 'content-type' header (with a type that is not one of application/x-www-form-urlencoded, multipart/form-data, text/plain) or provide a non-empty value for one of the following headers: x-apollo-operation-name, apollo-require-preflight",
                    "",
                    "    at new GraphQLErrorWithCode (C:\\Moco_learning\\codecamp-backend\\class\\section13\\13-01-file-upload\\node_modules\\@apollo\\server\\src\\internalErrorClasses.ts:15:5)",
                    "    at new BadRequestError (C:\\Moco_learning\\codecamp-backend\\class\\section13\\13-01-file-upload\\node_modules\\@apollo\\server\\src\\internalErrorClasses.ts:116:5)",
                    "    at preventCsrf (C:\\Moco_learning\\codecamp-backend\\class\\section13\\13-01-file-upload\\node_modules\\@apollo\\server\\src\\preventCsrf.ts:91:9)",
                    "    at ApolloServer.executeHTTPGraphQLRequest (C:\\Moco_learning\\codecamp-backend\\class\\section13\\13-01-file-upload\\node_modules\\@apollo\\server\\src\\ApolloServer.ts:1044:20)",
                    "    at processTicksAndRejections (node:internal/process/task_queues:95:5)"
                ]
            }
        }
    ]

 

⚠️ The graphql-upload package has a known CSRF vulnerability and is turned on by default in version of Apollo Server 2.25.4 and below. If you are using Apollo Server 2 and do not use uploads, you can disable them by passing uploads: false to the ApolloServer constructor. If you do use uploads, you must update to Apollo Server 3.7 or later and ensure CSRF prevention is enabled to use this feature safely.

The third-party graphql-upload package has a known CSRF vulnerability.

The graphql-upload package adds a special middleware that parses POST requests with a Content-Type of multipart/form-data. This is one of the three special Content-Types that can be set on simple requests, enabling your server to process mutations sent in simple requests.

Apollo Server 4's default CSRF prevention feature blocks those attempting to use the graphql-upload package. If you use graphql-upload you should keep the CSRF prevention feature enabled, and configure your upload clients to send a non-empty Apollo-Require-Preflight header.

For example, if you use the apollo-upload-client package with Apollo Client Web, pass {headers: {'Apollo-Require-Preflight': 'true'}} to createUploadLink.

 

 

 

 

POST 요청을 보낼 때 헤더에 Apollo-Require-Preflight : true를 추가해줬더니 문제가 해결됐다. 

graphQL로 넘겨주는데, 이 때 미들웨어에서 Content-Type에 multipart/form-data가 추가되어 보내진다. 여기서 에러가 나는거라 이를 simple request로 바꿔 해결할 수도 있다고 한다. 

나는 위에서 붉은색 처리를 한 속성을 추가해줬다.

 

 

 

 

동일한 문제

이미지 업로드 API - graphql postman uploadFile 시 headers 문제 - 인프런 | 질문 & 답변

 

https://www.apollographql.com/docs/apollo-server/security/cors/

Configuring CORS