Question

我正在使用节点，表示并作出反应以创建登录门户。我为前端创建了一个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());

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

Answer 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')
})

Answer 2

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

event.preventDefault();

这解决了问题。

提取操作会阻止跨源请求

2 个答案: