Error: Uncaught (in promise) SyntaxError: Unexpected token ‘T’, “The resour”… is not valid JSON

---

You might get the “Unexpected token ‘T’” error or “404 (Not Found)” error when calling an endpoint from a client App like React. This might be because the request is blocked by the browser due to a CORS error or “same-origin” policy.

Example error from a react application calling a .Net Core API endpoint:

The request might be working locally on your development machine (to make life easy) but when published on a production environment, the react or angular app stops working.

It stops working because proxy configurations like in a react app are ignored when published as a build package for production deployment. For example, the below settings in setupProxy.js are ignored when publishing a production build package:

module.exports = function (app) {
    const appProxy = createProxyMiddleware(context, {
        target: 'http://localhost:5038',
        secure: true,
         "changeOrigin": true
    });

    app.use(appProxy);
};

---

Solution 1: Add CORS Exception in Your Backend

If you own the source code of your backend application, you can add a CORS exception for all the client domains that will consume the API like the below screenshot using .Net 6:

This way when the two applications are hosted, your client application will be able to call the web API server with no CORS exception from the browser.

Solution 2: Create a Reverse Proxy Server

If you don’t own the endpoint’s source code, you can create a reverse proxy and add a CORS policy in your proxy application code, similar to what we did in solution 1. Eventually, you can use the proxy server as your entry point for your client applications.

Using a Simple Web API or a Function App as a Reverse Proxy

We can intercept all incoming requests using a request middleware, forwarding the incoming request and its metadata, and returning a response to the user, similar to what we discussed in this blog.

You still need to add the client endpoint URL as an exception in your CORS policy section of your API configuration just like we did in Solution 1.

Using Azure API Management

Azure API management is a great tool for these kinds of use cases. After you created your APIM instance on Azure and imported your APIs, you can create a CORS policy in the inbound section of all your APIs to accept requests coming from your client app domain.

The CORS policy can be added using the Azure Portal UI, It will be translated into XML format like this:

<policies>
    <inbound>
        <cors allow-credentials="true">
            <allowed-origins>
                <origin>https://myclientappdomain.com</origin>
            </allowed-origins>
            <allowed-methods preflight-result-max-age="300">
                <method>*</method>
            </allowed-methods>
            <allowed-headers>
                <header>*</header>
            </allowed-headers>
            <expose-headers>
                <header>*</header>
            </expose-headers>
        </cors>
    </inbound>
    <backend>
        <forward-request />
    </backend>
    <outbound />
    <on-error />
</policies>

---