Fetch 使跨域请求被阻止答案

【问题标题】：Fetch gives cross origin request blockedFetch 使跨域请求被阻止
【发布时间】：2018-07-23 16:12:59
【问题描述】：

我正在使用节点、表达和反应来创建一个登录门户。我为前端创建了一个 app.js 文件和 signin.js 文件。 signin.js 包含以下几行（不是整个代码）：

onSubmitSignIn = () => {
fetch("http://localhost:3001/signin", {
  method : 'post',
  headers : {'Content-Type': 'application/json'},
  body : JSON.stringify({
    email : this.state.signInEmail,
    password : this.state.signInPassword
    })
  })
.then(res => res.json())
.then(data => {
  if (data === "Success!!"){
    console.log(data);
   }
 })
this.props.onRouteChange("home");
}

上面的代码打印成功！！在控制台中.. onRouteChange 将主页值传递给 app.js 中加载主页的函数。但是，当我删除 console.log(data) 并将 this.props.onRouteChange("home") 放在它的位置时，我收到以下错误：

跨域请求被阻止：同源策略不允许读取位于http://localhost:3001/signin 的远程资源。（原因：CORS 请求未成功）。

这种交换的原因是如果用户凭据正确并且快速服务器返回响应“Success!!”，我可以将用户重定向到主页。请帮忙。我已经在 server.js 中包含了以下行：

app.use(cors());

我没有发布整个代码，因为它太大了..

【问题讨论】：

尝试在 ./signin 处将以下标头添加到您的响应中
“我没有发布整个代码，因为它太大了”——你需要提供一个minimal reproducible example。

标签： javascript node.js reactjs express

【解决方案1】：

app.use(cors());

这还不够。

你说：

headers : {'Content-Type': 'application/json'},

...所以您正在触发预检请求。

我很惊讶你引用的错误消息没有提到预检。您应该在多个浏览器中进行测试。有些提供比其他更好的错误消息。

the cors module 的文档说：

启用 CORS 飞行前

某些 CORS 请求被认为是“复杂的”并且需要初始 OPTIONS 请求（称为“飞行前请求”）。一个例子 “复杂”CORS 请求是使用 HTTP 动词而不是 GET/HEAD/POST（例如 DELETE）或使用自定义标头。启用飞行前，您必须为您的路线添加一个新的 OPTIONS 处理程序想支持：
var express = require('express')
var cors = require('cors')
var app = express()

app.options('/products/:id', cors()) // enable pre-flight request for DELETE request
app.del('/products/:id', cors(), function (req, res, next) {
  res.json({msg: 'This is CORS-enabled for all origins!'})
})

app.listen(80, function () {
  console.log('CORS-enabled web server listening on port 80')
})

【讨论】：

当我在控制台记录响应时，“成功！！”已打印.. 这清楚地表明我正在获取字符串作为响应。我不明白的是，当我尝试从 if 循环内部访问道具时，它给了我 cors 错误！

【解决方案2】：

这可能是因为表单默认尝试执行获取请求。我将事件参数传递给 onSubmitSignin 并在其中添加了以下行：

event.preventDefault();

这解决了问题。

【讨论】：