《Asp.Net Core3 + Vue3入坑教程》 - 配置CORS策略解決跨域問題

Iannnnnnnnnnnnn發表於2021-02-28
ASP.NETVueCORS跨域

簡介

《Asp.Net Core3 + Vue3入坑教程》 此教程適合新手入門或者前後端分離嘗試者。可以根據圖文一步一步進操作編碼也可以選擇直接檢視原始碼。每一篇文章都有對應的原始碼

教程後期會將 .Net Core 3升級成 .Net Core 5

目錄

《Asp.Net Core3 + Vue3入坑教程》系列教程目錄

Asp.Net Core後端專案

  1. 後端專案搭建與Swagger配置步驟
  2. (本文)配置CORS策略解決跨域問題
  3. （暫未發表敬請期待...）AutoMapper & Restful API
  4. （暫未發表敬請期待...）EF Core & Postgresql
  5. （暫未發表敬請期待...）.Net Core 3升級成 .Net Core 5
  6. （暫未發表敬請期待...）JWT

Vue3 前端專案

暫未發表敬請期待...

本文簡介

本文為《Asp.Net Core3 + Vue3入坑教程》系列教程的第二篇 - 跨域問題處理。前後端分離遇到的最常見問題之一就是跨域問題。本文接著上文（後端專案搭建與Swagger配置步驟）繼續為Asp .Net Core專案解決跨越問題

Simple專案跨域問題處理步驟

新建CRONTest.html用來驗證跨域問題

程式碼如下：

注意： url: "https://localhost:44372/api/Values", 埠號要與Simple專案的一致


<!DOCTYPE html><html>
<head> 
<meta charset="utf-8"> 
<title> CRONTest </title>
<script type="text/javascript" src="https://cdn.staticfile.org/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" >
$.ajax({
  type: "GET",
  url: "https://localhost:44372/api/Values", // 需要保證埠號與Simple專案的一致
  success: function(msg){
     alert( "CRONTest Success: " + msg );
   }
});

</script>
</head>
<body>
<p>CRONTest</p>
</body>
</html>

開啟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配置步驟）Swagger配置“配置XML 文件檔案”步驟，取消勾選然後再選中 ，將XML路徑設定成與你的電腦路徑匹配！

https://github.com/Impartsoft/Simple_Asp.Net_Core/tree/master/Simple_Asp.Net_Core 2.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/HTTP/CORS

相關文章