I am puzzled. While running my .net core server and loading the vue project in the same file, I encounter partial success. However, when I start testing the axios/fetch requests, the test project fails in other ways.
My CORS policy is set to be very lenient in .NET in 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();
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();
builder.Services.AddDbContext<AppDbContext>(options =>
options.UseSqlite(builder.Configuration.GetConnectionString("DefaultConnection"))
);
var app = builder.Build();
if (app.Environment.IsDevelopment())
{
app.UseSwagger();
app.UseSwaggerUI();
}
app.UseCors("AllowOrigin");
app.UseHttpsRedirection();
app.UseAuthorization();
app.MapControllers();
app.Run();
The relevant part of my controller for a basic GetAll request:
[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());
}
}
Details from my 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"
}
}
}
}
Snippet from App.vue containing various attempts:
<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>Despite multiple attempts and troubleshooting steps described above, I continue to face console errors similar to those shown in the images linked below. Help!
https://i.stack.imgur.com/RGMnH.png https://i.stack.imgur.com/3zgjM.png https://i.stack.imgur.com/jLhbL.png