Supporting an API that also contains a web portal

1

Hello,

So we have an interesting situation. We have an api we have developed that also has its own Web UI. How can we support both api requests through Tyk as well as web ui requests through Tyk? Can tyk only handle api requests and not standard web browser requests?

Thanks for the help!

1 Like
2

Hi, you should be able to send requests from your web browser as well, I think it’s a pretty common use case.

Is it a JSON API?

3

Yes the API is JSON based. However, when I navigate in a browser I lose all sense of formatting (no javascript, no css, etc)

4

Ah, so you’re also serving HTML, right?

5

Yes that is correct.

6

Have you checked your browser inspector? What kind of HTTP errors are you getting, when loading the assets?

Are you using a protected API (auth)?

7

Right now a simple http request is returning a 404. But if I navigate to the real web address hosted in Azure, it loads the web page and assets just fine. Somehow the 404 occurs between Tyk and Azure.

EDIT: If I add a trailing ‘/’ I do get the web page, however it is still missing its assets.

8

Do you have a way of checking your endpoint HTTP log? It could be interesting to know if your endpoint is receiving the request from Tyk, and also if the forwarded request path is ok.

9

Yea there doesn’t seem to be any error logs from what I can see. Although it appears as though it is trying to load assets it can’t find, presumably because the web service wasn’t designed to include the API slug for asset locations.

10

I see, do you have a way of modifying the slug on your endpoint side?

11

Yes I have tried adding the /slug but I still have the same set of 404s. This is a very weird issue that I’m not sure how to get around. It is very odd that it works at the underlying server but not through tyk.

1 Like
12

Have you tried modifying the URLs in your HTML?

Perhaps URL rewriting or middleware scripting can help.

13

Wow I just finally got it. Not an elegant solution but because the “hostname” of the Tyk API was overwritting the request as it went to the Azure Web Service, it kept trying to load assets under that tyk api hostname instead of its azure hostname. To fix it, I hardcoded the azure hostnames in my web app instead of leaving them as relative. I will investigate as to how to make url-rewrites do this for us in the future. Thank you for your help!

14

Nice!

Are you already using Tyk 2.2?

You’re welcome :slight_smile:

15

Yes we are, upgraded last week.

16

Very cool, good luck!

1 Like