Cannot see my API call on frontend console?

Question

fetch('https://localhost:7077/api/test/users')
  .then(res => res.json())
  .then(data => console.log('Users:', data))
  .catch(err => console.error('Error:', err));

Error:

Promise {<pending>}
(index):1 Access to fetch at 'https://localhost:7077/api/test/users' from origin 'https://farm-link-zimbabwe-gh.vercel.app' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.Understand this error
VM247:1  GET https://localhost:7077/api/test/users net::ERR_FAILED 200 (OK)
(anonymous) @ VM247:1Understand this error
VM247:4 Error: TypeError: Fa

This is my code in program.cs:

using Microsoft.EntityFrameworkCore;
using Zama.Data;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddControllers();

// Add DbContext
builder.Services.AddDbContext<AppDbContext>(options =>
    options.UseSqlServer(builder.Configuration.GetConnectionString("DefaultConnection")));


builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowVercel", policy =>
    {
        policy.WithOrigins("https://farm-link-zimbabwe-gh.vercel.app") 
              .AllowAnyMethod()
              .AllowAnyHeader();
    });
});

builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();


var app = builder.Build();


if (app.Environment.IsDevelopment())
{
    app.UseSwagger();
    app.UseSwaggerUI();
}


app.UseCors("AllowVercel");        
app.UseHttpsRedirection();
app.UseAuthorization();            
app.MapControllers();

app.Run();`

Does it work with: .AllowAnyOrigin() instead of the farm-link- app.UseCors(x => x.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader()); — Thomas Koelle
– Thomas Koelle, Commented Aug 18 at 12:14
The error indicates there is a CORS error because server thinks your request is from a hacker. Most likely you do not have access to the path 'api/test/users' or the app farm-link-zimbabwe-gh.vercel.app is doing something suspicious. If you are connecting to a IIS Server the server is very well protected and do not allow apps to access System Resources like the file system. — jdweng
– jdweng, Commented Aug 18 at 12:19
If that call is not being shown even in the console, i think some headers speicfied on response with HTML might restrict that. Or make sure HTML does not have <meta http-equiv="content-security-policy" or something among those lines — Michał Turczyn
– Michał Turczyn, Commented Aug 18 at 13:01
Your question in the title is not a question, and the question mark cannot be used in this statement. What do you mean by “cannot see”? You can see the error... — Sergey A Kryukov
– Sergey A Kryukov, Commented Aug 18 at 14:35

Prango · Accepted Answer · 2025-08-20 09:06:46Z

According to the error message, your frontend is running on Vercel at https://farm-link-zimbabwe-gh.vercel.app, while your backend is running locally at https://localhost:7077.

This setup won't work because your frontend cannot access a backend running on your local machine, it's not publicly accessible. To resolve this, you have two options:

Host your backend on a public server so it's accessible to your Vercel frontend.
Run both your frontend and backend locally during development.

If you choose to run both locally, make sure to add your local frontend address to your backend's CORS policy:

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

...
app.UseCors("AllowLocalhost");

Collectives™ on Stack Overflow

Cannot see my API call on frontend console?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related