I used jsonp to solve the cors error, but how do I resolve the error that the callback also gives the cors error?

I used jsonp to solve the cors error, but how do I resolve the error that the callback also gives the cors error?

Here is my original source.

cctvControl.test = function () {
  console.log(`${this.port}`);
  axios.put(`http://localhost:${this.port}/openplayer`, {
    baseinfo: {
      action: "livertsp",
      uid: "CAM-2-S208-ES-C136111",
      url: "rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_175k.mov",
      loginid: "",
      loginpw: "",
      wndwidth: "400",
      wndheight: "300",
      wndposx: "200.1",
      wndposy: "200.1"
    }
  });
};

But this source is {customerData: {… }}

index.do:1 Access to XMLHttpRequest at 'http://localhost:19108/openplayer' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.` error.

So, I set dataType: jsonp as follows and rewritten it to call openplay in callbackmethod.

function makeTheCall(queryString) {
  console.log(`${this.port}`);
  var destinationUrl = `http://localhost:19108/openplayer`;
  $.ajax({
    type: 'PUT',
    url: destinationUrl,
    data: {
      "baseinfo": {
        "action": "livertsp",
        "uid": "CAM-2-S208-ES-C136111",
        "url": "rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_175k.mov",
        "loginid": "",
        "loginpw": "",
        "wndwidth": "400",
        "wndheight": "300",
        "wndposx": "200",
        "wndposy": "200"
      }
    },
    dataType: 'jsonp',
    jsonpCallback: 'myCallBackMethod',
    async: false, // this is by default false, so not need to mention
    crossDomain: true // tell the browser to allow cross domain calls.
    // success: successResopnse, jsonpCallback will call the successCallback
    // error: failureFunction jsonp does not support errorCallback. So cannot use this
  });
}

window.myCallBackMethod = function(data) {
  successResponse(data);
  console.log(data);
  // axios.put(`http://localhost:19108/openplayer`, {
  // "baseinfo": {
  // "action": "livertsp",
  // "uid": "CAM-2-S208-ES-C136111",
  // "url": "rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_175k.mov",
  // "loginid": "",
  // "loginpw": "",
  // "wndwidth": "400",
  // "wndheight": "300",
  // "wndposx": "200.1",
  // "wndposy": "200.1"
  // }
  // })
}

successResponse = function(data) {
  //functionality goes here;
  console.log(data);
  axios.put(`http://localhost:19108/openplayer`, {
    "baseinfo": {
      "action": "livertsp",
      "uid": "CAM-2-S208-ES-C136111",
      "url": "rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_175k.mov",
      "loginid": "",
      "loginpw": "",
      "wndwidth": "400",
      "wndheight": "300",
      "wndposx": "200.1",
      "wndposy": "200.1"
    }
  })
}

// the json response from the server when calling the url must be in the below format only.

myCallBackMethod({ "customerData": { "name": "testName", "age": 26 } })
// makeTheCall();
}

I get the same CORS error in window.myCallBackMethod and successResponse.

CCTV is normally opened when you put basinfo data in localhost:19108/openplayer and request it with the put method. But I keep getting cors error.

I am wondering how to approach to solve this problem.

Best Regards!