解決 ionic 中的 CORS(跨域) 問題
阿新 • • 發佈:2019-02-19
緣起ionic社群裡的(ionic serve)時的跨域問題,有人在這裡翻譯了一篇文章,洋洋灑灑,從理論到實際,說的都很好。
不過有人在底下的評論裡說的更加到位:
搜尋了一下,果然啊,方便啊
不過還是要說一下在伺服器上的配置,如此能夠做到使ionic當作純web來使用。
廢話不多,上程式碼。
先上一個attribute,每次響應都帶上這個header,允許其訪問:
public class AccessControlAllowOriginAttribute : System.Web.Http.Filters.ActionFilterAttribute { public const string ALLOW_ORIGIN = "http://test.test.com"; public override void OnActionExecuting(System.Web.Http.Controllers.HttpActionContext actionContext) { System.Web.HttpContext.Current.Response.AppendHeader("Access-Control-Allow-Origin", ALLOW_ORIGIN); } }
在被允許呼叫的action或者controller上賦值此attribute:
[AccessControlAllowOrigin]
public class ValuesController : ApiController
{
}
完成。
考慮到正常來說也就一個被允許訪問的站點,因此使用了一個string的const,當然多了也可以考慮變成string[]。
還可以使用動態的配置來載入這個string或者string[]。都可以。
public class AccessControlAllowOriginAttribute : System.Web.Http.Filters.ActionFilterAttribute { public static string[] ARRAY_ALLOW_ORIGIN = new string[] { "http://int-env.test.com", "http://prod-env.test.com" }; public override void OnActionExecuting(System.Web.Http.Controllers.HttpActionContext actionContext) { try { string origin = System.Web.HttpContext.Current.Request.Headers["Origin"]; if (string.IsNullOrWhiteSpace(origin)) { return; } origin = origin.ToLower(); if (ARRAY_ALLOW_ORIGIN.Contains(origin)) { System.Web.HttpContext.Current.Response.AppendHeader("Access-Control-Allow-Origin", origin); } } catch (Exception ex) {} } }
當然了,由於Origin可以偽造,在任意允許了跨域訪問的server上,無論是個別網站來源還是*的來源,都不是安全的,只是造成其風險的步驟稍微多了一點而已。
其安全性上還是要更多考慮一些。
附請求雙方的一些關鍵字:
/token
post
Content-Type: application/x-www-form-urlencoded
grant_type=password&username=uname&password=pwd
resp:
後續的token header:{ "access_token": "ttttttttttttttttttt", "token_type": "bearer", "expires_in": 1209599, "userName": "uanme", ".issued": "Fri, 01 Jul 2016 05:38:12 GMT", ".expires": "Fri, 15 Jul 2016 05:38:12 GMT" }
Authorization : bearer token