Express-Gateway, How to pick a service end point based on URL pattern? - express

I am trying to get a bunch of individual servers on the same domain behind the gateway. Currently, each of these servers can be reached from outside world via multiple names. Our sales team wanted to provide customers with a unique url, so if a server serves 10 customers, we have 10 CNAME records pointing to it.
As you can see, with 5 or 6 servers, the number of apiEndpoints is pretty large. On top of that, new CNAMEs can be created at any given time making hardcoded apiEndpoints a pain to manage.
Is it possible to have a dynamic serviceEndpoint url. What I'm thinking is something like this:
apiEndpoints:
legacy:
host: '*.mydomain.com'
paths: '/v1/*'
serviceEndpoints:
legacyEndPoint:
url: '${someVarWithValueofStar}.internal.com'
pipelines:
default:
apiEndpoints:
- legacy:
policies:
- proxy:
- action:
serviceEndpoint: legacyEndPoint
Basically, what I want to achieve is to redirect the all the x.mydomain.com to x.internal.com where x can be anything.
Can I use variables in the url strings? Is there a way to get the string that matched the wild card in the host? Are there other options to deal with this problem?

I ended up hacking a proxy plugin together for my needs. Very basic and requires more work and testing, but this what I started with:
The proxy plugin (my-proxy)
const httpProxy = require("http-proxy");
/**
* This is a very rudimentary proxy plugin for the express gateway framework.
* Basically it will redirect requests xxx.external.com to xxx.internal.com
* Where xxx can be any name and the destination comes from providing a
* service endpoint with a http://*.destination.com url
* #param {*} params
* #param {*} config
*/
module.exports = function (params, config) {
const serviceEndpointKey = params.serviceEndpoint;
const changeOrigin = params.changeOrigin;
const endpoint = config.gatewayConfig.serviceEndpoints[serviceEndpointKey];
const url = endpoint.url;
const reg = /(\/\/\*\.)(\S+)/;
const match = reg.exec(url);
const domain = match[2];
const proxy = httpProxy.createProxyServer({changeOrigin : changeOrigin});
proxy.on("error", (err, req, res) => {
console.error(err);
if (!res.headersSent) {
res.status(502).send('Bad gateway.');
} else {
res.end();
}
});
return (req, res, next) => {
const hostname = req.hostname;
const regex = /^(.*?)\./
const tokens = regex.exec(hostname)
const serverName = tokens[1];
const destination = req.protocol + "://" + serverName + "." + domain;
proxy.web(req, res, {target : destination});
};
};
gateway.config.xml
http:
port: 8080
apiEndpoints:
legacy:
host: '*.external.com'
paths: '/v1/*'
serviceEndpoints:
legacy_end_point:
url: 'https://*.internal.com'
policies:
- my-proxy
pipelines:
default:
apiEndpoints:
- legacy
policies:
- my-proxy:
- action:
serviceEndpoint: legacy_end_point
changeOrigin: true
It all boils down to regex parsing the wild cards in the apiEndpoints and serviceEndpoints host and urls, nothing fancy so far. I looked at the source code of the built in proxy plugin and I don't think my naive approach will fit in very well, but it works for what I need it.

thanks for the question, I think this is going to be asked a lot over the following months.
Express Gateway has support for environment variables; unfortunately right now the apiEndpoint can only be a single and well defined endpoint without any replacement capabilities.
This is something we'll probably change in the near term future — with a Proxy Table API that will let you insert some more difficult templates.
In case this is pressing for you, I'd invite you to open an issue so that everybody in the team is aware of such feature and we can prioritize it effectively.
In meantime, unfortunately, you'll have to deal with numerous numbers of ApiEndpoints
V.

Related

Keystonejs 6 CMS allowing any origin even after adding CORS custom config

I am working on my blog and chose Keystonejs 6(CMS) to host my content. The issue is, CMS allows any origin and serve requests. This document says you can whitelist origin but seems like it is not working or I am not able to understand between the lines. My custom config looks like this:
keystone.ts:
const whitelist = ['https://example1.com', 'https://example2.com'];
export default withAuth(
config({
db,
storage: { ... },
lists,
session,
server: {
cors: {
origin: whitelist,
credentials: true,
},
port: Number(PORT) || 3000,
},
}),
);
Any help would be appreciated! Thanks for reading!

How to get API call origin in NextJS API endpoint

