.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>

 

结果显示

 

没有设置跨域时请求时不成功的

 

 

 

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