Discourse에서 외부 리소스 Ajax 요청 오류(CSP)를 수정한 방법

개발
1

AJAX 요청에서 문제가 발생하여 strict-origin-when-cross-origin Content Security Policy(CSP) 지시문이 원인일 수 있다고 생각하신다면, 문제를 해결하기 위해 시도해 볼 수 있는 몇 가지 방법이 있습니다(Chrome Devtools의 에러 콘솔에서 확인하십시오):

  1. 서버가 프리플라이트(preflight) 요청과 실제 AJAX 요청 모두에 대해 Access-Control-Allow-Origin 헤더를 포함하도록 구성되었는지 확인하십시오. 이 헤더는 지정된 오리진(origin)에서 리소스에 액세스할 수 있도록 허용합니다.

cors 라이브러리를 사용하여 Node.js 서버에서 Access-Control-Allow-Origin 헤더를 구성하는 예시는 다음과 같습니다:

const cors = require('cors');

app.use(cors({
  origin: 'http://example.com',
  optionsSuccessStatus: 200
}));

대신, 서버 측 코드에 Access-Control-Allow-Origin 헤더를 직접 포함할 수도 있습니다. 예를 들어 Node.js 서버에서는 다음과 같이 헤더를 설정할 수 있습니다:

res.setHeader('Access-Control-Allow-Origin', '*');
  1. 서버가 프리플라이트 요청과 실제 AJAX 요청에서 사용되는 헤더를 허용하도록 구성되었는지 확인하십시오. 이는 이러한 헤더를 Access-Control-Allow-Headers 헤더에 포함시켜 수행할 수 있습니다.

Node.js 서버에서 Access-Control-Allow-Headers 헤더를 구성하는 예시는 다음과 같습니다:

const http = require('http');

const server = http.createServer((req, res) => {
    
    // 모든 오리진에서 리소스에 액세스할 수 있도록 허용하려면 이 줄을 추가하십시오
    res.setHeader('Access-Control-Allow-Origin', '*'); 
    // 지정된 HTTP 메서드 사용 허용을 위해 이 줄을 추가하십시오
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, PATCH, OPTIONS'); 
    // 지정된 헤더 사용 허용을 위해 이 줄을 추가하십시오
    res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization, discourse-present, discourse-logged-in, discourse-track-view'); 

    if (req.url === '/getTopicLikes') {
        console.log('Request received');
        res.writeHead(200, { 'Content-Type': 'application/json' });
        res.end(JSON.stringify({ likes: 100 }));
    } else {
        res.writeHead(404);
        res.end();
    }
});

server.listen(3000, () => {
    console.log('Server started on port 3000');
});

process.on('SIGINT', () => {
    console.log('Shutting down the server');
    server.close();
});

Discourse에 특화된 두 가지 추가 허용 헤더에 유의하십시오:
discourse-present, discourse-logged-in, discourse-track-view

이 단계들이 AJAX 요청 문제를 해결하는 데 도움이 되기를 바랍니다. 질문이 있으시면 알려 주십시오.

4개의 좋아요