axson无法使用Json服务器POST请求

Question

Hello Im using this json server https://github.com/typicode/json-server I can post data in postmman and its working good for example object

{  
   "mainTab":{  
      "m_actual":0,
      "m_refresh":2000,
      "m_actual":0,
      "m_refresh":4000
     } 
  }

with header Content-Type: application/json To my server is running http://35.195.249.40:3004/users

And everything is ok

But on my app in nativescript/vue I cant make post request - its gives 304 response

updateJsonData(){
            const data = {

                m_actualHP: 0,
                m_refreshHP: 2000,
                m_actualMP: 666666,
                m_refreshMP: 4000,

            }

        axios.post('http://35.195.249.40:3004/users', data, {
                headers:  { 
                    'Accept': 'application/json',
                    'Content-Type': 'application/json'

                     }
                }
             )
            .then(function (response) {
                console.log(response);

            })
            .catch(function (error) {
                console.log(error);
            }); 

     }, 

I tried with fetch request too and it response 'parsing failed: ' [TypeError: Network request failed: java.io.IOException: Cleartext HTTP traffic to not permitted]

 updateJsonData(){ 
        fetch('http://35.195.249.40:3004/users', {
            method: 'post',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                "title":   "Add a blogpost about Angular2",
                "dueDate": "2015-05-23T18:25:43.511Z",
                "done": false
            })
            }).then(function(response) {
                return response.json()
                }).then(function(json) {
                console.log('parsed json: ', json)
                }).catch(function(ex) {
                console.log('parsing failed: ', ex)
                });

    },  

Answer 1

In the Postman example object you provided

{  
   "mainTab": {  
      "m_actual":0,
      "m_refresh":2000,
      "m_actual":0,
      "m_refresh":4000
     } 
  }

The fields are embedded in an object accessible via the mainTab key. However, in your actual code examples you are providing the object with the desired fields (like m_refresh ) directly and not in an embedded manner.

So, my suggestion is to wrap the object containing the data to make the posting call look like this:

axios.post('http://35.195.249.40:3004/users', { mainTab: data },
  {
    headers:  { 
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    }
  }
)

Answer 2

these provided axios.post provide this code in response

    { data: '',
JS:   status: null,
JS:   statusText: '',
JS:   headers: {},
JS:   config:
JS:    { adapter: { [Function: xhrAdapter] [length]: 1, [name]: 'xhrAdapter', [prototype]: [Object] },
JS:      transformRequest: { '0': [Object] },
JS:      transformResponse: { '0': [Object] },
JS:      timeout: 0,
JS:      xsrfCookieName: 'XSRF-TOKEN',
JS:      xsrfHeaderName: 'X-XSRF-TOKEN',
JS:      maxContentLength: -1,
JS:      validateStatus: { [Function: validateStatus] [length]: 1, [name]: 'validateStatus', [prototype]: [Object] },
JS:      headers:
JS:       { Accept: 'application/json',
JS:         'Content-Type': 'application/json' },
JS:      method: 'post',
JS:      url: 'http://35.195.249.40:3004/users',
JS:      data: '{"data":{"mainTab":{"m_actualHP":0,"m_refreshHP":2000,"m_actualMP":666666,"m_refreshMP":4000}}}' },
JS:   request:
JS:    { UNSENT: 0,
JS:      OPENED: 1,
JS:      HEADERS_RECEIVED: 2,
JS:      LOADING: 3,
JS:      DONE: 4,
JS:      _responseType: '',
JS:      textTypes:
JS:       [ 'text/plain',
JS:         'application/xml',
JS:         'application/rss+xml',
JS:         'text/html',
JS:         'text/xml',
JS: ...
JS: 'CONSOLE LOG END | CONSOLE DIR STARTS'
JS: ==== object dump start ====
JS: data: ""
JS: status: "null"
JS: statusText: ""
JS: headers: {}
JS: config: {
JS:   "transformRequest": {},
JS:   "transformResponse": {},
JS:   "timeout": 0,
JS:   "xsrfCookieName": "XSRF-TOKEN",
JS:   "xsrfHeaderName": "X-XSRF-TOKEN",
JS:   "maxContentLength": -1,
JS:   "headers": {
JS:     "Accept": "application/json",
JS:     "Content-Type": "application/json"
JS:   },
JS:   "method": "post",
JS:   "url": "http://35.195.249.40:3004/users",
JS:   "data": "{\"data\":{\"mainTab\":{\"m_actualHP\":0,\"m_refreshHP\":2000,\"m_actualMP\":666666,\"m_refreshMP\":4000}}}"
JS: }
JS: request: {
JS:   "UNSENT": 0,
JS:   "OPENED": 1,
JS:   "HEADERS_RECEIVED": 2,
JS:   "LOADING": 3,
JS:   "DONE": 4,
JS:   "_responseType": "",
JS:   "textTypes": [
JS:     "text/plain",
JS:     "application/xml",
JS:     "application/rss+xml",
JS:     "text/html",
JS:     "text/xml"
JS:   ],
JS:   "_listeners": {},
JS:   "_readyState": 4,
JS:   "_options": {
JS:     "url": "http://35.195.249.40:3004/users",
JS:     "method": "POST",
JS:     "headers": {
JS:       "Accept": "application/json",
JS:       "Content-Type": "application/json"
JS:     },
JS:     "content": "{\"data\":...

I figured out axios would not work with http. It needs https. Is there possibility to make it working without https?

other solution could be running json server with https. Im using this server so what im doing im make npm start in ubuntu and server starts https://github.com/halfzebra/json-server-example

there is written on github to use https://github.com/typicode/hotel this to provide https but it working on localhost. I need to run it on global IP over https