CORS(Cross-origin resource sharing) 是一个 W3C 标准,翻译过来就是 "跨域资源共享",它主要是解决 Ajax 跨域限制的问题。
CORS 需要浏览器和服务器支持,现在所有现代浏览器都支持这一特性。注:IE10 及以上
只要浏览器支持,其实 CORS 所有的配置都是在服务端进行的,而前端的操作浏览器会自动完成。
在本例中,将演示如何再 ASP.NET Core 中实现 CORS 跨域。
在 VS 中新建项目,项目类型选择 ASP.NET Core web Application(.NET Core), 输入项目名称为:CSASPNETCoreCORS,Template 选择 Empty.
注:添加下面的代码时 IDE 会提示代码错误,这是因为还没有引用对应的包,进入报错的这一行,点击灯泡,加载对应的包就可以了。
(图文无关)
- services.AddCors();
- app.UseCors(builder = >builder.WithOrigins("http://localhost"));
- public void ConfigureServices(IServiceCollection services) {
- services.AddCors();
- }
- public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory) {
- app.UseCors(builder = >builder.WithOrigins("http://localhost"));
- app.Run(async(context) = >{
- await context.Response.WriteAsync("Hello World!");
- });
- }
来让我们运行一下:
输出结果很简单,你会在浏览器上看到一个 Hello World!
既然是跨域,那我们就需要用两个域名,上面我们已经有了一个,类似于这样的:
接下来我们来用过 IIS 来搭建另外一个。
为了文章的简洁,这里假设你已知道如何在 IIS 上搭建一个网站,如有疑问,网上一堆答案。
首先我们新建一个文件夹,并将 IIS 默认的 localhost 网站的根目录指向该文件夹。
在该文件夹中添加一个文件 index.html。
内容应该是这个样子:
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <title>
- </title>
- <script src="https://code.jquery.com/jquery-3.1.1.min.js">
- </script>
- </head>
- <body>
- <script>
- $.get("http://localhost:1661/", {},
- function(data) {
- alert(data);
- },
- "text");
- </script>
- </body>
- </html>
注:请求的地址应为你上个项目的调试地址,撰写此文时我项目的调试地址为 http://localhost:1661/,具体以自己的情况为准。
浏览 localhost 这个网站,js 会跨域请求另外一个域名的地址,并弹出返回值。
在发起 ajax 请求时,浏览器一旦发现 Ajax 请求跨域,会自动添加一些附加的头信息并请求到目标服务器(会带有本域的域名),目标服务器则检测该域名是否在允许跨域的域名之列,如果有则返回请求结果,否则失败。
具体的原理可以看看这篇博客:。
上例仅仅是一个基本的配置方法,接下来将演示更高级一点的方式,下面将演示在分组策略以及与 MVC 的整合。
- services.AddCors(options = >{
- options.AddPolicy("AllowSpecificOrigin", builder = >{
- builder.WithOrigins("http://localhost", "https://www.microsoft.com");
- });
- options.AddPolicy("AllowSpecificOrigin1", builder = >{
- builder.WithOrigins("http://localhost:8080", "https://www.stackoverflow.com");
- });
- });
- services.AddMvc();
完整的代码应该是这样:
- app.UseMvc();
- public void ConfigureServices(IServiceCollection services) {
- services.AddCors(options = >{
- options.AddPolicy("AllowSpecificOrigin", builder = >{
- builder.WithOrigins("http://localhost", "https://www.microsoft.com");
- });
- });
- services.AddMvc();
- }
- public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory) {
- app.UseMvc();
- }
接下来我们来添加 Controller
[EnableCors("AllowSpecificOrigin")] 既为在本 controller 或 action 中应用哪个分组策略。 [DisableCors] 则为本 controller 或 action 不允许跨域资源请求
- //[EnableCors("AllowSpecificOrigin")]
- [Route("api/[controller]")] public class HomeAPIController: Controller { [EnableCors("AllowSpecificOrigin")][HttpGet] public string Get() {
- return "this message is from another origin";
- } [DisableCors][HttpPost] public string Post() {
- return "this method can't cross origin";
- }
- }
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <title>
- </title>
- <script src="https://code.jquery.com/jquery-3.1.1.min.js">
- </script>
- </head>
- <body>
- <script>
- $.get("http://localhost:1661/API/HomeAPI", {},
- function(data) {
- alert(data);
- },
- "text");
- </script>
- </body>
- </html>
注:下载本文的完整代码示例请访问 >
来源: http://www.cnblogs.com/onecodeonescript/p/6121009.html