# 簡介 《Asp.Net Core3 + Vue3入坑教程》 此教程適合新手入門或者前後端分離嘗試者。可以根據圖文一步一步進操作編碼也可以選擇直接檢視原始碼。每一篇文章都有對應的原始碼 > 教程後期會將 .Net Core 3升級成 .Net Core 5 # 目錄 #### 《Asp.Net Core3 + Vue3入坑教程》系列教程目錄 Asp.Net Core後端專案 1. [後端專案搭建與Swagger配置步驟](https://www.cnblogs.com/Iannnnnnnnnnnnn/p/14435589.html) 2. [**(本文)配置CORS策略解決跨域問題**](https://www.cnblogs.com/Iannnnnnnnnnnnn/p/14438539.html) 3. （暫未發表敬請期待...）[AutoMapper & Restful API](https://www.cnblogs.com/Iannnnnnnnnnnnn/p/14438949.html) 4. （暫未發表敬請期待...）[EF Core & Postgresql](https://www.cnblogs.com/Iannnnnnnnnnnnn/p/14438885.html) 5. （暫未發表敬請期待...）[.Net Core 3升級成 .Net Core 5](https://www.cnblogs.com/Iannnnnnnnnnnnn/p/14444048.html) 6. （暫未發表敬請期待...）[JWT](https://www.cnblogs.com/Iannnnnnnnnnnnn/p/14444048.html) Vue3 前端專案 暫未發表敬請期待... # 本文簡介 本文為《Asp.Net Core3 + Vue3入坑教程》系列教程的第二篇 - 跨域問題處理。前後端分離遇到的最常見問題之一就是跨域問題。本文接著[上文（後端專案搭建與Swagger配置步驟）](https://www.cnblogs.com/Iannnnnnnnnnnnn/p/14435589.html)繼續為Asp .Net Core專案解決跨越問題 # Simple專案跨域問題處理步驟 #### 新建CRONTest.html用來驗證跨域問題 程式碼如下： > ==注意：== url: "https://localhost:44372/api/Values", 埠號要與Simple專案的一致 ```

CRONTest

``` #### 開啟CRONTest.html，並按F12開啟瀏覽器開發者工具,我們可以看到控制檯報了跨域的錯誤  #### 為Simple專案增加跨域處理，在ServiceProvider資料夾下新建擴充套件類CORS.cs 程式碼如下： > ==注意==：目前先允許所有請求，當能夠明確前端域名的時候，再改掉WithOrigins方式！！！ ``` using Microsoft.Extensions.DependencyInjection; namespace Simple_Asp.Net_Core.ServiceProvider { public static class CORS { public static void AddCORS(this IServiceCollection services) { services.AddCors( options => options.AddPolicy( "CorsTest", // 目前先允許所有請求，當能夠明確前端域名的時候，再改成WithOrigins方式 p => p.AllowAnyOrigin() // 配置前端域名，注意埠號後不要帶/斜杆 //p => p.WithOrigins("https://localhost:44372", "https://localhost:44372") .AllowAnyHeader() .AllowAnyMethod() .WithExposedHeaders("Content-Disposition"))); } } } ``` #### 配置Starup.cs ``` using System; using System.Collections.Generic; using System.Linq; using System.Threading.Tasks; using Microsoft.AspNetCore.Builder; using Microsoft.AspNetCore.Hosting; using Microsoft.AspNetCore.Http; using Microsoft.Extensions.DependencyInjection; using Microsoft.Extensions.Hosting; using Simple_Asp.Net_Core.ServiceProvider; namespace Simple_Asp.Net_Core { public class Startup { // This method gets called by the runtime. Use this method to add services to the container. // For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940 public void ConfigureServices(IServiceCollection services) { services.AddCORS(); services.AddMvc(); services.AddSwagger(); } // This method gets called by the runtime. Use this method to configure the HTTP request pipeline. public void Configure(IApplicationBuilder app, IWebHostEnvironment env) { if (env.IsDevelopment()) { app.UseDeveloperExceptionPage(); app.UseSwagger(); app.UseSwaggerUI(c => { c.SwaggerEndpoint("/swagger/v1/swagger.json", "ApiHelp V1"); }); } app.UseCors("CorsTest"); app.UseRouting(); app.UseEndpoints(endpoints => endpoints.MapDefaultControllerRoute()); } } } ``` #### 再次使用CRONTest.html呼叫後端介面 這次能成功呼叫後端介面，解決了跨域問題  #### CORS跨域問題處理完成！ # 總結 本文為Simple專案配置CORS策略來解決跨域問題，這時候前端專案可以正常請求後端服務。 > 需要注意目前原始碼是允許所有請求，當能夠明確前端域名的時候，要改掉WithOrigins方式！保證後端服務的安全！ 解決跨域問題有很多種,可以使用通過jsonp或者nginx代理等等 # GitHub原始碼 ==注意==：原始碼除錯過程中如果出現xml檔案路徑錯誤，需要參照[上文（後端專案搭建與Swagger配置步驟）](https://www.cnblogs.com/Iannnnnnnnnnnnn/p/14435589.html)Swagger配置“配置XML 文件檔案”步驟，==取消勾選然後再選中== ，將XML路徑設定成與你的電腦路徑匹配！ > https://github.com/Impartsoft/Simple_Asp.Net_Core/tree/master/Simple_Asp.Net_Core%202.CORS # 參考資料 > 部落格（推薦學習） https://www.cnblogs.com/laozhang-is-phi/p/9495618.html > 微軟官方文件 https://docs.microsoft.com/zh-cn/aspnet/core/?view=aspnetcore-5.0 > CORS詳解 http://www.ruanyifeng.com/blog/2016/04/cors.html > CORS詳解 https://developer.mozilla.org/en-US/docs/Web/HT