.netcore跨域設置

跨域

廣義上講，跨域是指一個域下的文檔或者腳本試圖去請求訪問另一個域下的資源（像我們直接通過代碼使用http請求資源，或者是使用輔助工具（例如postman）是可以直接訪問的，沒有跨域的概念）；
而我們一般說的跨域是指瀏覽器同源策略限制。

同源策略/SOP（Same origin policy）是一種約定，由Netscape公司1995年引入瀏覽器，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，瀏覽器很容易受到XSS、CSFR等攻擊。所謂同源是指"協議+域名+端口"三者都相同，即便兩個不同的域名指向同一個ip地址，也非同源（127.0.0.1和localhost就不是同源的！）。

同源策略限制：
1.) Cookie、LocalStorage 和 IndexDB 無法讀取
2.) DOM 和 Js對象無法獲得
3.) AJAX 請求不能發送

 

跨域的解決方法

1、通過jsonp跨域
2、采用跨域資源共享（cors）
3、ngix代理跨域
4、WebSocket協議跨域
等等...

 

在前后端分離的情況下，一般.netcore用來開發后端，提供api；前端采用自己的框架進行開發（例如vue）。所以就存在着跨域請求的情況。而像以前沒用前后端分離時，跨域的情況則比較少。

.netcore 跨域設置

.netcore一般采用的時候跨域資源共享的方式設置跨域。配置起來十分的簡單。

第一步、在appsetting.json中配置支持跨域請求的站點(通過配置文件進行設置方便后期維護)

  "corsUrls": "http://192.168.1.158:9900,http://192.168.1.156:8090,http://localhost:5000",

 

第二步、在startup.cs中void ConfigureServices(IServiceCollection services)方法配置

  //跨域配置
            //services.AddCors(options => options.AddPolicy("cors",
            //builder => builder.AllowAnyMethod().AllowAnyHeader().AllowAnyOrigin()));
            //AllowAnyMethod允許跨域策略允許所有的方法：GET/POST/PUT/DELETE 等方法  如果進行限制需要 AllowAnyMethod("GET","POST") 這樣來進行訪問方法的限制
            //AllowAnyHeader允許任何的Header頭部標題    有關頭部標題如果不設置就不會進行限制
            //AllowAnyOrigin 允許任何來源，一般不會設定所有源都可以訪問，而是只開放給對應的ip使用的。  
            //AllowCredentials 設置憑據來源 不可與AllowAnyOrigin 一起同時使用,否則會報錯：
            //限制為指定的域才可訪問，可加上.WithOrigins("www.xxx.com","www.xx2.com") 
            string[] corsUrls = Configuration["corsUrls"].ToString().Split(',');
            services.AddCors(p => p.AddPolicy("cors",
                policy => policy.WithOrigins(corsUrls).AllowAnyMethod().AllowAnyHeader().AllowCredentials()));

 

在startup.cs中的void Configure(IApplicationBuilder app, IWebHostEnvironment env)方法中配置

            app.UseCors("cors");

 

 

簡單測試

<div>
    <input id="btnCors" value="跨域請求" type="button" />
</div>
<script src="~/lib/jquery/dist/jquery.js"></script>
<script>
        $("#btnCors").click(function () { 
            $.ajax({
                type: 'POST',
                url: "http://localhost:5665/api/Article/GetAllArticle",
                data: JSON.stringify([
  {
      "title": "hello" 
  }
                ])
                    ,
                contentType: 'application/json',
                dataType: "json",
                xhrFields: {
                    withCredentials: true
                },
                success: function (result) {
                    alert(result.code)
                }
            });
        })
</script>

 

結果顯示

 

沒有設置跨域時請求時不成功的

 

 

 

------------------------