使用Fetch API但JQuery AJAX无法获取请求体。

时间:2018-03-21 06:41:26

标签: javascript jquery node.js reactjs fetch-api

我正在开展一个项目

  1. 我的API是用Express.js(4.16)编写的 - 在PORT:1337
  2. 前端应用程序位于React.js(16.2) - 在PORT:3000
  3. 因此我需要从React.js应用程序调用几个API,我面临的问题是:

    问题是 -

    根本不工作 - fetch() API

    fetch('localhost:1337/rest/api', {
        body: JSON.stringify( {name: "Sidd", "info": "Lorem ipsum dolor .."} ),
        headers: {
            'Accept': 'application/json, text/plain, */*',
            'Content-Type': 'application/json'
        },
        mode: 'no-cors',
        method: 'post'
    })
    

    当我使用fetch() API时,我没有在Express.js中定义的API中获取请求正文

    console.log(req.body) // On logging the request body
    {} // am getting this [empty]
    
     

    WORKS- jQuery AJAX

    $.ajax('localhost:1337/rest/api', {
        type: 'post',
        data: {name: "Sidd", "info": "Lorem ipsum dolor .."},  
        dataType: 'application/json',
        success: function (data, status, xhr) {
            console.log('status: ' + status + ', data: ' + data);
        },
        error: function (jqXhr, textStatus, errorMessage) {
            console.log('Error' + errorMessage);
        }
    });
    

    但是我得到了No 'Access-Control-Allow-Origin' header is present on the requested resource.错误!

    但在这种情况下,至少我获取我的API中的请求正文。还通过POSTMAN测试了我的API,它们完全正常。 我在网上看到了所有讨论,但没有任何效果。

    哦!我还想补充一点 - 在我的Express.js设置中正确使用正文解析器

    app.use(bodyParser.json({limit: '2mb'}));                           // 2mb file upload limit
    app.use(bodyParser.urlencoded({limit: '2mb', extended: true}));     // 2mb file upload limit
    

    我想要什么!

    1. fetch()API的解决方案
    2. 如果不是fetch()API,如何从我的jQuery Ajax调用中删除No 'Access-Control-Allow-Origin'错误。
    3. 我做错了什么?
    4. 谢谢你们!

1 个答案:

答案 0 :(得分:2)

由于13373000是不同的端口,因此您遇到了CORS请求。

首先,在获取请求中设置mode: cors,然后添加路由器处理程序

router.use((req, res, next) => {
  res.header('access-control-allow-origin', 'http://localhost:3000')
  res.header('Access-Control-Allow-Credentials', true)
  res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With')
  res.header('Access-Control-Allow-Methods', 'PUT,POST,GET,DELETE,OPTIONS')
  res.header('Access-Control-Max-Age', 1728000)
  if (req.method === 'OPTIONS') {
    return res.json({ status: 0, message: '', payload: null })
  }
  next()
})

rest/api处理程序之前。

这样做之后,你很高兴。