ASP.NET Core Api-Gateway middleware












6















I am new to API gateways and have a question of understanding.
I try too put a series of (micro)services behind an endpoint.



For this purpose, I have set up an ASP.NET Core Application and added the package ThreeMammals Ocelot.
With the help of documentation I have configured the Up- and Downstreams.
So far, so good.



sketch



The client makes a request to http://mygateway:4242/s1/{api} and, for example, get a JSON or XML response from Service1, as expected.



Same behavior for http://mygateway:4242/s2/{api} with also the expected result!



My understanding problem is with Service3.
When I send a request to http://mygateway/s3/, I get the index.html as response.



The index.html itself requires the CSS-File 'xyz.css' via link-tag and forces the client to load the file.



<head>
<link rel="stylesheet" type="text/css" href="xyz.css">
</head>


The request URL the client send to "mygateway" in this case is http://mygateway:4242/xyz.css and not
http://mygateway:4242/s3/xyz.css and so the respone is a 404 not found, since the "mygateway" knows nothing about a "xyz.css"



How can I fix this routing(?) issue?



Is it possible to solve this problem with ocelot middleware? Or do I need something else for the service (Service3) with the SinglePageApplication (SPA)?



Maybe is it simply not possible or wrong to place the SPA behind the gateway?
I hope you can give me some tips to get access to a SPA or MVC website behind a gateway.



Thanks iBot





UPATE:
Enclosed the code of index.html. I think that's straight forward.



<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Title</title>
<base href="/" />

<link rel="stylesheet" type="text/css" href="dist/xyz.css">

</head>
<body>
<div id="appContainer"></div>
<script src="dist/xyz.js" asp-append-version="true"></script>
</body>
</html>









share|improve this question

























  • Can you share the code of index.html?

    – Chetan Ranpariya
    Nov 26 '18 at 8:36











  • Hey, Chetan Ranpariya i updated the question with the snippet of the index.html. Thanks iBot

    – mMilk
    Nov 26 '18 at 9:11


















6















I am new to API gateways and have a question of understanding.
I try too put a series of (micro)services behind an endpoint.



For this purpose, I have set up an ASP.NET Core Application and added the package ThreeMammals Ocelot.
With the help of documentation I have configured the Up- and Downstreams.
So far, so good.



sketch



The client makes a request to http://mygateway:4242/s1/{api} and, for example, get a JSON or XML response from Service1, as expected.



Same behavior for http://mygateway:4242/s2/{api} with also the expected result!



My understanding problem is with Service3.
When I send a request to http://mygateway/s3/, I get the index.html as response.



The index.html itself requires the CSS-File 'xyz.css' via link-tag and forces the client to load the file.



<head>
<link rel="stylesheet" type="text/css" href="xyz.css">
</head>


The request URL the client send to "mygateway" in this case is http://mygateway:4242/xyz.css and not
http://mygateway:4242/s3/xyz.css and so the respone is a 404 not found, since the "mygateway" knows nothing about a "xyz.css"



How can I fix this routing(?) issue?



Is it possible to solve this problem with ocelot middleware? Or do I need something else for the service (Service3) with the SinglePageApplication (SPA)?



Maybe is it simply not possible or wrong to place the SPA behind the gateway?
I hope you can give me some tips to get access to a SPA or MVC website behind a gateway.



Thanks iBot





UPATE:
Enclosed the code of index.html. I think that's straight forward.



<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Title</title>
<base href="/" />

<link rel="stylesheet" type="text/css" href="dist/xyz.css">

</head>
<body>
<div id="appContainer"></div>
<script src="dist/xyz.js" asp-append-version="true"></script>
</body>
</html>









share|improve this question

























  • Can you share the code of index.html?

    – Chetan Ranpariya
    Nov 26 '18 at 8:36











  • Hey, Chetan Ranpariya i updated the question with the snippet of the index.html. Thanks iBot

    – mMilk
    Nov 26 '18 at 9:11
















6












6








6








I am new to API gateways and have a question of understanding.
I try too put a series of (micro)services behind an endpoint.



For this purpose, I have set up an ASP.NET Core Application and added the package ThreeMammals Ocelot.
With the help of documentation I have configured the Up- and Downstreams.
So far, so good.



sketch



The client makes a request to http://mygateway:4242/s1/{api} and, for example, get a JSON or XML response from Service1, as expected.



