javascript React和Express阻止的跨来源请求

trnvg8h3 于 2023-01-24 发布在 Java

关注(0)|答案(6)|浏览(107)

当我尝试使用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文件，但是我在本地完成了所有的工作，所以我不确定我是否可以使用它。
在我看来，我允许所有我需要的，但我想这是不够的。
如果你要标记为重复，请至少确保我的问题是涵盖的答案。

JavaScript

来源：https://stackoverflow.com/questions/50968152/cross-origin-request-blocked-with-react-and-express

6条答案

按热度按时间

41ik7eoe1#

有一个节点包叫cors，这使得它非常容易。
1百万美元1倍

const cors = require('cors')

app.use(cors())

你不需要任何配置来允许所有。
查看Github存储库了解更多信息：https://github.com/expressjs/cors

赞(0）回复(0）举报 2023-01-24

mwg9r5ms2#

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

使用

http://localhost:8000

请勿使用

localhost:8000

赞(0）回复(0）举报 2023-01-24

vs91vp4v3#

如果添加此标题

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

赞(0）回复(0）举报 2023-01-24

qcuzuvrc4#

对于其他任何人，这可能会有帮助，我是使用axios与withCredentials: true。
在我的Express后端，我只是在做，

app.use(cors())

解决这个问题的方法是从React前端删除withCredentials: true，或者将后端更改为，

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

赞(0）回复(0）举报 2023-01-24

zzwlnbp85#

你必须允许OPTIONS方法

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

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

赞(0）回复(0）举报 2023-01-24

bqf10yzr6#

我在包含授权令牌后也收到CORS错误。

app.use((req,res, next) =>{
    // res.header("Access-Control-Allow-Credentials", "true");
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    res.header("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, PATCH");
    next();
});

这是我的快递js代码
下面是我的React代码

window.fetch( `${'http://localhost:3000'}/${url}`, {
    method,
    ...init,
    // credentials: 'same-origin',
    headers: {
        authorization,
        'accept-language': 'en',

    }
} ).then( async response => {
    if ( response.ok || response.status < 400 ) {
        const json = await response.json();
        return { data: json };
    }
    // if ( response.status === 401 ) {
    //    token.length && storage.removeItem('persist:root')
    // }
    // convert non-2xx HTTP responses into errors:
    const json = await response.json();
    return Promise.resolve( { error: json } );
} ).catch( response => {
    return Promise.resolve( { error: { errors: [response?.toString()] } } );
} );

如果你们能帮我就太好了。

赞(0）回复(0）举报 2023-01-24

我来回答

javascript React和Express阻止的跨来源请求

6条答案

相关问题

热门标签

最新问答