代码之家 › 专栏 › 技术社区 › Ka Tech

IE边缘-访问控制允许标头列表中不存在请求标头授权

microsoft-edge http angular

Ka Tech · 技术社区 · 6 年前

在Angular 2应用程序中,我试图使用密码和用户名凭据登录到后端服务器。到目前为止,我在运行我的应用程序和登录时没有遇到Chrome和Safari的问题。今天,我第一次尝试在Microsoft IE Edge中运行该应用程序。但是,当我尝试登录时,出现以下错误:

SEC7123:Request header Authorization was not present in the Access-Control-Allow-Headers list.

我使用angular 2+来运行http请求。下面是我的登录功能。有什么办法吗?

loginHttp(username: string, password: string): any {
    let headers: any = new Headers();
    let data: any = null;
    headers.append("Authorization", "Basic " + btoa(username + ":" + password)); 
    headers.append("Content-Type", "application/x-www-form-urlencoded");
    return this.http.post(this.authService.getUrl()+ '/login', data, {headers: headers})
    .map(res => res.json());
}

更新

检查后端(我们使用symphony),我们确实在标题中包含CORS:

defaults:
        allow_origin:  ["%cors_allow_origin%"]
        allow_methods: ["GET", "POST", "PUT", "DELETE", "LINK", "UNLINK"]
        allow_headers: ["Content-Type", "Authorization", "X-Employee-Id"]
        max_age:       3600
    paths:
        '^/': ~

已解决

最后的问题与交响乐有关。我们使用了nelmio cors配置,但它没有设置头。不管怎么说,它还是起作用了。

1 回复 | 直到 6 年前

Radonirina Maminiaina 6 年前

确保允许CRO

res.setHeader('Access-Control-Allow-Origin', '*');
// methods you wish to allow
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');

注: 我在本例中使用Express。

这个 documentation 有点变了。希望有帮助。

更新时间:

在使用Symfony之前,我们遇到了同样的问题。我找到的解决方案有:

服务器返回 OPTIONS 方法,允许CRO
然后发送http谓词(GET、POST,…)之后

以下是我的意思:

RestListner的代码:

class RestListener
{

    /**
     * Constructor
     */
    public function __construct()
    {

    }

    public function onKernelResponse(FilterResponseEvent $event)
    {
        if (!$event->isMasterRequest())
            return;

        $responseHeaders = $event->getResponse()->headers;

        $responseHeaders->set('Access-Control-Allow-Headers', 'origin, content-type, accept, x-wsse, set-cookie, x-sessid');
        $responseHeaders->set('Access-Control-Allow-Origin', '*');
        $responseHeaders->set('Access-Control-Expose-Headers', '*');
        $responseHeaders->set('Access-Control-Allow-Methods', 'POST, GET, PUT, DELETE, OPTIONS');

        $request = $event->getRequest();
        $method  = $request->getRealMethod();

        if (strtoupper($method) === 'OPTIONS') {
            header('Access-Control-Allow-Headers: origin, content-type, accept, x-wsse, set-cookie, x-sessid');
            header('Access-Control-Allow-Origin: *');
            header('Access-Control-Expose-Headers', '*');
            header('Access-Control-Allow-Methods: POST, GET, PUT, DELETE, OPTIONS');
            die(json_encode(array(
                'message' => 'Accepted',
                'status' => 202,
            )));
        }
    }
}

我们使用symfony作为后端和Angular 2。x作为前端。

通过该解决方案,可以通过CRO。