Same behavior for http://mygateway:4242/s2/{api} with also the expected result!



My understanding problem is with Service3.
When I send a request to http://mygateway/s3/, I get the index.html as response.



The index.html itself requires the CSS-File 'xyz.css' via link-tag and forces the client to load the file.



<head>
<link rel="stylesheet" type="text/css" href="xyz.css">
</head>


The request URL the client send to "mygateway" in this case is http://mygateway:4242/xyz.css and not
http://mygateway:4242/s3/xyz.css and so the respone is a 404 not found, since the "mygateway" knows nothing about a "xyz.css"



How can I fix this routing(?) issue?



Is it possible to solve this problem with ocelot middleware? Or do I need something else for the service (Service3) with the SinglePageApplication (SPA)?



Maybe is it simply not possible or wrong to place the SPA behind the gateway?
I hope you can give me some tips to get access to a SPA or MVC website behind a gateway.



Thanks iBot





UPATE:
Enclosed the code of index.html. I think that's straight forward.



<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Title</title>
<base href="/" />

<link rel="stylesheet" type="text/css" href="dist/xyz.css">

</head>
<body>
<div id="appContainer"></div>
<script src="dist/xyz.js" asp-append-version="true"></script>
</body>
</html>









share|improve this question
















I am new to API gateways and have a question of understanding.
I try too put a series of (micro)services behind an endpoint.



For this purpose, I have set up an ASP.NET Core Application and added the package ThreeMammals Ocelot.
With the help of documentation I have configured the Up- and Downstreams.
So far, so good.



sketch



The client makes a request to http://mygateway:4242/s1/{api} and, for example, get a JSON or XML response from Service1, as expected.



Same behavior for http://mygateway:4242/s2/{api} with also the expected result!



My understanding problem is with Service3.
When I send a request to http://mygateway/s3/, I get the index.html as response.



The index.html itself requires the CSS-File 'xyz.css' via link-tag and forces the client to load the file.



<head>
<link rel="stylesheet" type="text/css" href="xyz.css">
</head>


The request URL the client send to "mygateway" in this case is http://mygateway:4242/xyz.css and not
http://mygateway:4242/s3/xyz.css and so the respone is a 404 not found, since the "mygateway" knows nothing about a "xyz.css"



How can I fix this routing(?) issue?



Is it possible to solve this problem with ocelot middleware? Or do I need something else for the service (Service3) with the SinglePageApplication (SPA)?



Maybe is it simply not possible or wrong to place the SPA behind the gateway?
I hope you can give me some tips to get access to a SPA or MVC website behind a gateway.



Thanks iBot





UPATE:
Enclosed the code of index.html. I think that's straight forward.



<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Title</title>
<base href="/" />

<link rel="stylesheet" type="text/css" href="dist/xyz.css">

</head>
<body>
<div id="appContainer"></div>
<script src="dist/xyz.js" asp-append-version="true"></script>
</body>
</html>






c# asp.net asp.net-core api-gateway ocelot






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 26 '18 at 9:11







mMilk

















asked Nov 26 '18 at 8:25









mMilkmMilk

655




655













  • Can you share the code of index.html?

    – Chetan Ranpariya
    Nov 26 '18 at 8:36











  • Hey, Chetan Ranpariya i updated the question with the snippet of the index.html. Thanks iBot

    – mMilk
    Nov 26 '18 at 9:11





















  • Can you share the code of index.html?

    – Chetan Ranpariya
    Nov 26 '18 at 8:36











  • Hey, Chetan Ranpariya i updated the question with the snippet of the index.html. Thanks iBot

    – mMilk
    Nov 26 '18 at 9:11



















Can you share the code of index.html?

– Chetan Ranpariya
Nov 26 '18 at 8:36





Can you share the code of index.html?

– Chetan Ranpariya
Nov 26 '18 at 8:36













Hey, Chetan Ranpariya i updated the question with the snippet of the index.html. Thanks iBot

– mMilk
Nov 26 '18 at 9:11







Hey, Chetan Ranpariya i updated the question with the snippet of the index.html. Thanks iBot

– mMilk
Nov 26 '18 at 9:11














2 Answers
2






active

oldest

votes


















2














Your architecture design is wrong!



First, let's find out what this the API Gateway.



