Question

我正在尝试使用axios测试从reactjs到节点休息层的api调用。查看来自Chrome的控制台消息时，我收到以下CORS错误。我看到以下错误“已从起源'http://localhost:5001/api/login'访问来自'http://localhost:5000'的对XMLHttpRequest的访问'：https://www.npmjs.com/package/uws'：对预检请求的响应未通过访问控制检查：否'Access-Control -Allow-Origin标头出现在所请求的资源上。”奇怪的是，两种方法都调用了catch块中的代码（LoginApi中的一个用于测试），但是当我将鼠标悬停在catch参数中时，catch参数中的error变量始终给出一条消息，指出“未定义错误”它。 1）如果我因为发生错误而在catch块中，怎么可能不确定错误？ 2）如果我从本地主机运行，如何得到CORS错误？如何解决测试问题？

这是我的传奇文件中的方法：

function* login(params){
    try {
        const api = new LoginApi();
        const response = yield call(api.login, params);
    } catch (error) {
        debugger;
        yield put({ type: types.ERROR_OCCURRED, error });
    }
}

这是从yield调用中调用的LoginApi对象中的方法：

login = async (loginProps) => {
    try {
        let api = axios.create({
            baseURL: 'http://localhost/5001',
            timeout: 100000
        });

        return await api.post(`/api/login`, loginProps);
    } catch (error) {
        debugger;
        throw error;
    }
}

Answer 1

您可以自己设置请求标头（跨源），也可以使用CORS软件包（npm i cors --save）

不使用cors软件包->

app.use((req, res, next) => {
    res.header('Access-Control-Allow-Origin', '*');
    if (req.method === 'OPTIONS') {
        var headers = {};
    // headers["Access-Control-Allow-Origin"] = req.headers.origin;
        headers["Access-Control-Allow-Origin"] = "*";
        headers["Access-Control-Allow-Methods"] = "POST, GET, PUT, DELETE, 
        OPTIONS";
        headers["Access-Control-Allow-Credentials"] = false;
        headers["Access-Control-Max-Age"] = '86400'; // 24 hours
        res.writeHead(200, headers);
       res.end();
    } else {
        next();
    }
});

如果您使用的是cors（npm i cors --save）

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

有关更多cors软件包的配置，只需参考https://github.com/expressjs/cors

Answer 2

正在接收请求的服务器必须设置CORS标头，以使浏览器知道服务器正在请求其域外的请求。您始终可以手动设置它们，但是如果使用Express，则可以轻松实现这一功能-https://expressjs.com/en/resources/middleware/cors.html。最流行的节点框架应该有一个等效的框架。

在localhost

2 个答案: