Question

因此，当我尝试使用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文件，但是我在本地完成所有操作，因此不确定是否可以使用它。

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

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

Answer 1

有一个称为cors的节点程序包，使它非常容易。

$ $scope.yourFunc = function(item){ return parseInt(item.expense_id); };

npm install cors

您不需要任何配置即可允许全部操作。

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

Answer 2

如果添加此标头

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

Answer 3

一个原因可能是您使用的路由是localhost：8000而不是http：// localhost：8000。

使用

import firebase from "firebase/app"
import "firebase/database"

请勿使用

http://localhost:8000

Answer 4

对于任何其他人，这可能会有所帮助，我将 axios 与 withCredentials: true 一起使用。

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

app.use(cors())

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

app.use(cors({ credentials: true }))

Answer 5

您还必须允许OPTIONS方法

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

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

使用React和Express阻止跨域请求

5 个答案: