Javascript 在react.js中获取json内容时，在标头中不包含COR时出现奇怪错误

我对反应很陌生，对点头也很陌生。我试图测试如何从我的nodeJS Web服务中提取json数据并在react中呈现它。 我只是在测试阶段，但我很难理解这是什么问题。我可以通过以下方式从演示作业json资源获取内容：

let url = "http://codepen.io/jobs.json";
let iterator = fetch(url);
  iterator
    .then(response => response.json())
    .then(post => alert(post.jobs[3].company_name));
  } 

但我自己的JSON资源在http://localhost:8888 -因此，我了解到我需要在标题中不设置COR以允许跨站点资源，因此，我尝试了对我自己的资源进行解释：

let url = "http://codepen.io/jobs.json";
let iterator = fetch(url, {mode: 'no-cors'});
  iterator
    .then(response => response.json())
    .then(post => alert(post.jobs[3].company_name));
  } 

但这给了我一个错误：promise SyntaxError中的Uncaught:resonse.json行上输入的意外结束

有什么想法吗？总的来说，我非常希望使用一些更广泛的代码来获取作业列表，将其添加到组件状态，然后呈现该列表-如下所示：

componentDidMount() {
  let url = "http://codepen.io/jobs.json";
  let iterator = fetch(url, {method: 'GET', mode: 'no-cors'});
  iterator
    .then(response => response.json())
    .then(post => alert(post.jobs[3].company_name));
} 

render() {        
    return(
        <div>
            <div>Items:</div>
            <div>{this.state.items.map etc</div>
        </div>  
    );
}

---

您从codepen获得的响应类型为：“cors”，但您提供的是模式：没有cors，服务器需要发送所需的cors头才能访问响应

---

您从codepen获得的响应类型为：“cors”，但您提供的是模式：没有cors，服务器需要发送所需的cors头才能访问响应

---

只是为了让答案注释中的代码更清楚一点。pOk8发现了这个问题。用我的外行术语来说，我需要更改localhost web服务的头以使react fetch能够工作。以下是我添加到我的nodeJS express服务头中的内容：

// Website you wish to allow to connect
res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000');
// Request methods you wish to allow
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
// Request headers you wish to allow
res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
// Set to true if you need the website to include cookies in the requests sent
// to the API (e.g. in case you use sessions)
res.setHeader('Access-Control-Allow-Credentials', true);

---

希望这是有意义的。

只是为了让答案注释中的代码更清楚一点。pOk8发现了这个问题。用我的外行术语来说，我需要更改localhost web服务的头以使react fetch能够工作。以下是我添加到我的nodeJS express服务头中的内容：

// Website you wish to allow to connect
res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000');
// Request methods you wish to allow
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
// Request headers you wish to allow
res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
// Set to true if you need the website to include cookies in the requests sent
// to the API (e.g. in case you use sessions)
res.setHeader('Access-Control-Allow-Credentials', true);

---

希望这是有意义的。

非常感谢p0k8！我想这是因为我对CORS的理解有限！所以我想CORS头标志需要匹配。所以如果我把它切换到我的，我需要写一个匹配的头cors或no cors？。我的nodejswebservice目前只是对postgres的一个超级基本查询：以一个输出行结束：res.jsoncontent；我不知道；I don’我想您不能建议如何更改此处的标题吗？：再次感谢！我想你不需要做什么，cors被允许提供对另一个域的访问。codepen已经启用了cors，这意味着任何人都可以请求数据，如果其他域应用程序试图访问您的本地主机：8888，您必须使用cors中间件来允许访问。基本上，我们的应用程序会检查原始标头类型，如果它与我们的域localhost:8888不匹配，那么它将再次抛出cors ErrorThank pok8。我将以下内容添加到对其进行排序的Express webservice响应中。//您希望允许连接的网站res.setHeader'Access-Control-allow-Origin'，'；//请求您希望允许的方法res.setHeader'Access-Control-allow-methods'、'GET、POST、OPTIONS、PUT、PATCH、DELETE'；res.setHeader'Access-Control-Allow-Headers'，'X-request-With，content-type'；//如果您需要网站在requests res.setHeader'Access-Control-Allow-Credentials'中包含cookies，则设置为true，true；是的，你必须这样做，或者npmjs.com中有一个cors包，安装它并用作中间件，一些小代码，代码笔的类型是cors，所以模式应该是-mode:“cors”非常感谢p0k8！我想这是因为我对CORS的理解有限！所以我想CORS头标志需要匹配。所以如果我把它切换到我的，我需要写一个匹配的头cors或no cors？。我的nodejswebservice目前只是对postgres的一个超级基本查询：以一个输出行结束：res.jsoncontent；我不知道；I don’我想您不能建议如何更改此处的标题吗？：再次感谢！我想你不需要做什么，cors被允许提供对另一个域的访问。codepen已经启用了cors，这意味着任何人都可以请求数据，如果其他域应用程序试图访问您的本地主机：8888，您必须使用cors中间件来允许访问。基本上，我们的应用程序会检查原始标头类型，如果它与我们的域localhost:8888不匹配，那么它将再次抛出cors ErrorThank pok8。我将以下内容添加到对其进行排序的Express webservice响应中。//您希望允许连接的网站res.setHeader'Access-Control-allow-Origin'，'；//请求您希望允许的方法res.setHeader'Access-Control-allow-methods'、'GET、POST、OPTIONS、PUT、PATCH、DELETE'；res.setHeader'Access-Control-Allow-Headers'，'X-request-With，content-type'；//如果您需要网站在requests res.setHeader'Access-Control-Allow-Credentials'中包含cookies，则设置为true，true；是的，你必须这样做，或者npmjs.com中有一个cors包，请安装它并 用作中间件，一些小代码，代码笔的类型是cors，所以模式应该是-mode:'cors'