Web API跨浏览器问题 [英] Web API Cross browser issue

问题描述

从jquery调用Web API服务时，我收到错误信息。



XMLHttpRequest无法加载

http：/ / localhost：7532 / api / Common / GenerateTabs？clickedTab = null& null& _ = 1407394637890。

请求标头字段Access-Control不允许Access-Control-Allow-origin - 允许报头。



Juqery Code

$ .ajax（{

cache：false，

类型：类型，

url：url，

数据：JSON.stringify（数据），

// async：false，

crossDomain：true，

// dataType：jsonp，

processData：true，

contentType：'application / json; charset = utf-8'，

标题：{

'UserToken'：'sdsdsd'

}，

beforeSend：function（xhr）{

xhr.setRequestHeader（'Access-Control-Allow-Methods'，'GET，POST，PUT，DELETE'）;

xhr.setRequestHeader（'Access-Control-Allow-Headers'，'Origin，X-Requested-With，Content-Type，Accept，UserToken'）;

xhr.setRequestHeader（'Access- Control-Allow-origin'，'*'）;

xhr.setRequestHeader（'Ac cess-Control-Allow-Credentials'，true）;

}，

成功：successCallBack

}）;





Web API

I am getting below error msg while calling Web API service from jquery.

XMLHttpRequest cannot load
http://localhost:7532/api/Common/GenerateTabs?clickedTab=null&null&_=1407394637890.
Request header field Access-Control-Allow-origin is not allowed by Access-Control-Allow-Headers.

Juqery Code
$.ajax({
cache: false,
type: type,
url: url,
data: JSON.stringify(data),
//async: false,
crossDomain: true,
//dataType: "jsonp",
processData: true,
contentType: 'application/json; charset=utf-8',
headers: {
'UserToken': 'sdsdsd'
},
beforeSend: function (xhr) {
xhr.setRequestHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
xhr.setRequestHeader('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept,UserToken');
xhr.setRequestHeader('Access-Control-Allow-origin', '*');
xhr.setRequestHeader('Access-Control-Allow-Credentials', "true");
},
success: successCallBack
});


Web API

<httpProtocol>
  <customHeaders>
    <add name="Access-Control-Allow-Origin" value="*" />
    <add name="Access-Control-Allow-Headers" value="Origin, X-Requested-With, Content-Type, Accept,UserToken" />
    <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE" />
  </customHeaders>
</httpProtocol>

< br $>


[EnableCors（起源：*，标题：Origin，X-Requested-With，Content-Type，Accept，UserToken，方法：*） ]



config.EnableCors（）;

[EnableCors(origins: "*", headers: "Origin, X-Requested-With, Content-Type, Accept, UserToken", methods: "*")]

config.EnableCors();

