持续存在的 CORS 问题（Vue 3 / Axios + ASP.NET Core Web API（后端））

Question

我很困惑。当运行我的 .net core 服务器然后将 vue proj 加载到与另一个文件相同的文件中时，我取得了部分成功。当我开始测试我发出的 axios/fetch 请求有什么问题时，测试项目在其他方面失败了。

我在 .NET 中公开了我的 cors 政策

Program.cs

:

using Microsoft.EntityFrameworkCore;
using ToDoApp.Data;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.

builder.Services.AddCors(options => 
{
    options.AddPolicy("AllowOrigin", policy => 
       {
           policy.AllowAnyOrigin()
                 .AllowAnyMethod()
                 .AllowAnyHeader()
                 .WithOrigins("http://localhost:5173");
       });    
});

builder.Services.AddControllers().AddNewtonsoftJson();

// Learn more about configuring Swagger/OpenAPI at https://aka.ms/aspnetcore/swashbuckle
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();
builder.Services.AddDbContext<AppDbContext>(options =>
 options.UseSqlite(builder.Configuration.GetConnectionString("DefaultConnection"))
);

var app = builder.Build();

// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
    app.UseSwagger();
    app.UseSwaggerUI();
}

app.UseCors("AllowOrigin");

app.UseHttpsRedirection();

app.UseAuthorization();

app.MapControllers();

app.Run();

我的控制器的相关部分（我正在尝试最基本的

GetAll

类型请求）：

[Route("api/[controller]")]
[ApiController]
public class ToDoController : ControllerBase
{
    private readonly AppDbContext _context;

    public ToDoController(AppDbContext context)
    {
        _context = context;
    }

    [HttpGet]
    [ProducesResponseType(StatusCodes.Status200OK)]
    public async Task<ActionResult<IEnumerable<ToDo>>> GetToDos()
    {
        return Ok(await _context.ToDos.ToListAsync());
    }
}

我的

launchsettings.json

：

{
 "$schema": "https://json.schemastore.org/launchsettings.json",
 "iisSettings": {
 "windowsAuthentication": false,
 "anonymousAuthentication": true,
 "iisExpress": {
 "applicationUrl": "http://localhost:40665",
 "sslPort": 44316
    }
  },
 "profiles": {
 "ToDoApp": {
 "commandName": "Project",
 "dotnetRunMessages": true,
 "launchBrowser": true,
 "launchUrl": "swagger",
 "applicationUrl": "https://localhost:7029;http://localhost:5096",
 "environmentVariables": {
 "ASPNETCORE_ENVIRONMENT": "Development"
      }
    },
 "IIS Express": {
 "commandName": "IISExpress",
 "launchBrowser": true,
 "launchUrl": "swagger",
 "environmentVariables": {
 "ASPNETCORE_ENVIRONMENT": "Development"
      }
    }
  }
}

App.vue（我已经在这个文件中浓缩了我想要做的所有事情）：

<script>
import axios from 'axios'
import {ref} from 'vue'

const API_URL = "http://localhost:5096/api/todo"

export default {
 setup () {
 const apiData = ref('')
 
 const loadApi = async () => {
 try {
 const response = await axios.get(API_URL);
 apiData.value = response.data.apiData
      } catch (e) {
 console.error(e);
      }
    }
 loadApi();
 return apiData;
  }
}
</script>

<template>
 <header>
 </header>

 <main>
 <p class="p-quote">{{ apiData }}</p>
 </main>
</template>

<style scoped>
#app {
 font-family: Avenir, Helvetica, Arial, sans-serif;
}

.p-quote {
 color: white;
}
</style>

唉，我总是看到一些与所附照片类似的控制台错误。帮助！

我已经尝试了很多，其中一些在原始帖子正文中有概述。我重新校准了 Vue 语法（我对该框架非常陌生），我梳理了网络和控制台响应。我已经通过浏览器、邮递员和另一个 vue proj 进行连接，这个项目实际上位于带有我的后端 .net 文件的整个 proj 文件夹中。

我在网址末尾添加和删除了正斜杠。

Answer 1

对于本地测试，您应该允许任何域访问资源。 将此代码替换为下面的代码

builder.Services.AddCors(options => 
{
    options.AddPolicy("AllowOrigin", policy => 
       {
           policy.AllowAnyOrigin()
                 .AllowAnyMethod()
                 .AllowAnyHeader()
                 .WithOrigins("http://localhost:5173");
       });    
});

builder.Services.AddCors(options => 
{
    options.AddPolicy("AllowOrigin", policy => 
       {
           policy.AllowAnyOrigin()
                 .AllowAnyMethod()
                 .AllowAnyHeader()
                 .WithOrigins("*");
       });    
});

Answer 2

你在使用Vite吗？

如果是这样，请查看您的 vite 配置：

server: {
    proxy: {
        '^/api/*': {
            target,
            secure: false
        }
    },
    port: 5173,
    https: {
        key: fs.readFileSync(keyFilePath),
        cert: fs.readFileSync(certFilePath),
    }
}

您可以在后端删除 Cors 登录，更改代理以匹配您的端点（可以单独执行所有操作或使用 *）并使用

window.location.origin