An API Gateway is programming that sits in front of an application programming interface (API) and acts as a single point of entry for a defined group of microservices.



A major benefit of using API gateways is that they allow developers to encapsulate the internal structure of an application in multiple ways, depending upon use case. This is because, in addition to accommodating direct requests, gateways can be used to invoke multiple back-end services and aggregate the results.



Ok, the name "API Gateway" shows us that it is mostly intended for API services! SPA or MVC applications are not back-end services. You should not put your front-end applications behind the api gateway.



In general, your architecture should look like this:
enter image description here



An API gateway is the single entry point for all clients. SPA is client of your services and should call it through API Gateway. If your application has multiple client apps, that can be a primary pivot when identifying the multiple API Gateways types, so that you can have a different facade for the needs of each client app. This case is a pattern named “Backend for Frontend” (BFF) where each API Gateway can provide a different API tailored for each client app type.



What if you don't want to build a proper architecture?




  1. You can configure redirect. It is something like to specify a default service of API gateway. Then all clients that go to http://mygateway:4242/ will redirected to http://mygateway:4242/s3/

  2. Ocelot allows Middleware Injection. So, you can inject your custom middleware where you will check which request and where to redirect it.

  3. Use CDN to store all css and other content.

  4. Inline css into html files.






share|improve this answer
























  • Thanks Roman Marusyk, i will reconsider my architecture design idea :) And also will have a look at your suggested options. regards iBot

    – mMilk
    Nov 28 '18 at 9:37





















0














You can try to write<base href="/s3/" /> instead of <base href="/" />.



But it is better to use the SPA or MVC before gateway. In most cases, it depends on how you will use it. For instance, If you like to use it like Proxy of your domain (e.g Nginx) it makes sense.



See this good article about it.






share|improve this answer


























  • Hello Ярослав Виталиевичm, thanks for the hint with the basepath. That works for services that I control and i can change. But 3rd party services i can't change won't work with this approach. For example, we have bought a component for reporting that expose a Website running on a Tomcatserver. When i put these behinde the api-gateway i ran into my problem :/

    – mMilk
    Nov 26 '18 at 14:19












Your Answer






StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});














draft saved

draft discarded


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53477140%2fasp-net-core-api-gateway-middleware%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown

























2 Answers
2






active

oldest

votes








2 Answers
2






active

oldest

votes









active

oldest

votes






active

oldest

votes









2














Your architecture design is wrong!



First, let's find out what this the API Gateway.



An API Gateway is programming that sits in front of an application programming interface (API) and acts as a single point of entry for a defined group of microservices.



A major benefit of using API gateways is that they allow developers to encapsulate the internal structure of an application in multiple ways, depending upon use case. This is because, in addition to accommodating direct requests, gateways can be used to invoke multiple back-end services and aggregate the results.



Ok, the name "API Gateway" shows us that it is mostly intended for API services! SPA or MVC applications are not back-end services. You should not put your front-end applications behind the api gateway.



In general, your architecture should look like this:
enter image description here



An API gateway is the single entry point for all clients. SPA is client of your services and should call it through API Gateway. If your application has multiple client apps, that can be a primary pivot when identifying the multiple API Gateways types, so that you can have a different facade for the needs of each client app. This case is a pattern named “Backend for Frontend” (BFF) where each API Gateway can provide a different API tailored for each client app type.



What if you don't want to build a proper architecture?




  1. You can configure redirect. It is something like to specify a default service of API gateway. Then all clients that go to http://mygateway:4242/ will redirected to http://mygateway:4242/s3/

  2. Ocelot allows Middleware Injection. So, you can inject your custom middleware where you will check which request and where to redirect it.

  3. Use CDN to store all css and other content.

  4. Inline css into html files.






share|improve this answer
























  • Thanks Roman Marusyk, i will reconsider my architecture design idea :) And also will have a look at your suggested options. regards iBot

    – mMilk
    Nov 28 '18 at 9:37


















2














Your architecture design is wrong!



First, let's find out what this the API Gateway.



An API Gateway is programming that sits in front of an application programming interface (API) and acts as a single point of entry for a defined group of microservices.



A major benefit of using API gateways is that they allow developers to encapsulate the internal structure of an application in multiple ways, depending upon use case. This is because, in addition to accommodating direct requests, gateways can be used to invoke multiple back-end services and aggregate the results.