public override void OnActionExecuted(HttpActionExecutedContext actionExecutedContext)
        {
            System.Diagnostics.Debugger.Launch();

            // Helper.WriteLog("OnActionExecuted", DateTime.Now, DateTime.Now);
            try
            {
                string actionName = actionExecutedContext.ActionContext.ActionDescriptor.ActionName;
                string controllerName = actionExecutedContext.ActionContext.ActionDescriptor.ControllerDescriptor.ControllerName;

                if (controllerName != USERCONTROLLER && actionName != USERACTION)
                {
                    if (actionExecutedContext.Request.Content.Headers.GetValues("UserToken").First() != null)
                    {
                        string token = actionExecutedContext.Request.Content.Headers.GetValues("UserToken").First();
                        actionExecutedContext.Response.Content.Headers.Add("UserToken", token);
                        actionExecutedContext.Response.Content.Headers.Add("Access-Control-Allow-Origin", "*");
                        actionExecutedContext.Response.Content.Headers.Add("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
                    }
                }

            }
            catch (Exception)
            {
                actionExecutedContext.Response.Content.Headers.Add("UserToken", "");
                actionExecutedContext.Response.Content.Headers.Add("Access-Control-Allow-Origin", "*");
                actionExecutedContext.Response.Content.Headers.Add("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
            }

            base.OnActionExecuted(actionExecutedContext);
        }

UI和web api都部署在IIS 7.0中。不适用于Chrome和FireFox。

UI and web api both are deployed in IIS 7.0. not working in Chrome and FireFox.

推荐答案

.ajax（{

cache：false，

类型：类型，

url：url，

数据：JSON.stringify（数据），

// async：false，

crossDomain：true，

// dataType：jsonp，

processData：true，

contentType：'application / json; charset = utf-8'，

标题：{

'UserToken'：'sdsdsd'

}，

beforeSend：function（xhr）{

xhr.setRequestHeader（'Access-Control-Allow-Methods'，'GET，POST，PUT，DELETE'）;

xhr .setRequestHeader（'Access-Control-Allow-Headers'，'Origin，X-Requested-With，Content-Type，Accept，UserToken'）;

xhr.setRequestHeader（'Access-Control-Allow -origin'，'*'）;

xhr.setRequestHeader（'Access-Control-Allow-Credentials'，true）;

}，

成功：successCallBack

}）;





Web API

.ajax({
cache: false,
type: type,
url: url,
data: JSON.stringify(data),
//async: false,
crossDomain: true,
//dataType: "jsonp",
processData: true,
contentType: 'application/json; charset=utf-8',
headers: {
'UserToken': 'sdsdsd'
},
beforeSend: function (xhr) {
xhr.setRequestHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
xhr.setRequestHeader('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept,UserToken');
xhr.setRequestHeader('Access-Control-Allow-origin', '*');
xhr.setRequestHeader('Access-Control-Allow-Credentials', "true");
},
success: successCallBack
});


Web API

<httpProtocol>
  <customHeaders>
    <add name="Access-Control-Allow-Origin" value="*" />
    <add name="Access-Control-Allow-Headers" value="Origin, X-Requested-With, Content-Type, Accept,UserToken" />
    <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE" />
  </customHeaders>
</httpProtocol>

< br $>


[EnableCors（起源：*，标题：Origin，X-Requested-With，Content-Type，Accept，UserToken，方法：*） ]



config.EnableCors（）;

[EnableCors(origins: "*", headers: "Origin, X-Requested-With, Content-Type, Accept, UserToken", methods: "*")]

config.EnableCors();

public override void OnActionExecuted(HttpActionExecutedContext actionExecutedContext)
        {
            System.Diagnostics.Debugger.Launch();

            // Helper.WriteLog("OnActionExecuted", DateTime.Now, DateTime.Now);
            try
            {
                string actionName = actionExecutedContext.ActionContext.ActionDescriptor.ActionName;
                string controllerName = actionExecutedContext.ActionContext.ActionDescriptor.ControllerDescriptor.ControllerName;

                if (controllerName != USERCONTROLLER && actionName != USERACTION)
                {
                    if (actionExecutedContext.Request.Content.Headers.GetValues("UserToken").First() != null)
                    {
                        string token = actionExecutedContext.Request.Content.Headers.GetValues("UserToken").First();
                        actionExecutedContext.Response.Content.Headers.Add("UserToken", token);
                        actionExecutedContext.Response.Content.Headers.Add("Access-Control-Allow-Origin", "*");
                        actionExecutedContext.Response.Content.Headers.Add("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
                    }
                }

            }
            catch (Exception)
            {
                actionExecutedContext.Response.Content.Headers.Add("UserToken", "");
                actionExecutedContext.Response.Content.Headers.Add("Access-Control-Allow-Origin", "*");
                actionExecutedContext.Response.Content.Headers.Add("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
            }

            base.OnActionExecuted(actionExecutedContext);
        }

UI和web api都部署在IIS 7.0中。不适用于Chrome和FireFox。

UI and web api both are deployed in IIS 7.0. not working in Chrome and FireFox.

这篇关于Web API跨浏览器问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！