AspNetCoreApi 跨域處理

AspNetCoreApi 跨域處理

若是我們有處理過MV5 跨域問題這個問題也不大。

（1）爲何會出現跨域問題：

 瀏覽器安全限制了前端腳本跨站點的訪問資源，因此在調用WebApi 接口時不能成功訪問資源，緣由「同源策略」的存在：

        同源指如下幾點相同

              (1) IP地址/域名

              (2) 端口號

              (3) 網絡協議）

              以上三點相同即爲同源，瀏覽器將不作限制。

        （同源）   WebFrom 前臺Ajax調用後臺PageLoad頁時 由於是在同一站點，以上三點均知足，也就不會出現跨域的問題。

        （不一樣源） 好比用微服務開發時，前臺和微服務沒有在同一臺服務器上，雖然端口相同IP不一樣協議也相同，這時就會出現了跨域的問題了。

  引用腳本時會有例外：

（2）文章以AspNetCore Api 爲例

      2.1：首先建立一個CoreAPI的項目（這個就很少說了）

      2.2：確保項目NuGet中引用 AspNetCore.ALL 裏面包含 AspNetCore.Cors

 

                 

 

     若是沒有右擊項目依賴項代開NuGet管理工具

               如圖所示查找：

              

 

 

        2.3：在Startup.cs 文件的ConfigureServices方法中注入以下代碼：

    （1）第一種

services.AddCors(options => options.AddPolicy("Domain",
            builder => builder.WithOrigins("http://a.example.com", "http://c.example.com").AllowAnyMethod().AllowAnyHeader().AllowAnyOrigin().AllowCredentials()));

 

    "http://a.example.com", "http://c.example.com" 表明着容許訪問的域，就好像給這個域開放了一個權限，容許訪問的權限，能夠寫多個逗號分隔

            （2）第二種

  services.AddCors(options => options.AddPolicy("Domain",
            builder => builder.AllowAnyMethod().AllowAnyHeader().AllowAnyOrigin().AllowCredentials()));

            //AllowAnyMethod容許跨域策略容許全部的方法：GET/POST/PUT/DELETE 等方法  若是進行限制須要 AllowAnyMethod("GET","POST") 這樣來進行訪問方法的限制
            //AllowAnyHeader容許任何的Header頭部標題    有關頭部標題若是不設置就不會進行限制
            //AllowAnyOrigin 容許任何來源
            //AllowCredentials 設置憑據來源

 

    這裏是重點很少說了：F12 查看源 閱讀註釋就明白了。

    

               在項目中能夠寫 多個services.AddCors() 須要注意的是 Domain1 的區別 我們能夠針對不一樣的限制些不一樣的 限制規則

services.AddCors(options => options.AddPolicy("Domain1",
            builder => builder.WithOrigins("http://a.example.com", "http://c.example.com").AllowAnyMethod().AllowAnyHeader().AllowAnyOrigin().AllowCredentials()));

services.AddCors(options => options.AddPolicy("Domain2",
            builder => builder.WithOrigins("http://a.example.com", "http://c.example.com").AllowAnyMethod().AllowAnyHeader().AllowAnyOrigin().AllowCredentials()));

services.AddCors(options => options.AddPolicy("Domain3",
            builder => builder.WithOrigins("http://a.example.com", "http://c.example.com").AllowAnyMethod().AllowAnyHeader().AllowAnyOrigin().AllowCredentials()));

services.AddCors(options => options.AddPolicy("Domain4",
            builder => builder.WithOrigins("http://a.example.com", "http://c.example.com").AllowAnyMethod().AllowAnyHeader().AllowAnyOrigin().AllowCredentials()));

            爲何作這麼多限制呢：其實你們每一個請求都包含了不少內容：

                           好比：經過 抓包工具看到的每條請求所包含的請求信息

                            

                          再好比：咱們經過HTTP發送請求時進行的設置：下圖舉例還能夠設置更多的設置，這些設置均可以經過

                                        services.AddCors()來進行設置：

                            

                        2.4：在Startup.cs 文件中的Configure()方法中註冊咱們的   Domain

                             

 public void Configure(IApplicationBuilder app, IHostingEnvironment env)
        {   
            app.UseCors("Domain1");
            app.UseCors("Domain2");
            app.UseCors("Domain3");
            app.UseCors("Domain4");
        }

 

                      上面操做完以後咱們就結束了準備任務如今能夠進行使用了：使用方法以下：
                        2.5：使用以下：
                       （1）第一種  action

       [HttpGet("{OrderNO}/{BranchID}")]
        //啓用跨域
        [EnableCors("Domain")]
        public Object getMultipleOrderDetail(string OrderNO, int OrderNoType, string BranchID)
        {
            return vM.getMultipleOrderDetail(OrderNO, OrderNoType, BranchID);
        }

                      （2）第二種  控制器

 //啓用跨域
    [EnableCors("Domain")]
    [Produces("application/json")]
    [Route("api/BorrowOrder/[action]")]
    public class SP_PartsBorrowOrderController : Controller
    {

                        2.6 :前臺調用代碼以下：

 

                       重點是：這個節點    xhrFields: { withCredentials:true //跨域請求中帶cookie },//必須有這項的配置，否則cookie沒法發送至服務端

 <div>
        <input id="login" value="跨域請求" type="button" />
    </div>
    <script>
        $("#login").click(function () {
            debugger
            $.ajax({
                type: 'POST',
                url: "http://localhost:54606/api/BorrowSignDetail/BorrowSignOperate",
                data: JSON.stringify([
  {
      "InputItemID": "111",
      "PartBarCode": "11",
      "PartNO": "11",
      "Counts": "11"
  }
                ])
                    ,
                contentType: 'application/json',
                dataType: "json",
                xhrFields: {
                    withCredentials: true
                },
                success: function (result) {
                    alert(result)
                }
            });
        })
    </script>

本文是以 CORS 進行實現 

                              轉載請註明出處謝謝！