CORS跨域

一：簡介

爲何會出現跨域問題？

受同源策略影響，不一樣域名之間不能夠進行訪問。同源策略(Same-Origin Policy)。所謂的 同源 是指域名、協議、端口號 相同。不一樣的客戶端腳本（JavaScript，ActionScript）在沒有受權的狀況下，不能讀取對方資源。簡單來講，瀏覽器容許包含在頁面A的腳本訪問第二個頁面B的數據資源，這一切是創建在A和B頁面是同源的基礎上。

普通ajax跨域請求，在服務器端不會有任何問題，只是服務端響應數據返回給瀏覽器的時候，瀏覽器根據響應頭的Access-Control-Allow-Origin字段的值來判斷是否有權限獲取數據，通常狀況下，服務器端若是沒有在這個字段作特殊處理的話，跨域是沒有權限訪問的，因此響應數據被瀏覽器給攔截了，因此在ajax回調函數裏是獲取不到數據的

目前比較常見的Jsonp跨域，其實是建立了一個script標籤，由於script跨域時沒有限制。如 <script src="http://www.baidu.com"></script> 就會在script裏面返回百度的首頁內容。

 

二：CORS原理

CORS（Cross-Origin-Resource Sharing，跨院資源共享）是一種容許多種資源（圖片，Css文字，Javascript等）在一個Web頁面請求域以外的另外一個域的資源的機制。 跨域資源共享這種機制讓Web應用服務器支持跨站訪問控制，從而使得安全的進行跨站數據傳輸成爲了可能。

 

 

 

三：XMLHttpRequest使用POST跨域請求MVC

JQuery寫法

      $(function () {
            var xhr = new XMLHttpRequest();
            //相應返回的數據格式
            xhr.responseText = "text";
            //建立請求
            xhr.open("POST", "http://wang.xiaoyaodijun.com/Home/Get");
            //的默認值與具體發送的數據類型有關，必須在open()方法以後【普通的表單提交的格式】
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;");

            xhr.onreadystatechange = function () {
                console.log(xhr.responseText);
            };
            xhr.onload = function (msg) {
                console.log(msg);
            }
            xhr.onerror = function (msg) {
                console.log(msg);
            }
            //發送參數
            xhr.send("name=jexus&address=www.xiaoyaodijun.com");
        });

MVC 寫法，web.config

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

寫到這，能夠跨域請求，可是接受不到數據，提示：已攔截跨源請求：同源策略禁止讀取位於 http://wang.xiaoyaodijun.com/Home/Get 的遠程資源。（緣由：CORS 頭缺乏 'Access-Control-Allow-Origin'）

在Global.asax文件中添加濾器，

        protected void Application_Start()
        {
            AreaRegistration.RegisterAllAreas();
            RouteConfig.RegisterRoutes(RouteTable.Routes);
            //跨域設置
            GlobalFilters.Filters.Add(new AllowOriginAttribute());
        }

 

    //AttributeTargets.Class過濾類，AttributeTargets.Method過濾方法
    [AttributeUsage(AttributeTargets.Method, AllowMultiple = true, Inherited = false)]
    public class AllowOriginAttribute : FilterAttribute, IActionFilter
    {
        public void OnActionExecuting(ActionExecutingContext filterContext)
        {

        }

        public void OnActionExecuted(ActionExecutedContext filterContext)
        {
            filterContext.HttpContext.Response.AppendHeader("Access-Control-Allow-Origin", "*");
        }
    }

 四：XMLHttpRequest使用POST跨域請求WebApi 

一樣須要在Web.Config中添加跨域

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

從NewGet中添加Microsoft.AspNet.WebApi.Core類庫文件

修改WebApiConfig類

 public static void Register(HttpConfiguration config)
        {
            // Web API 配置和服務
            config.EnableCors(new EnableCorsAttribute("*", "*", "*"));
            // Web API 路由
            config.MapHttpAttributeRoutes();

            config.Routes.MapHttpRoute(
                name: "DefaultApi",
                routeTemplate: "api/{controller}/{action}/{id}",
                defaults: new { id = RouteParameter.Optional }
            );
        }

Jquery請求

    <script>
        $(function () {
            var xhr = new XMLHttpRequest();
            //相應返回的數據格式
            xhr.responseText = "text";
            //建立請求
            xhr.open("POST", "http://xiaoyaodijun.com/api/home/GetName");
            //的默認值與具體發送的數據類型有關，必須在open()方法以後【普通的表單提交的格式】
            xhr.setRequestHeader("Content-Type", "application/json");
            xhr.onreadystatechange = function () {
                console.log(xhr.responseText);
            };
            xhr.onload = function (msg) {
                console.log(msg);
            }
            xhr.onerror = function (msg) {
                console.log(msg);
            }
            var p={Name:"123",Age:10,Address:"北京朝陽"}
            xhr.send(JSON.stringify(p));
        });
 </script>

 其餘跨域類文章：https://www.cnblogs.com/zhangcybb/p/6594991.html