【问题标题】:Json server POST request not working by axiosJson服务器POST请求不适用于axios
【发布时间】:2019-08-28 23:07:43
【问题描述】:

你好我正在使用这个 json 服务器https://github.com/typicode/json-server 我可以在 postmman 中发布数据,并且它的工作良好,例如对象

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

带有标题Content-Type: application/json 到我的服务器正在运行http://35.195.249.40:3004/users

一切正常

但在我的 nativescript/vue 应用程序中,我无法发出发布请求 - 它给出 304 响应

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);
            }); 

     }, 

我也尝试了获取请求并且它响应 '解析失败:' [TypeError: Network request failed: java.io.IOException: Cleartext HTTP traffic to not allowed]

 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)
                });

    },  

【问题讨论】:

    标签: javascript node.js json vue.js nativescript


    【解决方案1】:

    在您提供的 Postman 示例对象中

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

    这些字段嵌入在可通过mainTab 键访问的对象中。 但是,在您的实际代码示例中,您是直接向对象提供所需字段(如m_refresh),而不是以嵌入方式。

    所以,我的建议是包装包含数据的对象,使发布调用看起来像这样:

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

    【讨论】:

    • 在邮递员中我在嵌套对象“mainTab”中提供:{} 因为我尝试了不同的东西,但这里不是这种情况。在 Postman 中,我在此处发布的任何内容都可以使用,但在我的 vue 中却没有
    • 您能附上一个错误响应示例吗?这可能会有所帮助。
    【解决方案2】:

    这些提供的 axios.post 提供此代码作为响应

        { 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\":...
    

    我发现 axios 不适用于 http。它需要https。 有没有可能让它在没有 https 的情况下工作?

    其他解决方案可能是使用 https 运行 json 服务器。 我正在使用这台服务器,所以我在做什么让我在 ubuntu 中启动 npm 并启动服务器 https://github.com/halfzebra/json-server-example

    github上有写使用https://github.com/typicode/hotel这个来提供https,但它在本地主机上工作。我需要通过 https 在全球 IP 上运行它

    【讨论】:

    • 嗨 Karolek,对此事不熟悉,这看起来不像是我的答案。如果是这样,请编辑您的问题以添加补充并删除它,如果它应该是一个答案,只需回复我的评论,我会删除它。
    猜你喜欢
    • 2020-07-28
    • 1970-01-01
    • 2018-06-22
    • 2020-04-10
    • 2021-04-27
    • 2021-11-11
    • 2019-10-20
    • 2020-06-13
    • 1970-01-01
    相关资源
    最近更新 更多