지정된 Origin의 중요성과 사전요청/Content-type에 대해(CORS도있음)

• 다음과 같이 serve 유틸리티를 이용해 클라이언트를 실행하고, 서버의 Access-Control-Allow-Origin을 클라이언트의 origin으로 특정해 보세요. 지정한 origin외에 다른 곳에서 접근이 가능한가요?

const defaultCorsHeader = {
  'Access-Control-Allow-Origin': 'http://localhost:4999/',
  'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
  'Access-Control-Allow-Headers': 'Content-Type, Accept',
  'Access-Control-Max-Age': 10
};

'Access-Control-Allow-Origin': '*'에서 'Access-Control-Allow-Origin': 'http://localhost:4999/',로 바꿔 줬더니 실행했을때 서버에서 타입에러가난다.

네트워크에서 요청 헤더의 Origin:null 인데 'http://localhost:4999'똑같은 origin이 아니라서 오류가 나는것같다.(blocking)

답은 접근이 불가능하다

• 클라이언트 코드(App.js)의 요청 헤더를 수정해 봅시다. Content-Type 을 text/plain 으로 수정해 보세요. preflight request 가 발생하나요? 발생하지 않는다면 그 이유는 무엇일까요?

post(path, body) {
    fetch(`http://localhost:4999/${path}`, {
      method: 'POST',
      body: JSON.stringify(body),
      headers: {
        'Content-Type': 'application/json'//이녀석을 text/plain으로 바꿔줘도 잘실행이된다
      }
    })
      .then(res => res.json())
      .then(res => {
        this.render(res);
      });
  }

사전요청이 발생하지않는데 여기서

사전 요청 (Preflight request) 이란

교차 출처 리소스 공유 (CORS) 사전 요청은 본격적인 교차 출처 HTTP 요청 전에 서버 측에서그 요청사전 요청 (Preflight request) 이란

Preflight request는
HTTP Header

"Access-Control-Request-Method"
"Access-Control-Request-Headers"
"Origin"

위 총 3가지의 HTTP request header를 사용하는 HTTP Method ("OPTIONS") 요청 입니다.

즉, 본 요청을 보내기 전에 먼저 본 요청에 대한 권한을 확인 하는 작업을 통하여, 본 요청이 유효할 수 있는지 체크 할 수 있습니다.
동일한 요청에 대해서는 'Access-Control-Max-Age" 헤더를 이용하여 정해진 기간 내에는 사전 요청에 대한 응답이 선택적으로 이루어 질 수 있습니다.의 메서드와헤더에 대해 인식하고 있는지를 체크 하는 것 입니다.

동일한 요청에 대해서는 'Access-Control-Max-Age" 헤더를 이용하여 정해진 기간 내에는 사전 요청에 대한 응답이 선택적으로 이루어 질 수 있습니다.

 

그렇다면 'application/json'과 'text/plain' 의차이는 무엇일까?

우선 content-type이란 간단히 말해 보내는 자원의 형식을 명시하기 위해 헤더에 실리는 정보 이다. 이 값은 표준 mime-type중의 하나이다.

 Content-Type 의 종류는 여러가지가있는데 앞에 있는 application과 text를 보면 사용용도를 알수있다.

application은  앱안의 언어를 명시해주는것이고

text는 말그대로 text형식으로 보내준다는것이다 이와 관련해서 다양한 정보들을 찾아보았는데 아래와 같은형태로 명시해서 보내준다고생각하면될것같다.

Content-Type

1) Multipart Related MIME 타입

  - Content-Type: Multipart/related <-- 기본형태

  - Content-Type: Application/X-FixedRecord

 

2) XML Media의 타입

 - Content-Type: text/xml

 - Content-Type: Application/xml

 - Content-Type: Application/xml-external-parsed-entity

 - Content-Type: Application/xml-dtd

 - Content-Type: Application/mathtml+xml

 - Content-Type: Application/xslt+xml

 

3) Application의 타입 

 - Content-Type: Application/EDI-X12 <--  Defined in RFC 1767 

 - Content-Type: Application/EDIFACT <--  Defined in RFC 1767 

 

 - Content-Type: Application/javascript <-- Defined in RFC 4329 

 - Content-Type: Application/octet-stream  : <-- 디폴트 미디어 타입은 운영체제 종종 실행파일, 다운로드를 의미

 - Content-Type: Application/ogg <-- Defined in RFC 3534

 - Content-Type: Application/x-shockwave-flash <-- Adobe Flash files

 - Content-Type: Application/json <-- JavaScript Object Notation JSON; Defined in RFC 4627 

 - Content-Type: Application/x-www-form-urlencode <-- HTML Form 형태

* x-www-form-urlencode와 multipart/form-data은 둘다 폼 형태이지만 x-www-form-urlencode은 대용량 바이너리 테이터를 전송하기에 비능률적이기 때문에 대부분 첨부파일은 multipart/form-data를 사용하게 된다.

 

4) 오디오 타입

- Content-Type: audio/mpeg <-- MP3 or other MPEG audio

- Content-Type: audio/x-ms-wma <-- Windows Media Audio;

- Content-Type: audio/vnd.rn-realaudio <--  RealAudio;  등등 

 

5) Multipart 타입

- Content-Type: multipart/mixed: MIME E-mail; 

- Content-Type: multipart/alternative: MIME E-mail;

- Content-Type: multipart/related: MIME E-mail <-- Defined in RFC 2387 and used by MHTML(HTML mail) 

- Content-Type: multipart/formed-data  <-- 파일 첨부

 

6) TEXT 타입 

- Content-Type: text/css

- Content-Type: text/html

- Content-Type: text/javascript

- Content-Type: text/plain

- Content-Type: text/xml

 

7) file 타입

- Content-Type: application/msword <-- doc

- Content-Type: application/pdf <-- pdf

- Content-Type: application/vnd.ms-excel <-- xls

- Content-Type: application/x-javascript <-- js

- Content-Type: application/zip <-- zip

- Content-Type: image/jpeg <-- jpeg, jpg, jpe

- Content-Type: text/css <-- css

- Content-Type: text/html <-- html, htm

- Content-Type: text/plain <-- txt

- Content-Type: text/xml <-- xml

- Content-Type: text/xsl <-- xsl

출처 : https://juyoung-1008.tistory.com/4