React 和 Express 阻止了跨域请求

Posted 2023-02-25

【中文标题】React 和 Express 阻止了跨域请求

【英文标题】：Cross-Origin Request Blocked with React and Express

【发布时间】：2018-11-30 18:19:43

【问题描述】：

所以当我尝试使用 React 将数据发送到后端时，我遇到了这个错误。据我所知，我需要允许后端和.htaccess 文件中的通信。以下是我使用的一些链接：

No 'Access-Control-Allow-Origin' - Node / Apache Port Issue

How does Access-Control-Allow-Origin header work?

他们都有代码，但没有帮助。

到目前为止，我的服务器端代码是这样的：

app.use(function (req, res, next) 
    // Website you wish to allow to connect
    // res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000');

    res.setHeader('Access-Control-Allow-Origin', '*');

    // Request methods you wish to allow
    res.setHeader('Access-Control-Allow-Methods', 'POST');

    // 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);

    // Pass to next layer of middleware
    next();
);

这是我的客户端代码：

sendMail(e) 
    e.preventDefault();
    var name = document.getElementById('name').value;
    var contactReason = document.getElementById('contactReason').value;
    var email = document.getElementById('email').value;
    var additionalInfo = document.getElementById('additionalInfo').value;
    var body = 
        name: name,
        contactReason: contactReason,
        email: email,
        additionalInfo: additionalInfo,
    ;
    console.log(JSON.stringify(body));
    fetch('http://localhost:4000/', 
        method: 'POST',
        body: body,
    ).then(r => console.log(r)).catch(e => console.log(e));

那么我错过了什么？我没有.htaccess 文件，但我都是在本地完成的，所以我不确定我是否可以使用它。

在我看来，我允许所有我需要的，但我想这还不够。

如果您要标记为重复，请至少确保答案涵盖了我的问题。

【参考方案1】：

有一个名为 cors 的节点包，它非常容易。

$npm install cors

const cors = require('cors')

app.use(cors())

你不需要任何配置来允许所有。

有关更多信息，请参阅 Github 存储库：https://github.com/expressjs/cors

【参考方案2】：

您还必须允许 OPTIONS 方法

res.setHeader('Access-Control-Allow-Methods', 'POST, OPTIONS');

浏览器将它与任何 post 请求一起发送到其他域，以检查它将如何与此远程服务器通信。

【讨论】：

我应该创建一个OPTIONS 对象还是类似的东西？

不，只需将其包含在如上所示的 express 标头中

那么运气不好。知道其他问题可能是什么吗？

对不起，我只是把中间件放错了地方。无论如何感谢您的帮助！

【参考方案3】：

如果你添加这个标题

res.setHeader('Access-Control-Allow-Origin', '*');

您正在使用凭据模式（意味着您正在从您的应用发送一些身份验证 cookie），对于 CORS 规范，您不能在此模式下使用通配符 *。

您应该更改您的 Access-Control-Allow-Origin 标头以匹配生成请求的特定主机

你可以改变这一行：

res.header('Access-Control-Allow-Origin', '*');

到

res.header('Access-Control-Allow-Origin', 'the ip address');

但为了更通用，这样的东西应该可以工作：

res.setHeader('Access-Control-Allow-Origin', req.header('origin') 
|| req.header('x-forwarded-host') || req.header('referer') || req.header('host'));

此外，您甚至可以允许来自浏览器的 OPTIONS 请求，否则您将收到预检请求错误。

res.setHeader('Access-Control-Allow-Methods', 'POST, OPTIONS');

【参考方案4】：

一个原因可能是您将路由用作 localhost:8000 而不是 http://localhost:8000。

使用

http://localhost:8000

不要使用

localhost:8000

【讨论】：

浏览器应该同样解释这些

【参考方案5】：

对于其他可能有帮助的人，我使用 axios 和 withCredentials: true。

在我的 Express 后端，我只是在做，

app.use(cors())

修复它的方法是从 React 前端删除 withCredentials: true 或将我的后端更改为，

app.use(cors( credentials: true ))

【讨论】：

这正是我们需要做的才能让它工作:)