Ionic - Http post Request Data save error

Question

Iam trying to save the following data set to DB , through http post request. Once i tried to perform the operation iam receiving a 400 (Bad Request error). Seek your valuable support. Also i the server will only accept JSON Request as well.

Post request attempt

 const newheadersNew = {
      'Content-Type': 'application/json; charset=utf-8',
      'Access-Control-Allow-Origin': '*',
      'Authorization': window.sessionStorage.getItem("auth")
      };


    this.tes = 'hello';


    let atmobj = JSON.parse(window.sessionStorage.getItem("atmdetail"));

    this.survey = {

      "machineScreenCondition": form.value["screen"],
      "machineKeyboardCondition": form.value["keyboard"] ,
      "machineFaciaCondition": form.value["facia"],
      "machineBodyCondition": form.value["body"],

      "cubicleFloorWallCondition": form.value["floor.wall.condition"],
      "cubicleParandDoors": form.value["par.doors.appearance"],
      "cubicleRoofCeiling": form.value["roof.ceiling"],
      "cubicalwlea": form.value["con.wleak"],
      "cubicleCleaness": form.value["cubicle.cleaness"],
      "cubicalDustbin": form.value["cubicle.dustbin"],

      "appWallBranding": form.value["app.branding"],
      "appNboard": form.value["con.nboard"],
      "appSignboard": form.value["con.sboard"],
      "appColorWashing": form.value["con.washing"],
      "appOutside": form.value["out.appear"],

      "systemups": form.value["sys.ups"],
      "sysPlights": form.value["system.power.light"],
      "sysSlights": form.value["sys.sign.lights"],
      "sysCam": form.value["system.cam"],
      "sysAc": form.value["system.ac"],

      "atmStatus": this.note2,
      "otherComments": form.value["other.comments"],
      "atmImage": this.img,
      // "inspectedDate": atmobj["inspecteddate"],
      "user": { "name": window.sessionStorage.getItem("firstname").trim() + ' ' + window.sessionStorage.getItem("lastname").trim(), "username": window.sessionStorage.getItem("username") },
      "atm": { "id": atmobj["atmid"], "location": atmobj["atmname"], "city": atmobj["atmcity"] },
      "gpslocation": atmobj["gpslocation"]


    };

     console.log(this.survey);





     this.nativeHttp.post('https://'+window.sessionStorage.getItem('ip')+'/api/survey/submit', this.survey, newheadersNew)
      .then(
        data => {

          console.log(data);

        },
        error => {

          console.error(error);

        });

Error - in console

Answer 1

Update:

Ionic's proxies have quite different structure than Angular proxies - they are much simpler. An example would look like this:

proxy.config.json

{
  "/api/endpoint/*": {
    "target": "https://path.to.server.com",
    "changeOrigin": true,
    "pathRewrite": {
      "^/api/endpoint/": ""
    }
  }
}

ionic.config.json

{
  "name": "your-app-name",
  "integrations": {
    "cordova": {}
  },
  "type": "angular",
  "proxies": [
    {
      "url": "/api/endpoint/*",
      "proxyUrl": "https://path.to.server.com"
    }
  ]
}

Since you will end up with pretty much the same data, I build the Ionic config automatically using simple Node script which 1) reads original Ionic config 2) reads Angular proxy.config.json 3) Inserts proxies into Ionic config and saves it. Such script could look like this:

const { readFileSync, writeFile } = require('fs');

try {
  /** Load configs */
  const proxyConfig = readFileSync('proxy.config.json');
  const ionicConfig = readFileSync('ionic.config.json');
  /** Format values */
  const proxyConfigFormatted = JSON.parse(proxyConfig.toString('utf8'));
  let ionicConfigFormatted = JSON.parse(ionicConfig.toString('utf8'));
  /** Start generating proxies */
  ionicConfigFormatted.proxies = Object.keys(proxyConfigFormatted).map((proxy) => {
    return {
      url: proxy,
      proxyUrl: proxyConfigFormatted[proxy].target
    };
  });
  /** Write new config */
  writeFile('ionic.config.json', JSON.stringify(ionicConfigFormatted, null, 2), (err) => {
    if(err) {
      throw err;
    };
  })
} catch (e) {
  throw e;
}

Edit: What HTTP client are you using?

Original answer: Please provide us with some more details - the response you get from the request. It seems you are using Chrome - follow these steps and let us know the details:

1. Send the request
2. In DevTools, go to Network and find the request
3. Click on the request and then on the 'Response' tab to get the response from the server.

Otherwise, it's quite hard to say

Answer 2

You are getting error related to X-XSS-Protection

X-XSS-Protection header stops pages from loading when they detect reflected cross-site scripting (XSS) attacks.

Your server is configured to return:

• X-XSS-Protection: 1; mode=block (do not render the document if XSS is found)

My suggestion is to check if your code is working against other APIs and will help you find the issue.