CORS跨域 #

什么是跨域 #

简单来说，当一个请求url 的协议、域名、端口三者之间任意一个与当前页面url 不同即为跨域。那为什么会出现跨域问题呢？

出于浏览器的同源策略限制。同源策略（Same。riginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。

可以说Web 是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。

同源策略会阻止一个域的javascript 脚本和另夕h—个域的内容进行交互。

所谓同源（即指在同一个域）就是两个页面具有相同的协议（pr otocol）, 主机（host）和端口号（port）

有跨域行为示例 #

当前页面 url	被请求页面 url	是否跨域	原因
https://www.Mall3s.com (opens new window)	https://www.Mall3s.com/index.html (opens new window)	否	同源(协议、域名、端口号相同)
http://www.Mall3s.com (opens new window)	https://www.Mall3s.com/index.html (opens new window)	跨域	协议不同(http/https)
https://www.Mall3s.com (opens new window)	http://www.baidu.com (opens new window)	跨域	主域名不同(Mall3s/baidu)
https://www.Mall3s.com (opens new window)	https://dotnet.Mall3s.com (opens new window)	跨域	子域名不同(www/dotnet)
https://www.Mall3s.com:8080 (opens new window)	https://www.Mall3s.com:7001 (opens new window)	跨域	端口号不同(8080/7001)

什么是CORS #

跨源资源共享(CORS) ：是一种W3C 标准，可让服务器放宽相同的源策略。不是一项安全功能，CORS 放宽security。API 不能通过允许CORS 来更安全。

有关详细信息，请参阅CORS工作原理 (opens new window)。

允许服务器明确允许一些跨源请求，同时拒绝其他请求。比早期的技术(如JSONP)更安全且更灵活。

如何使用 #

添加CORS 服务 #

启用跨域Cors 支持首先添加CorsAccessor 服务，如：

using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;
namespace Mall3s.Web.Core
{
    [AppStartup(700)]
    public sealed class WebCoreStartup : AppStartup
    {
        public void ConfigureServices(IServiceCollection services) {
        	services.AddCorsAccessor();
        	// ...
        }
        public void Configure(IApplicationBuilder app, IWebHostEnvironment env) {
        //...
        app.UseCorsAccessor();

        // ...
        }
}

特别注意 services.AddCorsAccessor() 需在services.AddControllers() 之前注册。

app.UseCorsAccessor() 需在app.UseRouting()和app.UseAuthentication()之间注册。

配置允许跨域域名 #

小提醒 默认情况下，Mall3s.NET 允许所有域名来源访问，也就是无需配置任何来源域名，另外前端也需要设置请求参数：withCredentials:false

如果需要指定特定域名，则添加以下配置即可：

{
"CorsAccessorSettings": {
"PolicyName": " 自定义跨域策略名",
"WithOrigins": ["http://localhost:3000", "https://192.168.0.1:3000"]
}
}

CorsAccessorSettings 配置 #

CorsAccessorSettings

PolicyName ：跨域策略名，字符串类型，必填，默认Mall3sCorsAccessor

WithOrigins ：允许跨域的域名列表，字符串数组类型，默认[ "http://localhost:58504 (opens new window)" ]

WithHeaders ：请求表头，没有配置则允许所有表头，字符串数组类型

WithExposedHeaders ：响应标头，字符串数组类型

WithMethods ：设置跨域允许请求谓词，没有配置则允许所有，字符串数组类型

AllowCredentials ：跨域请求中的凭据，bool 类型

SetPreflightMaxAge ：设置预检过期时间，int 类型，单位秒，**此配置可以控制客户端发送非GET ，HEAD ，POST 请求前发送OPTION 请求检查，状态码(204)

使用axios 前端注意事项 #

由于axios 对跨域有特定的需要，需要响应报文中公开特定Header 才能放行，如：AccessControl-Expose-Headers: xxxxx ，所以，如果前端使用了axios 请求，需要添加以下配置：

{
    "CorsAccessorSettings": {
    "WithExposedHeaders": ["access-token","x-access-token"]
    }
}

另外请求设置withCredentials: false 即可。

使用$.ajax 前端注意事项 #

使用Jquery 前端请求可以参考以下配置：

$.ajax({
url: "http://localhost:8080/getdata", type: "GET",
xhrFields: {
withcredentials: false // 女口果是https请求，可以试试true
},
crossDomain: true,
success: function (res) {
render(res);
}
});

禁用跨域 #

有时候，我们希望某个方法不检查跨域请求，可以在Action 中贴[Disablecors] 特性即可

CorsAccessorSettings 配置

使用axios 前端注意事项

使用$.ajax 前端注意事项

禁用跨域