Context: I'm working in a monorepo, I've setup architecture using NX. I've been trying to build micro frontend apps and I've managed to do so using module federation on local environment. For that purpose I've to start both of my apps locally. So host app runs at http://localhost:4200/ which can load my remote app which is running on http://localhost:4201/
Question
Now I wants to load my remote app where it is hosted (it's hosted on S3 bucket as a static web) instead of my localhost, but I'm getting CORS issue even though I've defined rule for that on my S3 bucket to allow cross origin.
Any help would be much appreciated.
Attaching screenshot of my error below:
I've defined CORS policy as below snippet:
[
{
"AllowedHeaders": [
"*"
],
"AllowedMethods": [
"GET",
"HEAD"
],
"AllowedOrigins": [
"http://localhost:4200/"
],
"ExposeHeaders": []
}
]
Related
I'm building aws cloud with Terraform. There is a problem that is not solved, so I leave a question like this.
Currently, the front-end (react) and the back-end (fastapi) are ecs fargate, each creating a cluster on a private subnet separately.
Traffic coming from an Internet gateway is designed to enter the front-end through a load balancer and then, distribute the traffic back to the back-end through a load balancer in a private subnet.
So I applied the domain of the load balancer to the host at the front-end, and the domain of the load balancer was specified in the environment variable of the ecs task at the front end.
but The front-end fails to send a normal request to the back-end. It occurs 405 errors.
Below is the fron-end ecs task definition in terraform.
resource "aws_ecs_task_definition" "react" {
family = "react"
network_mode = "awsvpc"
requires_compatibilities = ["FARGATE"]
cpu = 1024
memory = 4096
execution_role_arn = "${aws_iam_role.ecsTaskExecutionRole.arn}"
task_role_arn = "${aws_iam_role.ecs_execution_role.arn}"
container_definitions = <<DEFINITION
[
{
"image": "<image pulled from ecs>",
"cpu": 1024,
"memory": 4096,
"name": "react",
"networkMode": "awsvpc",
"essential": true,
"portMappings": [
{
"containerPort": 80,
"hostPort": 80
}
],
"environment": [
{
"name": "REACT_APP_HOST",
"value": ${jsonencode(local.domain)}
}
]
}
]
DEFINITION
}
local.domain is specified like this.
locals {
domain = "${var.var_http}${aws_lb.fastapi.dns_name}"
}
and I tried..
When I connect the domain of the load balancer to the local front-end, I have confirmed that it works normally.
When setting up the domain of react, I thought react might not have read the domain of the load balancer, so I installed env-cmd as npm in the docker file I uploaded with react in ecr, and I installed scripts as "build": "env-cmd -f.I tried to modify to env react-scripts build", but an error occurred in the docker file.
thank you for reading!
React is a web browser javascript framework. React runs in the browser. Your front-end Fargate server isn't doing anything but serving up static files to web browsers. The code is running in each user's web browser. The API requests to the back end are not coming from the front-end Fargate server, they are coming from each user's laptop/desktop computer. In order for that code, running in people's web browsers, to access your back-end API, the API has to be available publicly on the Internet.
I am trying to upload one document to AWS S3 Bucket using a presigned url from my React Js application.
I have added the following CORS policy to the respective bucket:
[
{
"AllowedHeaders": [
"*"
],
"AllowedMethods": [
"GET",
"PUT",
"POST",
"HEAD"
],
"AllowedOrigins": [
"http://localhost:3000",
"https://portal.myapp.com",
"https://portal.*.myapp.com"
],
"ExposeHeaders": []
}
]
Post this change, it started working from my localhost. Before that it wasn't uploading from localhost also.
Now, the issue is that, post deployment of the web application to AWS, I am not able to upload the file.
I have tried the following steps:
Added "Content-Security-Policy": "connect-src 'self' http://my-bucket-dev.s3.us-east-2.amazonaws.com/" to make sure that CSP is set properly. [REF link]
Didn't work. Same CSP error.
As a next step I have added Origin to my request header:
"Origin": "https://portal.dev.myapp.com" [REF Link]
This is also not helping. Getting the same 'blocked:csp' error.
Any idea on what is going wrong here?
I'm working on a React app hosted on Firebase, and a Wordpress blog hosted on Godaddy.
Is it possible to have the Wordpress blog rendering under /blog ?
I tried something like this in firebase.json (handeling multiple targets):
"hosting": [
{
"target": "site1",
"public": "site1/public",
"rewrites": [
{
"source": "/blog/**",
"destination": "myblog.example.com"
}
]
},
...
]
But I'm getting the 404 page from the React app.
I know I can rewrite to a Cloud Function, but how to "proxy" to the external blog, preventing the app to "catch" the request ?
You can't rewrite to arbitrary URLs -- to accomplish this you'd need to deploy a Cloud Function that proxied to the Wordpress blog using e.g. node-http-proxy. You could also use Cloud Run to host the Wordpress blog directly and rewrite to the Cloud Run service.
I have EXTJS 6 app packed in web app (.war) deployed on jetty server behind apache proxy
Proxy is configured to proxy requests to my jetty node server
example:
https://my.domain/sencha << internet addess
is proxied to internal jetty server
http://jetty-node-1/my-sencha-webbapp << node address
Problem:
I don't know where to set /sencha uri in my extjs app as base path so that everything is loaded relatively from /sencha path instead of / path
Regards
Armando
I've solved it.
In app.json I added this setting
"base": "${app.dir}/sencha/"
Now it knows all about the relative path.
Snippet from app.json:
"production": {
"output": {
"appCache": {
"enable": true,
"path": "cache.appcache"
},
"base": "${app.dir}/sencha/"
},
}
please note that this creates sub folder ${app.dir}/sencha in which your production build will be.
Regards
Armando
We're using custom domains on firebase hosting: our app, served from index.html, runs nicely on app.example.com. We've also connected www.example.com, which serves the app as well.
The problem is: on www.example.com I want to be able to host a simple static page. Is there a way to configure this in the rewrites? We can easily output an extra html file in the deploy, next to index.html.
Any ideas?
Our firebase.json:
{
"database": {
"rules": "database.rules.json"
},
"hosting": {
"public": "public",
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
Firebase Hosting does not support multiple sites in a single project at this time. However, you can create a second project for your static landing page and deploy it there, connecting it to the www domain while leaving the app domain connected to the other project.
As of August of 2018, Firebase Hosting supports multiple sites on a single project! See the docs for more info.