2017-11-22 21 views
0

localhost에서 실행중인 서버 (즉, /의 디렉토리 목록)에서 자원을 페치 (fetch)하려고하는 파일 시스템에서 정적 페이지를 엽니 다. 브라우저는이 요청을 전달하기를 거부하고 제안 : 나는 다음과 같은 방법으로 명시 사용하는 서버 측에서'no-cors'모드에서 리소스를 가져올 때 body-parser가 실패하는 이유는 무엇입니까?

let body=JSON.stringify({action:"listfiles",path:"/"}) 

let headers = new Headers() 
headers.append("Content-Type", "application/json");    

fetch('http://localhost:9000/ajax',{ 
    method: 'POST', 
    headers: headers, 
    body: body, 
    mode: 'no-cors' 
}).then(
    response=>response.json() 
).then(
    data=>this.onload(data) 
) 

:

그런 다음

If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

나는 '노 고르'를 사용하지 않는 요청을 제출 :

app.use('/ajax',bodyParser.json()) 

app.post("/ajax",function(req,res){  
    let action=req.body.action 
    console.log(`ajax ${action}`) 
} 

브라우저를 통해 요청을 할 수 있습니다, 심지어 app.post 그냥 요청 본문 corre 구문 분석되지 않으며, 요청을 얻을이 시간 ctly 대신 'listfiles'action에 대한 undefined 값을 얻습니다. (localhost에서 페이지를로드해도 같은 문제가 발생하지 않습니다.)

+0

https://stackoverflow.com/questions/42254685/text-response-is-empty-when-using-fetch/42255007#42255007 및 https://stackoverflow.com/questions/43317967/handle-response- syntaxerror-unexpected-end-of-input/43319482 # 43319482. 당신은 기본적으로 "mode : 'no-cors'"를 사용하고 싶지 않습니다. 브라우저가 프론트 엔드 JavaScript가 응답 본문과 헤더에 액세스하는 것을 완전히 차단합니다. – sideshowbarker

답변

1

원점 간 호출을하려고하기 때문에 (file: 프로토콜은 http: 프로토콜과 다릅니다). 동일 원점 프로토콜은 브라우저에 의해 시행되므로 서버가 요청을 보는 것은 당연한 일입니다. 요청에 브라우저가 코드에 응답을 제공 할 수 있도록 CORS 헤더가 없으므로 요청에 CORS 헤더가 포함되지 않습니다. CORS를 사용 중지했습니다. https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS에서

+0

내 문제는 내 요청이 프리 플라이트를 유발한다는 것입니다. 내 요청에 'application/json'Content-Type 헤더가있어 body-parser가 json을 파싱합니다. 허용 된 헤더 만 포함하고 특히 Content-Type 헤더 (허용 된 헤더) 허용 된 값이 application/x-www-form-urlencoded 인 경우 간단한 GET, HEAD, POST 요청 만 프리 플라이트를 트리거하지 않습니다. multipart/form-data 및 text/plain을 사용하여 요청을 단순화 할 수 있습니다. – sbtpr

+1

@sbtpr : 아니요, 프리 플라이트를 트리거하지 않았더라도 실제 POST 응답에서 관련 헤더를 설정해야합니다. (프리 플라이트가있는 경우 ** 두 응답에 모두 포함되어야합니다. 그렇지 않은 경우 GET/POST/HEAD 응답에만 적용됩니다.) –

0

:.

"십자가 리소스 공유 표준 서버가 웹 브라우저를 사용하여 해당 정보를 읽어 허용 기원의 집합을 설명 할 수 있도록 새로운 HTTP 헤더를 추가하여 작동 또한, 서버의 데이터 (특히 GET 이외의 HTTP 메소드 또는 특정 MIME 유형의 POST 사용)에 부작용을 일으킬 수있는 HTTP 요청 메소드의 경우, 브라우저가 요청을 "프리 플라이트 (preflight)"하여 지원되는 메소드를 서버에서 HTTP OPTIONS 요청 방법을 사용하고 서버에서 "승인"하면 실제 HTTP 요청 방법으로 실제 요청을 보냅니다. "

내 요청의 문제는 단순한 자격이 없다는 것입니다. 이는 body-parser 미들웨어가 문서 본문을 json으로 구문 분석하기 위해 Content-Type: application/json 헤더를 포함하기 때문입니다. 따라서 프리 플라이트 요청을 트리거합니다.

"단순 요청

일부 요청은 CORS의 프리 플라이트를 트리거하지 않습니다. 사람들은 불린다"이 문서에 간단한 요청 "는이 용어를 사용하지 않습니다 (CORS를 정의) 사양을 가져 오기하지만. CORS 프리 플라이트 - 소위 "간단한 요청"을 유발하지 않는 요청은 다음의 모든 조건을 충족 한 -is : ... "여기에 나열된

조건 메소드, 헤더에 대한 제한이 포함됩니다 설정할 수 있습니다. 자세한 내용은 의사에게 문의하십시오.

I 사용하는 방법 (POST)가 Content-Type 헤더 설정도 간단 요청에 허용되고, 반면가 간단한 요청을 허용하고, 콘텐츠 유형에 대한 유일한 가능한 값

application/x-www-form-urlencoded 
multipart/form-data 
text/plain 

용이다 간단한 자격 요건.

내 서버가 프리 플라이트 요청을 알지 못하므로 내 요청을 제대로 처리하지 못하는 것이 당연합니다.

예상대로 작동하기 위해 클라이언트와 서버 측에서 전달해야하는 추가 헤더에 대한 설명도 참조하십시오.

+1

note [here] (https://stackoverflow.com/questions/47436830/)를 참조하십시오. 왜 body-parser-fail-when-i-fetch-the-no-cors-mode/47436936? noredirect = 1 # comment81835710_47436936); 요청이 단순하지 않다는 사실 만이 CORS 없이는 작동하지 않습니다. –

+0

좋아, 이제 알 수있다. 실제로 서버에 요청을 전달할 수 있으면 추가 헤더가 필요합니다. 나는이 요청이 Origin (Referer?)이고 응답 Access-Control-Allow-Origin이라고 믿는다. – sbtpr

+0

예. (Referer가 아닌 Origin) 최소한 "Access-Control-Allow-Headers"가 필요할 것이다. –