I have an API set up that receives a token, and I want to store that token in a database. But I also want to store the origin URL.
Let's say my API endpoint is located at https://myapp.com/api/connect
Now, I want to send a token from my website https://mywebsite.net
After I send a token, I want to be able to store the token and the website URL to the database in NextJS code.
My endpoint would store this info to the database:
{
token: someRandomToken
origin: https://mywebsite.net
}
I tried logging the whole req object from the handler to see if that info exist but the console log fills my terminal fast.
Inside Next's Server-Side environment you have access to req.headers.host as well as other headers set by Vercel's or other platforms' Reverse Proxies to tell the actual origin of the request, like this:
/pages/api/some-api-route.ts:
import { NextApiRequest } from "next";
const LOCAL_HOST_ADDRESS = "localhost:3000";
export default async function handler(req: NextApiRequest) {
let host = req.headers?.host || LOCAL_HOST_ADDRESS;
let protocol = /^localhost(:\d+)?$/.test(host) ? "http:" : "https:";
// If server sits behind reverse proxy/load balancer, get the "actual" host ...
if (
req.headers["x-forwarded-host"] &&
typeof req.headers["x-forwarded-host"] === "string"
) {
host = req.headers["x-forwarded-host"];
}
// ... and protocol:
if (
req.headers["x-forwarded-proto"] &&
typeof req.headers["x-forwarded-proto"] === "string"
) {
protocol = `${req.headers["x-forwarded-proto"]}:`;
}
let someRandomToken;
const yourTokenPayload = {
token: someRandomToken,
origin: protocol + "//" + host, // e.g. http://localhost:3000 or https://mywebsite.net
};
// [...]
}
Using Typescript is really helpful when digging for properties as in this case. I couldn't tell if you are using Typescript, but in case you don't, you'll have to remove NextApiRequest.

Cloudfront with lambda edge not working with new cache behavior

