Search code examples
reactjs.netcookiesport

How to pass cookie when the frontend in React and backend in .NET are on different ports?

Some time ago I decided to make a .NET 6 web application using the "ASP.NET Core with React.js". I have a company-enforced SSO which on authenticating is saving all the claims in the cookie. The problem is if I have the .NET application on port 44497, and the React app on 44496 then the React app is unable to access the cookie. When I deploy into Azure everything acts as if it works on one port, which means that this problem will not be appearing.

But how do I handle that when developing the application on localhost?

Solution

  • After some close cooperation with a fellow front end developer we discovered that the best problem to solve this issue will be to:

    1. Delete the default proxy from the template, meaning delete setupProxy.js (we also deleted aspnetcore-https.js and aspnetcore-react.js, but I think it was not related to the proxy, they were just redundant for our case).
    2. In packages.json we added a new property:

    "proxy": "https://localhost:44497/"

    And this apparently solved our cookie problem.