angularjs - 预检响应中的 Access-Control-Allow-Headers 不允许请求标头字段

Posted 2023-02-27

【中文标题】angularjs - 预检响应中的 Access-Control-Allow-Headers 不允许请求标头字段

【英文标题】：angularjs - Request header field is not allowed by Access-Control-Allow-Headers in preflight response

【发布时间】：2017-09-02 11:31:33

【问题描述】：

我正在使用 lib https://github.com/doedje/jquery.soap/ 将 ionic 应用程序连接到 asmx 网络服务。但是，我收到一个错误：

XMLHttpRequest 无法加载 http://10.10.9.169/UserService3/WebService1.asmxgetUserbyUsername。 请求标头字段 SOAPAction 不允许 预检响应中的访问控制允许标头。 jquery.soap.js:456 未捕获的错误：意外内容：未定义

这是我的controller.js 代码：

$scope.enterlogin = function(usern,pass)

    $.soap(
        url: 'http://<webservice's ip address>/UserService3/WebService1.asmx',
        method: 'getUserbyUsername',

        data: 
            uname: usern,
            passw: pass
        ,

        success: function (soapResponse) 
            console.log('response is = ' + soapResponse);
        ,

        error: function (soapResponse) 
            // show error
            console.log('response error is = ' + soapResponse);
        
     );

我还在网络服务的web.config 文件中添加了以下内容：

<webServices>
  <protocols>
    <add name="HttpGet"/>
    <add name="HttpPost"/>
  </protocols>
</webServices>
<httpHandlers>
    <add verb="GET,HEAD,POST,OPTIONS" path="*.asmx" type="System.Web.UI.WebServiceHandlerFactory" />
</httpHandlers>

<httpProtocol>
    <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
        <add name="Access-Control-Allow-Headers" value="Content-Type, Authorization" />
        <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
    </customHeaders>
</httpProtocol>

我错过了什么吗？

【参考方案1】：

错误消息似乎表明请求包含名称为 SOAPAction 的标头。

因此，您似乎需要将该标题名称添加到 web.config 文件的以下部分：

<add name="Access-Control-Allow-Headers"
     value="SOAPAction, Content-Type, Authorization" />