启用CORS后,为什么仍然出现CORS错误

时间:2020-03-11 01:12:03

标签: reactjs express cors fetch

这是提取请求:

class App extends Component {
    componentDidMount() {
        fetch('http://localhost:3001/')
            .then((res) => res.json())
            .then((data) => console.log(data));
    }

    render() {
        return <div></div>;
    }
};

这是后端代码:

const express = require('express');
const app = express();
app.use(function(req, res, next) {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Headers', '*');
    next();
});
app.use('/', (req, res) => {
    res.json({ test: 'test' });
});
app.listen(3001, console.log('listeing...'));

错误:

可以从原始位置获取“ http://localhost:3001/” “ http://localhost:3000”已被CORS政策禁止:否 请求中出现“ Access-Control-Allow-Origin”标头 资源。如果不透明的响应满足您的需求,请设置请求的 模式设置为“ no-cors”,以在禁用CORS的情况下获取资源。

2 个答案:

答案 0 :(得分:1)

您必须允许客户端使用http方法:

res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, PATCH, DELETE'); // allow client to use http methods

答案 1 :(得分:0)

最简单的选择是安装cors软件包。

安装:

npm i cors

用法:

const cors = require('cors')
app.use(cors())