Ok, the name "API Gateway" shows us that it is mostly intended for API services! SPA or MVC applications are not back-end services. You should not put your front-end applications behind the api gateway.



In general, your architecture should look like this:
enter image description here



An API gateway is the single entry point for all clients. SPA is client of your services and should call it through API Gateway. If your application has multiple client apps, that can be a primary pivot when identifying the multiple API Gateways types, so that you can have a different facade for the needs of each client app. This case is a pattern named “Backend for Frontend” (BFF) where each API Gateway can provide a different API tailored for each client app type.



What if you don't want to build a proper architecture?




  1. You can configure redirect. It is something like to specify a default service of API gateway. Then all clients that go to http://mygateway:4242/ will redirected to http://mygateway:4242/s3/

  2. Ocelot allows Middleware Injection. So, you can inject your custom middleware where you will check which request and where to redirect it.

  3. Use CDN to store all css and other content.

  4. Inline css into html files.






share|improve this answer
























  • Thanks Roman Marusyk, i will reconsider my architecture design idea :) And also will have a look at your suggested options. regards iBot

    – mMilk
    Nov 28 '18 at 9:37
















2












2








2







Your architecture design is wrong!



First, let's find out what this the API Gateway.



An API Gateway is programming that sits in front of an application programming interface (API) and acts as a single point of entry for a defined group of microservices.



A major benefit of using API gateways is that they allow developers to encapsulate the internal structure of an application in multiple ways, depending upon use case. This is because, in addition to accommodating direct requests, gateways can be used to invoke multiple back-end services and aggregate the results.



Ok, the name "API Gateway" shows us that it is mostly intended for API services! SPA or MVC applications are not back-end services. You should not put your front-end applications behind the api gateway.



In general, your architecture should look like this:
enter image description here



An API gateway is the single entry point for all clients. SPA is client of your services and should call it through API Gateway. If your application has multiple client apps, that can be a primary pivot when identifying the multiple API Gateways types, so that you can have a different facade for the needs of each client app. This case is a pattern named “Backend for Frontend” (BFF) where each API Gateway can provide a different API tailored for each client app type.



What if you don't want to build a proper architecture?




  1. You can configure redirect. It is something like to specify a default service of API gateway. Then all clients that go to http://mygateway:4242/ will redirected to http://mygateway:4242/s3/

  2. Ocelot allows Middleware Injection. So, you can inject your custom middleware where you will check which request and where to redirect it.

  3. Use CDN to store all css and other content.

  4. Inline css into html files.






share|improve this answer













Your architecture design is wrong!



First, let's find out what this the API Gateway.



An API Gateway is programming that sits in front of an application programming interface (API) and acts as a single point of entry for a defined group of microservices.



A major benefit of using API gateways is that they allow developers to encapsulate the internal structure of an application in multiple ways, depending upon use case. This is because, in addition to accommodating direct requests, gateways can be used to invoke multiple back-end services and aggregate the results.



Ok, the name "API Gateway" shows us that it is mostly intended for API services! SPA or MVC applications are not back-end services. You should not put your front-end applications behind the api gateway.



In general, your architecture should look like this:
enter image description here



An API gateway is the single entry point for all clients. SPA is client of your services and should call it through API Gateway. If your application has multiple client apps, that can be a primary pivot when identifying the multiple API Gateways types, so that you can have a different facade for the needs of each client app. This case is a pattern named “Backend for Frontend” (BFF) where each API Gateway can provide a different API tailored for each client app type.



What if you don't want to build a proper architecture?




  1. You can configure redirect. It is something like to specify a default service of API gateway. Then all clients that go to http://mygateway:4242/ will redirected to http://mygateway:4242/s3/

  2. Ocelot allows Middleware Injection. So, you can inject your custom middleware where you will check which request and where to redirect it.

  3. Use CDN to store all css and other content.

  4. Inline css into html files.







share|improve this answer












share|improve this answer



share|improve this answer










answered Nov 27 '18 at 20:13









Roman MarusykRoman Marusyk

12.4k123869




12.4k123869













  • Thanks Roman Marusyk, i will reconsider my architecture design idea :) And also will have a look at your suggested options. regards iBot

    – mMilk
    Nov 28 '18 at 9:37





















  • Thanks Roman Marusyk, i will reconsider my architecture design idea :) And also will have a look at your suggested options. regards iBot

    – mMilk
    Nov 28 '18 at 9:37



















