react 和 node JS - HTTP 总是发送 OPTIONS 而不是常规方法答案

【问题标题】：react & nodeJS - HTTP always send OPTIONS instead regular methodsreact 和 node JS - HTTP 总是发送 OPTIONS 而不是常规方法
【发布时间】：2019-01-18 20:49:26
【问题描述】：

我试图搜索这个问题几天但没有理解。

如果您能解释我如何以常规方式打开所有请求并阻止“OPTIONS”选项，那将是最好的！

我正在尝试使用“React”获取发送 HTTP PUT、GET、POST、DELETE 方法。使用 POST，有时服务器接受请求，有时获取失败。服务器始终使用 PUT / DELETE 获取 OPTIONS 请求，而不是常规方法。我试图在没有太多了解的情况下了解 cors。

有我的后端和前端示例：

后端：

router.put('/privacy', (req, res) => {
let user = req.body.user,
    decision = req.body.decision,
    file = req.body.filename;

FileModel.findOne({'metadata.filename': file, 'uploadedBy': user}, function(err, file){
    let errMsg = `change privacy of ${file} failed.`

    if (err) {
        res.json({
            ok: false,
            msg: errMsg
        });

    } else if (file) {
        switch (decision) {
            case 'private': {
                file.isPrivate = true;
                file.save();
                res.json({
                    ok: true
                });
                break;
            }
            case 'public': {
                file.isPrivate = false;
                file.save();
                res.json({
                    ok: true
                });
                break;
            }
            default: {
                res.json({
                    ok: false,
                    msg: 'wrong decision'
                });
            }
        }

    } else {
        res.json({
            ok: false,
            msg: errMsg
        });
    }
});

});

app.js（后端）：

app.use(cors({ origin: 'http://localhost:3001' , credentials :  true}));

app.use('/api', api);

前端：

onSaveClicked = () => {
    fetch('http://localhost:3000/api/manage/privacy', {
        crossDomain: true,
        credentials: 'include',
        method: 'PUT',
        headers: {
          'Content-Type': 'application/json',   
        },
        body: {
            filename: this.state.name
        }
        }).then(res => res.json())
          .then(json => json.result)
          .then(result =>{
              this.setState({files: result});
          });
}

谢谢大家。

【问题讨论】：

您无法阻止 OPTIONS 请求。如果http://localhost:3000 是不同的来源，您必须为您的 API 启用 CORS。
你能解释一下我该怎么做吗？请注意，最终它将是相同的起源（3001 仅用于开发..）
你在使用 webpack 开发服务器吗？如果是这样，您希望将开发服务器配置为代理请求，以便您可以使用相同的来源。 webpack.js.org/configuration/dev-server/#devserver-proxy
你在前端遇到了什么错误？你能发布一些chrome网络日志吗？后端也记录了任何错误？您可能还想在前端捕获错误.catch(console.error)@EliranSuisse
@Theo ，网络或控制台 - 没有出现任何内容，只有前端的“获取”方法返回异常。（我的印刷）。我一直在服务器端获取 OPTION 方法。 .

标签： node.js reactjs cors

【解决方案1】：

您只需要将 cors 中间件选项更改为

app.use(cors({ origin: '*' , credentials :  true }))

【讨论】：

我尝试这样做没有成功，也许请求有问题？仍然收到选项请求。 ..
请注意，如果我使用表单发送常规帖子效果很好，只有当我使用 fetch 选项时..
那你需要用app.options('*', cors( { origin: '*' , credentials : true } ))处理后端的OPTIONS请求
仍然无法正常工作..他们两个都做了，请注意：在服务器第一次接受我时，如果我注销并尝试重新登录，则获取失败。
"" POST /api/login 200 164.081 ms - 221 选项 /api/login 204 0.155 ms - 0 ""

【解决方案2】：

我也有同样的问题，我删除了“Content-Type”中的标头：“application/json”，（不要插入任何标头）。

您可以通过以下链接查看帖子并在后端检查有效性， reqbin.com

【讨论】：