NCF 如何設置接口跨域訪問

簡介

後端開發一定對跨域問題比較熟悉了，那麼今天我們來聊一下NCF的跨域問題，有2種方案

一、直接在服務端的web服務器設置跨域，即IIS設置跨域問題（參考：https://blog.csdn.net/guzicheng1990/article/details/106253104/）

二、在後臺代碼中增加跨域設置，此種方法比較靈活（推薦）

今天重點講解第二種方案

 

步驟

1.在Senparc.Web的Startup.cs中增加使用跨域

2.在建立的Xncf模塊中增加中間件，並在中間件中加入啓用跨域

3.在Xncf模塊中增加跨域允許的內容

 

實施

1.在Senparc.Web的Startup.cs中增加使用跨域

1 app.UseCors();

2.在建立的Xncf模塊中增加中間件，並在中間件中加入啓用跨域

 1 using Microsoft.AspNetCore.Builder;
 2 using Microsoft.AspNetCore.Http;
 3 using Microsoft.Extensions.DependencyInjection;
 4 using Microsoft.Extensions.FileProviders;
 5 using Microsoft.Extensions.Options;
 6 using Senparc.Ncf.XncfBase;
 7 using Senparc.Xncf.Admin.Utils;
 8 using System;
 9 using System.IO;
10 
11 namespace Senparc.Xncf.Admin
12 {
13     public partial class Register : IXncfMiddleware
14     {
15         public IApplicationBuilder UseMiddleware(IApplicationBuilder app)
16         {
17             app.UseCors("cors");
18             app.UseRouting();
19 
20             //添加MVC模式支持
21             app.UseEndpoints(endpoints =>
22             {
23                 endpoints.MapControllerRoute(
24                     name: "default",
25                     pattern: "{controller=Home}/{action=Index}/{id?}");
26                 });
27                 return app;
28             }
29     }
30     }

3.在Xncf模塊中增加跨域允許的內容

 1         public void AddXncfDatabaseModule(IServiceCollection services)
 2         {
 3             //DOT REMOVE OR MODIFY THIS LINE 請勿移除或修改本行 - Entities Point
 4             //ex. services.AddScoped(typeof(Color));
 5             //跨域,這裏可以自定義跨域的數組
 6             var domains = FileServerConfiguration.GetSection("Cors:Domain").Get<string[]>();
 7             var allowedOrigins = new HashSet<string>(domains, StringComparer.OrdinalIgnoreCase);
 8             //跨域默認策略
 9             services.AddCors(options => options.AddDefaultPolicy(builder =>
10             {
11                 builder.AllowAnyOrigin();
12                 builder.SetIsOriginAllowed(origin => allowedOrigins.Contains(new Uri(origin).Host));
13             }));
14             //跨域自定義策略cors
15             services.AddCors(p => p.AddPolicy("cors", 
16                 policy => policy.WithOrigins(domains).AllowAnyMethod().AllowAnyHeader().AllowAnyOrigin())
17             );
18         }    

 

結語

 NCF倉庫地址：https://github.com/NeuCharFramework/NCF (歡迎Star)

 按照上面的方法可以解決NCF跨域的難題，歡迎大家交流，歡迎Star，歡迎關注