Change base URL for fetching data in ASP.NET Core 3 with React

Question

I'm using ASP.NET Core 3.1 with the React template and so far everything works fine.

But to test my frontend changes locally without always pushing to the server (on which the data is stored), I'm trying to figure out if and how I can change the base-URL my fetch requests go to. For example my login fetch request looks like the following:

fetch('api/authentication/login', requestOptions).then(..)

Which then defaults to

localhost:5000/api/authentication/login

Is there a way I can replace the base-URL with my server-URL to work with the data on the server? I've already tried changing

ReactDOM.render(
    <BrowserRouter basename={baseUrl}>
        <App />
    </BrowserRouter>,
    rootElement
);

to

ReactDOM.render(
    <BrowserRouter basename={"http://my-server-url.com"}>
        <App />
    </BrowserRouter>,
    rootElement
);

Unfortunately that changed nothing but I can't find a different thing to try.

Is there a way to get this running?

Does this answer your question? [Fetch with absolute url prefix](https://stackoverflow.com/questions/42470822/fetch-with-absolute-url-prefix) — norbitrial, Mar 30 '20 at 18:56
You have to do something like `fetch(YOUR_HOST + 'api/authentication/login', ...)` — MjZac, Mar 30 '20 at 18:57
@norbitrial Thank you for that suggestion but unfortunately not. — Lukas Köhler, Mar 30 '20 at 18:59
@LukasKöhler Make sure that you enable `CORS` in the server for `localhost` — MjZac, Mar 30 '20 at 19:00

score 1 · Answer 1 · answered Mar 30 '20 at 19:14

You should use the proxy function of react's development server for this.

You can add the following proxy definition to your package.json file:

"proxy": "http://my-server-url.com",

And then (from with the ClientApp folder) start the React app using

> npm start

For more documentation of the proxy features, see Proxying API Requests in Development.

Change base URL for fetching data in ASP.NET Core 3 with React

1 Answers1