从 80 端口到另一个端口的角度 $http 请求

Posted 2023-03-04

【中文标题】从 80 端口到另一个端口的角度 $http 请求

【英文标题】：angular $http request from 80 port to another port

【发布时间】：2017-07-26 09:38:39

【问题描述】：

我正在尝试使用 $http 方法从 angular 1 项目中的本地服务器上的端口 3000 访问节点 api，但我收到此错误：

XMLHttpRequest 无法加载 http://localhost:3000/login。请求头 Access-Control-Allow-Headers 不允许字段授权 预检响应。

我还在节点js中添加了Access-Control-Allow-Origin : *：

req.on('end', function() 
    req.rawBody = req.rawBody.toString('utf8');
    res.setHeader('Access-Control-Allow-Origin', 'http://localhost');
    // Request methods you wish to allow
    res.setHeader('Access-Control-Allow-Methods', '*');
    // Request headers you wish to allow
    res.setHeader('Access-Control-Allow-Headers', '*');
    // 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', false);
    next();
);

我的角码是：

var req = 
            method: 'POST',
            url: 'http://localhost:3000/login',
            headers: 
                'Content-Type': 'application/json',
                // 'cache-control': 'no-cache'
            ,
            data:  username: username, password: password ,
            json: true
        ;

        $http(req).then(function successCallback(response)
            console.log(response);
        , function errorCallback(response)
            console.log("Error : ");
            console.log(response);
        );

但我仍然收到此错误。

【参考方案1】：

错误出现在指定的预检响应中。 所以你需要处理 OPTIONS 方法：

req.on('end', function() 
    req.rawBody = req.rawBody.toString('utf8');
    res.setHeader('Access-Control-Allow-Origin', 'http://localhost');

    // Request methods you wish to allow
    res.setHeader('Access-Control-Allow-Methods', '*');

    // Request headers you wish to allow
    res.setHeader('Access-Control-Allow-Headers', '*');

    // 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', false);


    if (req.method === "OPTIONS") 
        return res.status(200).end();
    

    return next();
);

这是由于浏览器处理跨域请求的方式造成的。在您的 POST 之前发送一个 OPTIONS 请求（预检）以获取允许的来源、标头和方法。