I have an endpoint on API gateway I want to callout to protected with IAM_AUTH
. I am using aws-4axios to generate the AWSv4 signature.
export default class API {
stage = (process.env.REACT_APP_STAGE || 'dev').toUpperCase();
client: AxiosInstance;
constructor(accessKey: string, secretKey: string) {
const interceptor = aws4Interceptor(
{
region: 'us-east-1',
service: 'execute-api',
},
{
accessKeyId: accessKey,
secretAccessKey: secretKey,
},
);
this.client = axios.create();
this.client.interceptors.request.use(interceptor);
}
public async createSetupIntent(customer_id: string): Promise<void> {
const response = await this.client.post(
`${process.env[`REACT_APP_API_ENDPOINT_${this.stage}`]}/${CREATE_SETUP_INTENT_ENDPOINT}`,
JSON.stringify({ customer_id }),
);
console.log(response);
}
}
The problem I'm having is I'm doing this client side in the browser and chrome throws an error setting the Host header which API Gateway requires, which in turn causes API Gateway to return a 403 response.
Refused to set unsafe header "Host"
I'm guessing this is by design to prevent exactly what I'm trying to do - using the access/secret keys client side.
The reason I am doing this from the client side instead of server side and without cognito is because eventually these requests will be done on the server. This is simply just a dummy/proof of concept/ temporary solution to use while developing other aspects of the application until we integrate with other servers.
Is it possible to callout to an IAM_AUTH
endpoint from a browser without cognito?