ASP.NET Core Api-Gateway middleware
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.
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
add a comment |
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.
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
Can you share the code ofindex.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
add a comment |
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.
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
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.
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
c# asp.net asp.net-core api-gateway ocelot
edited Nov 26 '18 at 9:11
mMilk
asked Nov 26 '18 at 8:25
mMilkmMilk
655
655
Can you share the code ofindex.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
add a comment |
Can you share the code ofindex.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
add a comment |
2 Answers
2
active
oldest
votes
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:
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?
- 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 tohttp://mygateway:4242/s3/
- Ocelot allows Middleware Injection. So, you can inject your custom middleware where you will check which request and where to redirect it.
- Use CDN to store all css and other content.
- Inline css into html files.
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
add a comment |
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.
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
add a comment |
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
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
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:
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?
- 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 tohttp://mygateway:4242/s3/
- Ocelot allows Middleware Injection. So, you can inject your custom middleware where you will check which request and where to redirect it.
- Use CDN to store all css and other content.
- Inline css into html files.
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
add a comment |
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:
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?
- 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 tohttp://mygateway:4242/s3/
- Ocelot allows Middleware Injection. So, you can inject your custom middleware where you will check which request and where to redirect it.
- Use CDN to store all css and other content.
- Inline css into html files.
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
add a comment |
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:
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?
- 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 tohttp://mygateway:4242/s3/
- Ocelot allows Middleware Injection. So, you can inject your custom middleware where you will check which request and where to redirect it.
- Use CDN to store all css and other content.
- Inline css into html files.
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:
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?
- 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 tohttp://mygateway:4242/s3/
- Ocelot allows Middleware Injection. So, you can inject your custom middleware where you will check which request and where to redirect it.
- Use CDN to store all css and other content.
- Inline css into html files.
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
add a comment |
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
add a comment |
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.
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
add a comment |
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.
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
add a comment |
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.
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.
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
add a comment |
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
add a comment |
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.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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
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