Calling an API fails when deployed with Netlify, works fine when served locally and image not loaded

Support
, ,
1

I published my site on Netlify except that to access the API data I receive:

Failed to load resource: the server responded with a status of 404 ()and to display certain images:Failed to load resource: the server responded with a status of 404 ().``` and index-DNQVcT_m.js:48 Error fetching clean data: AxiosError.

async fetchActivities() {
try {
const axiosResponse = await axios.get(‘/api/v1/Activities/all’);
const data = axiosResponse.data;

const userId = this.getUser.userId;
const userResponse = await fetch(`/api/v1/Users/GetUser/${userId}`);
if (!userResponse.ok) {
  throw new Error(`Failed to fetch user data, status: ${userResponse.status}`);
}
const userData = await userResponse.json();
const blockedUserIds = userData?.Blocked_Users?.map(user => user.id) || [];
    });
  });

viteconfig :

export default defineConfig({
server: {
proxy: {
‘/api’: {
target: ‘https://orbis-api-web.azurewebsites.net’,
changeOrigin: true,
},

I tried replacing the urls with http://api.netlify.com/api/v1/url
and also https://api.netlify.com/api/v1/url

and also for loaded image I receive Failed to load resource: the server responded with a status of 404 ()

The website : Orbis - Activities

2

Hi, @Essama-Official. You cannot run server side code at Netlify outside of functions or edge functions. This site has no functions or edge functions deployed.

How are you deploying that code? Are you bundling it into a serverless function? If so, how? If not, that is a requirement so that is why it isn’t working.

3

Hello, the server is deployed on Azure, the site that I publish on Netlify just calls the server, but it does not work

4

You cannot use relative URLs in server-side Functions. Did you try using the complete URL?

5

well in quick config I initialized the start of the url: target: ‘https://orbis-api-web.azurewebsites.net’, and then I do the rest with '/api/v1/Activities/all and locally it works

6

Did you try what I suggested above?

7

Yes I already tried to put the full url but it doesn’t work

8

Where can we reproduce this error?

9

I put the repo public for now : GitHub - Essama-Official/Orbis.Web

10

It seems to be private. Did you change it back?

11

I put it out in public

12

The settings you’ve used apply to Vite dev server. I thought you had your API server on Netlify throwing this issue. This issue doesn’t have anything to do with Netlify. When you build your app, Vite server doesn’t run, thus your Vite config would not work there.

13

So what should I change?

14

You should make a request directly to your endpoint without relying on Vite’s config. Or configure proxy in Netlify: Redirects and rewrites | Netlify Docs

15

Can you look at the error I get? : https://fictum-theories.netlify.app/theories

16

Hi, @Essama-Official. That URL is a 404 because no such page exists in the deploy and there is no redirect configured for that path.

What did you try to do here? Did you try to create a redirect? If so, what steps did you take? If you didn’t try to create a redirect, what were you trying?

17

Hi, I’m going to start again, I removed the url from vite.congig and now I receive: Access to XMLHttpRequest at has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource .

I tried npm install cors and app.use with cors but it doesn’t change anything

https://orbis-activities.netlify.app/activities

18

This URL returns a 404 Not Found likely because you have not configured the required redirect for direct links to SPAs to work.

The important bit of this is on the requested resource. Is this requested resource part of your project on Netlify or hosted elsewhere?

19

You can look ? I tried what you told me but it doesn’t change anything GitHub - Essama-Official/Orbis.Web

20

No redirects are processed for your project because:

  1. You have incorrectly named the file _redirects.txt instead of _redirects.
  2. The file is not in the public directory as is required for static assets you need/want included in a Vite build. Read more: Static Asset Handling | Vite

The activities page is calling an API hosted on Azure. It is on this API endpoint the required CORS headers (including Access-Control-Allow-Origin) need setting to permit the front-end on Netlify to make the request successfully. Read more about CORS: Cross-Origin Resource Sharing (CORS) - HTTP | MDN

There is no need to include the node_modules directory in the git repository. These modules are downloaded and installed by Netlify during the build process (ditto for other platforms.)