与json进行交互获取总是返回错误

时间:2018-10-15 12:43:20

标签: json reactjs fetch

对于以下在react中创建的代码,搜索类似的问题后,我总是得到一个错误(似乎该错误是一个promise的返回)。

我正在使用Webpack 3.1.9版

在Web-pack配置中,我做了(不知道是否有必要):

module.exports = {
...
devServer: {
headers: {
  'Access-Control-Allow-Origin': '*',
  "Access-Control-Allow-Headers": "*"
}
},
...

这是我的代码:

var options = {
  method: 'get',
  mode: 'no-cors',
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json',
    'Access-Control-Allow-Headers': '*',
    'Access-Control-Allow-Origin': '*'
  }
};
let _url = 'my url ... web api returns json';
fetch(_url, options)
  .then(response =>
    response
      .json()
      .then(data => ({
        data: data,
        status: response.status
      }))
      .catch(err =>
        /******ERROR: always catch the error *****/
        ({ error_data: err })
      )
  )
  .then(res => {
    console.log(res);
    // console.log(res.status, res.data.title)
  })
  .catch(err => {
    console.log(err);
  });

带有星号的行中的错误,如上面的代码

  

SyntaxError:在eval输入意外结束

在C#中检查了代码中是否包含宁静的api:

我在控制器代码中做了

public ActionResult Index()
{
    ActionResult x = Json(db.Trainees.ToList(), 
    JsonRequestBehavior.AllowGet);
    //return Content(db.Trainees.ToList().ToString(), 
    "application/json");

    return Json(db.Trainees.ToList(), JsonRequestBehavior.AllowGet);
    // return View(db.Trainees.ToList());
}

我认为这与json返回Promise这一事实有关,如json returns promise

中所述

我看到json有问题。当我将response.json()更改为response.text()时,没有错误,但是我意识到,即使我发送带有'no-cors'的选项,我也会看到一条信息消息:

  

跨域读取阻止(CORB)阻止了跨域响应... MIME类型为application / json

似乎取指令会忽略带有“ no-cors”的选项。

任何线索,为什么代码遇到错误?!

谢谢。


问题已解决。 在做出反应时,我做了更改:

var options = {
method: 'GET',
}

... 

在C#restfull api控制器中,我进行了更改:

Response.AddHeader("Access-Control-Allow-Origin", "*");               
return Json(db.Trainees.ToList(), "application/json", 
   JsonRequestBehavior.AllowGet);

0 个答案:

没有答案