javascript/ajax에서 Incoming Webhook에 POST하기 전에 붙어있는 부분

Incoming Webhook을 슬랙에 추가

구현

우선 최종 형태.

function submit() {
  const url = "https://hooks.slack.com/services/xxxxxxxxxx";
  const data = {
    text: "testです"
  };

  const xml = new XMLHttpRequest();
  xml.open("POST", url, false);
  xml.setRequestHeader("content-type", "application/x-www-form-urlencoded;charset=UTF-8");
  xml.send(`payload=${JSON.stringify(data)}`)
}

막힌 곳

오류Access to fetch at 'https://hooks.slack.com/services/・・・' from origin 'null' has been blocked by CORS policy: Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.
해당 부분"Content-Type": "application/json; charset=utf-8"
이유
h tps : // s t c ゔ ぇ rf ぉ w. 코 m / 쿠에 s 치온 s / 45752537 / s ぁ CK - 닌코 민 g ぇ b 호오 쿠 루 쿠에 ste t- 어우 ぇ d-by-

프런트 엔드 JavaScript에서 JSON을 예상하는 API 엔드포인트에 게시할 때 해당 Content-Type: application/json 헤더를 요청에 추가하는 것이 정확히 해야 합니다. 하지만 이 경우는 아닙니다. 특정 API 엔드포인트는 이를 제대로 처리하지 않기 때문입니다.
'Content-type': 'application/json'를 삭제하라는 것.

그래서 삭제해 보면 400이 돌아온다.
Ajax (XMLHttpRequest)를 사용했지만 jQuery $.ajax에서 보내는 사람이 있었기 때문에 참고로 $.ajax에서 시도하면 보낼 수있었습니다.

차이를 확인하면 분명히 contentType가 다른 것 같습니다.
$.ajax의 초기값은 'application/x-www-form-urlencoded; charset=UTF-8'
htp://js. s ぢ 오 킨 g m. 코 m / j 쿠에 ry / 아자 x / 아자 x

그러나 Ajax (XMLHttpRequest)의 초기 값은 'text/plain;charset=UTF-8'

xml.setRequestHeader("content-type", "application/x-www-form-urlencoded;charset=UTF-8");

를 추가하여 해결할 수 있었다.
단지 텍스트라서 보내고 있었기 때문에 에러가 되어 있었군요.