XMLHttpRequestを利用してのクロスドメインでのajax通信がAccess-Control-Allow-Originが足りていない為行えない

Question

これまでjqueryの.ajaxで通信を行っていた箇所をXMLHttpRequestに変更しようとしています。
ドメインをまたぎ、アクセス先はjavaになります。
jqueryを利用していた時はアクセスが可能でしたが、XMLHttpRequestですとクロスドメイン制約に引っかかってしまい、アクセスが出来ません。
どのあたりの設定が足りていないのでしょうか？
よろしくお願いします。

ResponseUtil.getResponse().setHeader("Access-Control-Allow-Origin", "*");

旧コード

$.ajax({
	url : url,
	type : "post",
	dataType : "json",
	cache : false,
	data : {
		"test" : "test"
	}
});

新コード：Access-Control-Allow-Originでエラー

	var request = new XMLHttpRequest();
	request.onreadystatechange = function() {
	    if (request.readyState === 4) {
	        if (request.status != 200) {
	    		console.log("error");
	        }
	    }
	}
	request.onload = function(json){
		console.log("true");
	}
	var data = [];
	data.test = "test"
	
	request.open("POST", url, true);
	request.setRequestHeader("Content-Type", "application/json");
	request.send(JSON.stringify(data));

Comments

[yambejp]

旧コードは取得できていたということですね？

[Kaso]

そうです。

[yambejp]

サーバー側の設定はそれ以上は不要です
js側の呼び出し方の問題です。

Answer 1

var xhr = new XMLHttpRequest();
xhr.open("post",url);
xhr.responseType = 'json';
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4 && xhr.status == 200) {
    console.log(xhr.response);
  }
}
var data=new FormData();
data.append("test","test");
xhr.send(data);

Comments

[yambejp]

いまさらXHR感があるので普通はfetch

const method="post";
const body=new FormData();
body.append("test","test");
fetch(url,{method,body}).then(res=>res.json()).then(console.log);

[Kaso]

ありがとうございます！無事呼び出しが出来ました。
なるべく広いブラウザで取得可能にする。jqueryを使わずネイティブJSのみで完結する。polyfillは使わないが課題でした。fetchはIEで引っかかってしまうので今回はXMLHttpRequestで　という経緯でした。