CORS error on public API #15185
Replies: 6 comments
-
I did some experimentation. Interestingly, this works: import { defineConfig, loadEnv } from 'vite';
import react from '@vitejs/plugin-react-swc';
export default defineConfig({
server: {
cors: false,
proxy: {
'/random_joke': {
target: 'https://official-joke-api.appspot.com/',
changeOrigin: true,
secure: false,
},
},
},
plugins: [react()],
}); try {
const { data } = await axios.get<RandomJoke>('/random_joke');
return data;
} catch (err) {
console.error(err);
}
}; So I am guessing it is a problem with the nhle.com server. |
Beta Was this translation helpful? Give feedback.
-
Saw the following two articles but neither solved the issue: For anyone else who runs into this (and, like me, is confused by it), this appears to be a server issue. Googling:
yielded this link Reason: CORS header 'Access-Control-Allow-Origin' missing which mentions: "if the server is under your control, add the origin of the requesting site to the set of domains permitted access" and "You can also configure a site to allow any site to access it by using the * wildcard. You should only use this for public APIs. " |
Beta Was this translation helpful? Give feedback.
-
Here is a small C# app that demonstrates how you can create a REST API to act as a kind of go-between or proxy between your app calling code the server. Without the proxy, CORS intervenes by blocking the var AllowSpecificOrigins = "allowSpecificOrigins";
var builder = WebApplication.CreateBuilder(args);
// Add services to the container.
// Learn more about configuring Swagger/OpenAPI at https://aka.ms/aspnetcore/swashbuckle
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();
builder.Services.AddScoped(hc => new HttpClient { BaseAddress = new Uri("https://api-web.nhle.com/v1") });
builder.Services.AddCors(options =>
{
options.AddPolicy(AllowSpecificOrigins,
policy =>
{
policy.WithOrigins("http://localhost:7123",
"https://localhost:7123")
.SetIsOriginAllowed((host) => true);
});
});
var app = builder.Build();
app.UseCors(AllowSpecificOrigins);
// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
app.UseSwagger();
app.UseSwaggerUI();
}
app.MapGet("/todays-schedule", async () =>
{
var proxyClient = new HttpClient();
var stream = await proxyClient.GetStreamAsync("https://api-web.nhle.com/v1/schedule/now");
// Proxy the response as JSON
return Results.Stream(stream, "application/json");
}).RequireCors(AllowSpecificOrigins);
// another way
app.MapGet("/schedule-now", async (HttpClient http) =>
{
return Results.Stream(await http.GetStreamAsync("https://api-web.nhle.com/v1/schedule/now"), "application/json");
});
app.Run(); |
Beta Was this translation helpful? Give feedback.
-
The is CORS acting as required. So our options for using Vite are either:
|
Beta Was this translation helpful? Give feedback.
-
This should solve the problem for those having issues with the solution working locally but not on VERCEL / NETLIFY If your app is on VERCEL, edit your
If your app is on NETLIFY, edit your
|
Beta Was this translation helpful? Give feedback.
-
I am getting the CORS error while fetching a public API in react (vite). Does anyone get the solution? this is my vite.config.js file
|
Beta Was this translation helpful? Give feedback.
-
My app is running locally on a vite dev server. I want to proxy my API requests to a public API. I have tried a number of different approaches as described in the documentation to no avail.
my vite.config.ts looks like:
and my calling code:
When trying to GET from https://api-web.nhle.com/v1/schedule/now I get the following CORS error:
Access to XMLHttpRequest at 'https://api-web.nhle.com/v1/schedule/now' from origin 'http://localhost:5173' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
I have tried various combinations of proxy, target and calls but all generate similar errors. I'd appreciate any ideas on how to fix this.
Beta Was this translation helpful? Give feedback.
All reactions