0

Currently I'm trying to separate the front-end (ClientApp client-side application) and the back-end (ASP .NET Core 3.1). I'm using the ASP .NET Core with React.js project template in VS. What I want to achieve is: Two apart projects within a solution. The front-end and the back-end have different port number and it's possible to get data from database via controller in the back-end then a React component can receive data to render in browser.

Basically I followed the solution from this blog. But still got error. I'm using the following code in Account component to call the Index method in Accounts controller.

const response = await fetch(`${process.env.REACT_APP_API_URL}/Accounts`, { mode: 'no-cors' });

Here the AccountsController 

    [EnableCors("AllowOrigin")]
    public class AccountsController : Controller
    {
        private readonly DEMOWTSSPortalContext _context;

        public AccountsController(DEMOWTSSPortalContext context)
        {
            _context = context;
        }

        // GET: Accounts
        public IEnumerable<Accounts> Index()
        {
            return _context.Accounts.ToList();
        }
    }

I also added the code to solve the CORS error. In ConfigureServices I added services.AddCors(allowsites => {allowsites.AddPolicy("AllowOrigin", options => options.AllowAnyOrigin());. And in Configure I added app.UseCors(options => options.AllowAnyOrigin());.

But When I starting the ClientApp from npm and starting back-end from IIS in VS. The data is not shown. It says Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0

Dose anyone have some idea how to fix it?

congying pan
  • 999
  • 1
  • 7
  • 10
  • 1
    What have you tried? You should be able to run the back end on one port and call the controllers / web api from your front end. I don't see a specific question here – Nick.Mc Aug 27 '21 at 08:17
  • @Nick.McDermaid I succeeded to run 'ClientApp' in npm in a different port. But the data can not be passed from back-end to front-end. – congying pan Aug 27 '21 at 08:24
  • But you *do* have two different project in the same solution. The React app is completely independent from the back-end ASP.NET Core service, using completely different build tools. You do have separate front-end and back-end clients. What that project type does is add some tooling to build, package, debug and deploy both of them together – Panagiotis Kanavos Aug 27 '21 at 08:24
  • If you don't want that, just create a new React project anywhere you want, and a Web API somewhere else, and have React talk to the Web API project. You'll have to build and deploy each one independently. – Panagiotis Kanavos Aug 27 '21 at 08:26
  • What does “ the data cannot be passed” mean? What happens when you call a back end API from react? – Nick.Mc Aug 27 '21 at 08:48
  • @Nick.McDermaid When I call a back-end API from React, it shows either "Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0" or CORS error. Anyway, React component can not receive data from back-end api calls – congying pan Aug 27 '21 at 09:24
  • "SyntaxError: Unexpected token < in JSON at position 0" is useful. "React component can not receive data from back-end api" is not useful. So next, what happens when you call the API directly by typing the path into a browser? – Nick.Mc Aug 28 '21 at 09:15
  • This might help: https://stackoverflow.com/questions/37280274/syntaxerror-unexpected-token-in-json-at-position-0 but basically, if the first character of your json is a `<` then it's not JSON, it's XML or HTML. SO you need to check what your API is returning, either by calling it directly or by inspecting it in the console (F12) – Nick.Mc Aug 28 '21 at 09:17
  • @Nick.McDermaid I found a better solution from here https://learn.microsoft.com/en-us/visualstudio/javascript/tutorial-asp-net-core-with-react?view=vs-2022 – congying pan Aug 30 '21 at 08:09

0 Answers0