DotNetCore WebAPI 和 Vue 前后端跨域请求配置

问题现象#

在前后端分离的开发模式下，前端默认情况下是不能直接请求后端接口的，类似出现如下所示的错误：

后端配置#

修改 Startup.cs

public void ConfigureServices(IServiceCollection services)
{
    services.AddControllers();
    services.AddCors(options =>
    {
        options.AddPolicy("CorsPolicy",
                builder => builder.WithOrigins("http://localhost:8080") //前端地址
                .AllowAnyMethod()
                .AllowAnyHeader());
    });
    
    // .....
}

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    // ...
    app.UseRouting();

    app.UseAuthentication();
    app.UseAuthorization();

    //必须要位于 app.UseRouting() 和 app.UseEndpoints() 之间
    app.UseCors("CorsPolicy");

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllers();
    });
}

前端配置#

修改 main.js

import 'bootstrap/dist/css/bootstrap.css'
import axios from 'axios'
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

axios.defaults.headers.common["Access-Control-Allow-Origin"] = "*"
// 设置后端接口根地址
axios.defaults.baseURL = 'http://localhost:5000' //后端地址

createApp(App).use(router).mount('#app')

这样就可以直接使用 axios 来进行后端接口请求，示例如下所示：

axios.get("/user/info").then((response) => {});