Thanks Roman Marusyk, i will reconsider my architecture design idea :) And also will have a look at your suggested options. regards iBot

– mMilk
Nov 28 '18 at 9:37







Thanks Roman Marusyk, i will reconsider my architecture design idea :) And also will have a look at your suggested options. regards iBot

– mMilk
Nov 28 '18 at 9:37















0














You can try to write<base href="/s3/" /> instead of <base href="/" />.



But it is better to use the SPA or MVC before gateway. In most cases, it depends on how you will use it. For instance, If you like to use it like Proxy of your domain (e.g Nginx) it makes sense.



See this good article about it.






share|improve this answer


























  • Hello Ярослав Виталиевичm, thanks for the hint with the basepath. That works for services that I control and i can change. But 3rd party services i can't change won't work with this approach. For example, we have bought a component for reporting that expose a Website running on a Tomcatserver. When i put these behinde the api-gateway i ran into my problem :/

    – mMilk
    Nov 26 '18 at 14:19
















0














You can try to write<base href="/s3/" /> instead of <base href="/" />.



But it is better to use the SPA or MVC before gateway. In most cases, it depends on how you will use it. For instance, If you like to use it like Proxy of your domain (e.g Nginx) it makes sense.



See this good article about it.






share|improve this answer


























  • Hello Ярослав Виталиевичm, thanks for the hint with the basepath. That works for services that I control and i can change. But 3rd party services i can't change won't work with this approach. For example, we have bought a component for reporting that expose a Website running on a Tomcatserver. When i put these behinde the api-gateway i ran into my problem :/

    – mMilk
    Nov 26 '18 at 14:19














0












0








0







You can try to write<base href="/s3/" /> instead of <base href="/" />.



But it is better to use the SPA or MVC before gateway. In most cases, it depends on how you will use it. For instance, If you like to use it like Proxy of your domain (e.g Nginx) it makes sense.



See this good article about it.






share|improve this answer















You can try to write<base href="/s3/" /> instead of <base href="/" />.



But it is better to use the SPA or MVC before gateway. In most cases, it depends on how you will use it. For instance, If you like to use it like Proxy of your domain (e.g Nginx) it makes sense.



See this good article about it.







share|improve this answer














share|improve this answer



share|improve this answer








edited Nov 26 '18 at 9:44









Uwe Keim

27.7k32134216




27.7k32134216










answered Nov 26 '18 at 9:32









Ярослав ВиталиевичЯрослав Виталиевич

12




12













  • Hello Ярослав Виталиевичm, thanks for the hint with the basepath. That works for services that I control and i can change. But 3rd party services i can't change won't work with this approach. For example, we have bought a component for reporting that expose a Website running on a Tomcatserver. When i put these behinde the api-gateway i ran into my problem :/

    – mMilk
    Nov 26 '18 at 14:19



















  • Hello Ярослав Виталиевичm, thanks for the hint with the basepath. That works for services that I control and i can change. But 3rd party services i can't change won't work with this approach. For example, we have bought a component for reporting that expose a Website running on a Tomcatserver. When i put these behinde the api-gateway i ran into my problem :/

    – mMilk
    Nov 26 '18 at 14:19

















Hello Ярослав Виталиевичm, thanks for the hint with the basepath. That works for services that I control and i can change. But 3rd party services i can't change won't work with this approach. For example, we have bought a component for reporting that expose a Website running on a Tomcatserver. When i put these behinde the api-gateway i ran into my problem :/

– mMilk
Nov 26 '18 at 14:19





Hello Ярослав Виталиевичm, thanks for the hint with the basepath. That works for services that I control and i can change. But 3rd party services i can't change won't work with this approach. For example, we have bought a component for reporting that expose a Website running on a Tomcatserver. When i put these behinde the api-gateway i ran into my problem :/

– mMilk
Nov 26 '18 at 14:19


















draft saved

draft discarded




















































Thanks for contributing an answer to Stack Overflow!


  • Please be sure to answer the question. Provide details and share your research!

But avoid



  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.


To learn more, see our tips on writing great answers.




draft saved


draft discarded














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53477140%2fasp-net-core-api-gateway-middleware%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







Popular posts from this blog

Wiesbaden

Marschland

Dieringhausen