在 localhost 上运行两台服务器时收到 CORS 错误

Posted 2023-02-27

【中文标题】在 localhost 上运行两台服务器时收到 CORS 错误

【英文标题】：receiving CORS error while running two servers on localhost

【发布时间】：2019-05-29 16:31:37

【问题描述】：

我正在尝试使用 axios 测试从 reactjs 到节点休息层的 api 调用。当我查看来自 Chrome 的控制台消息时，我收到以下 CORS 错误。我看到以下错误“从源 'http://localhost:5000' 访问 XMLHttpRequest 在 'http://localhost:5001/api/login' 已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：否 'Access-Control-Allow-Origin ' 请求的资源上存在标头。”。奇怪的是，两种方法都调用了 catch 块中的代码（LoginApi 中的一个用于测试目的），但是当我将鼠标悬停时，catch 参数中的错误变量不断给出一条消息“未定义错误”它。 1）如果我因为发生错误而处于catch块中，那么错误怎么可能是未定义的？ 2) 如果我从 localhost 运行，我将如何收到 CORS 错误，我该如何解决以进行测试？

这是我的 saga 文件中的方法：

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;
    

【问题讨论】：

***.com/questions/18642828/…

为什么会捕获到异常而错误对象，捕获条件的参数未定义？

【参考方案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

【参考方案2】：

接收请求的服务器必须设置 CORS 标头，以让浏览器知道服务器正在等待其域之外的请求。您始终可以手动设置它们，但如果您使用的是 express，那么有一个库可以轻松地做到这一点 - https://expressjs.com/en/resources/middleware/cors.html。大多数流行的节点框架应该有一个等价物。