I had a CloudFront distribution using the legacy cache Behavior and Aws Lambda Edge to change the origin path to serve multiple websites using the same bucket.
This was my lambda edge that was working with the legacy cache behavior:
|
'use strict';
const env = '${Environment}';
const origin_hostname = 'yourwebsite-${Environment}.s3.amazonaws.com';
exports.handler = (event, context, callback) => {
const request = event.Records[0].cf.request;
const headers = request.headers;
const host_header = headers.host[0].value;
var remove_suffix = '.yourwebsite.com';
if(env == "dev"){
remove_suffix = '-dev.yourwebsite.com';
}
if(host_header.endsWith(remove_suffix))
{
request.uri = '/' + host_header.substring(0,host_header.length - remove_suffix.length) + request.uri;
}
// fix the host header so that S3 understands the request
headers.host[0].value = origin_hostname;
// return control to CloudFront with the modified request
return callback(null,request);
};
This was my CloudFormation Lambda function association and cache policies:
LambdaFunctionAssociations:
- EventType: origin-request
LambdaFunctionARN: !Ref HotSitesEdgeFunctionVersion
CachePolicyId: "658327ea-f89d-4fab-a63d-7e88639e58f6"
ResponseHeadersPolicyId: "67f7725c-6f97-4210-82d7-5512b31e9d03"
After some hours working to understand, I realize that the host value was ..s3.amazonaws.com and not my subdomain. :(
The solution was
Create a new OriginRequestPolicy and attach the id to OriginRequestPolicyId in your distribution.
HotSiteCustomOriginRequestPolicy:
Type: AWS::CloudFront::OriginRequestPolicy
Properties:
OriginRequestPolicyConfig:
Comment: Custom policy to redirect Host header
CookiesConfig:
CookieBehavior: none
HeadersConfig:
HeaderBehavior: whitelist
Headers:
- Host
- Origin
Name: HotSiteCustomOriginRequestPolicy
QueryStringsConfig:
QueryStringBehavior: none
And in your distribution
OriginRequestPolicyId: !Ref HotSiteCustomOriginRequestPolicy
Documentation for all managed policy if you need:
https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/using-managed-origin-request-policies.html
Basically, you have to forward the CloudFront Host and Origin to your lambda edge.
I hope this can help you guys.

AWS static website - how to connect subdomains with subfolders

I want to setup S3 static website and connect with my domain (for example domain: example.com).
In this S3 bucket I want to create one particular folder (name content) and many different subfolders with in, then I want to connect these subfolders with appropriate subdomains, so for example
folder content/foo should be available from subdomain foo.example.com,
fodler content/bar should be available from subdomain bar.example.com.
Any content subfolder should be automatically available from subdomain with that same prefix name like folder name.
I will be grateful for any possible solutions for this problem. Should I use redirection option or there is any better solution? Thanks in advance for help.
My solution base on this video:
https://www.youtube.com/watch?v=mls8tiiI3uc
Because above video don’t explain subdomain problem, here is few additional things to do:
to AWS Route53 hostage zone we should add records A with “*.domainname” as record name and edge address as Value
to certificate domains we should add also “*.domainname”- to have certificate for wildcard domain
when setting up Cloudfront distribution we should add to “Alternate domain name (CNAME)“ section “www.domainname” and also “*.domainname”
redirection/forwarding from subdomain to subfolder is realizing via Lambda#Edge function (function should be improve a bit):
'use strict';
exports.handler = (event, context, callback) => {
const path = require("path");
const remove_suffix = ".domain.com";
const host_with_www = "www.domain.com"
const origin_hostname = "www.domain.com.s3-website.eu-west-1.amazonaws.com";
const request = event.Records[0].cf.request;
const headers = request.headers;
const host_header = headers.host[0].value;
if (host_header == host_with_www) {
return callback(null, request);
}
if (host_header.startsWith('www')) {
var new_host_header = host_header.substring(3,host_header.length)
}
if (typeof new_host_header === 'undefined') {
var new_host_header = host_header
}
if (new_host_header.endsWith(remove_suffix)) {
// to support SPA | redirect all(non-file) requests to index.html
const parsedPath = path.parse(request.uri);
if (parsedPath.ext === "") {
request.uri = "/index.html";
}
request.uri =
"/" +
new_host_header.substring(0, new_host_header.length - remove_suffix.length) +
request.uri;
}
headers.host[0].value = origin_hostname;
return callback(null, request);
};
Lambda#Edge is just Lambda function connected with particular Cloudfront distribution
need to add to Cloudfront distribution additional setting for Lambda execution (this setting is needed if we want to have different redirection for different subdomian, instead all redirection will point to main directory or probably to first directory which will be cached - first request to our Cloudfront domain):

Cors issue solved by using proxy not working after served in Netlify Create-react-app

I have built a real estate site that makes a an api request to "https://completecriminalchecks.com" In development mode I was getting the dreaded blocked by Cors error. Through some research I found that I needed to use a proxy to solve the issue, which it did in development mode on my local host. But now I have deployed the site to netlify, I am getting a 404 error when making the request. when I look at the request from the network devtools its says
Request URL: https://master--jessehaven.netlify.app/api/json/?apikey=6s4xxxxx13xlvtphrnuge19&search=radius&miles=2&center=98144
I dont think this is right. How do i make netlify make the proper request to the api that was having cors issues in development?
Have you tried netify documentation about it?
Proxy to another service Just like you can rewrite paths like /* to
/index.html, you can also set up rules to let parts of your site proxy
to external services. Let's say you need to communicate from a
single-page app with an API on https://api.example.com that doesn't
support CORS requests. The following rule will let you use /api/ from
your JavaScript client:
/api/* https://api.example.com/:splat 200
Now all requests to /api/... will be proxied through to
https://api.example.com straight from our CDN servers without an
additional connection from the browser. If the API supports standard
HTTP caching mechanisms like ETags or Last-Modified headers, the
responses will even get cached by our CDN nodes.
You do not need to use a proxy, you enable CORRS in your server. Are you using a onde server?
If you use express something like this:
npm install --save cors
And then use it as middleware:
var express = require('express');
var cors = require('cors');
var app = express();
app.use(cors());
Also in your netlify.toml file this will do the trick:
# The following redirect is intended for use with most SPAs that handle
# routing internally.
[[redirects]]
from = "/*"
to = "/index.html"
status = 200
[[headers]]
# Define which paths this specific [[headers]] block will cover.
for = "/*"
[headers.values]
Access-Control-Allow-Origin = "*"
I also faced the same issue and solved by creating a netlify.toml file in root directory.
Here is a sample code for redirect which worked for me.
Place this inside the netlify.toml file.
Documentation guide for proxy :
[[redirects]]
from = "/api/users/tickets/"
to = "https://some-external-site.com/api/users/tickets/"
status = 200
force = true
headers = {Access-Control-Allow-Origin = "*"}
[[redirects]]
from = "/api/users/cars/*"
to = "https://some-external-site.com/api/users/cars/:splat"
status = 200
force = true
headers = {Access-Control-Allow-Origin = "*"}
I also faced the same issue , so I removed the "proxy" from the "package.json" file and created a variable to store the IP addess or URL for backend , then used it with the URL parameter for calling API. The CORS issue is solved in backend by allowing "All origins".
File to store base URL:
constant.js :
export const baseUrl = "https://backEndUrl";
File to call API:
getDataApi.js:
import { baseUrl } from "./constant";
export const getProfileData = () => (dispatch) => {
axios
.get(`${baseUrl }/api/profile`)
.then((res) =>
dispatch({
type: GET_PROFILE,
payload: res.data,
})
)
.catch((err) =>
dispatch({
type: GET_PROFILE,
payload: null,
})
);
};