My react website endpoint is hosted in AWS S3 and node endpoint to trigger email is deployed in EC2 instance. I am able to hit EC2 instance locally using the following code:
app.post('/api/email', (req, res, next) => {
sendGrid.setApiKey(config_data.SENDGRID_API_KEY);
const msg = {
to: 'random@random.com',
from: 'random@random.com',
subject: req.body.email',
text: req.body.message
}
Code to hit the EC2 endpoint /api/email:
Axios.post('http://public-IPv4:EC2_PORT_NUM/api/email', this.state)
.then( res => {
if(res.data.success){
this.setState({
disabled: false,
emailSent: true
});
} else{
this.setState({
disabled: false,
emailSent: false
});
}
})
.catch(err => {
console.log(err.response.data);
this.setState({
disabled: false,
emailSent: false
});
});
When the code is deployed locally, email is getting triggerred as required. However, when I deploy the web endpoint in S3 and try to trigger email it gives the following error:
Mixed Content: The page at 'https://mywebsiteaddress/api/email' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint '<ENDPOINT_LINK>'. This request has been blocked; the content must be served over HTTPS.
Locally, I am able to make request using 'HTTP'(http://public-IPv4:EC2_PORT_NUM/api/email) but through S3 its asking for 'HTTPS'. Then I changed the link to 'HTTPS' but still its not working neither locally nor from S3. Please let me know how to tackle this issue. Thanks in advance.
EDIT:
Updated EC2 inbound security rule to accept HTTPS.
Getting connection Refused from both local and S3. Please assist.
EDIT2: Followed the steps given in HTTPS setup in Amazon EC2 to create an LB and add certificate to it. I think the request is reaching to the load balancer but it is erroring out when redirected again to the endpoint. Here is the error:
