10 months ago
Dear team,
I'm having the following error:
Failed to load resource: net::ERR_HTTP2_PROTOCOL_ERROR
WORKING WITH:
NodeJs 18 LTS
BACK-END: TypeScript ExpressJs()
FRONT-END: Vuejs v3, Axios
WHEN GET REQUEST:https://back-url/api/get/information
CORS: Everything is well done. Already checked.
Connection in backend:
import http from "http"
public frontUrl?: string = process.env.MAIN_FRONT_END_URL;
public _corsOrigin: string[] = [this.frontUrl!];
public _app: Express = express();
public server = http.createServer({ maxHeaderSize: 20000 }, this._app);
public _webSocketIO = new webSocketServer(this.server,
{
cors: { origin: this._corsOrigin },
connectionStateRecovery: {
maxDisconnectionDuration: 18000,
skipMiddlewares: true,
}
}
);
constructor() {
this._app.use(response_time());
this._app.use(express.json({ limit: '100mb' }));
this._app.use(BodyParser.urlencoded({ extended: true, limit: '100mb' }));
this._app.use(cookieParser());
this._app.use(cors({
origin: (origin, callback) => {
console.log('origin:', origin);
console.log('white list cors:', this._corsOrigin);
if (!origin || !this._corsOrigin.includes(`${origin}/*`)) {
const msg = `The CORS policy for this site does not allow access from the specified Origin: ${origin}`;
return callback(new Error(msg), false);
} else {
return callback(null, true);
}
},
}));
}It is kind of weird, I could login, it means make a POST request to 'back-url/api/login'but I can't get any data from the server when GET resquest.
FRONT CONFIG.JS:
import axios from "axios";
axios.defaults.headers.common["Authorization"] = `Bearer ${localStorage.getItem("jwt")}`;
axios.defaults.headers.common['Content-Type'] = 'application/json';
axios.defaults.withCredentials = true;
axios.create({
timeout: 10000, // Tiempo máximo de espera en milisegundos
headers: {
'Authorization': `Bearer ${localStorage.getItem("jwt")}`,
'Content-Type': 'application/json',
'Accept': 'application/json',
'X-Requested-With': 'XMLHttpRequest',
'Cache-Control': 'no-cache',
'Pragma': 'no-cache'
},
adapter: 'http'
});
/* Internal network */
export const Global = {
url: "https://duo-care-backend-production.up.railway.app/api",
socket: "https://duo-care-backend-production.up.railway.app",
token: "Bearer" + localStorage.getItem("jwt"),
};
DETAILS:
FRONT URL: https://ivrfrontend-production.up.railway.app
BACK URL: https://duo-care-backend-production.up.railway.app
TRY WITH THE FOLLOWING END-POINT: https://duo-care-backend-production.up.railway.app/api/departments
It is free of permission evaluations.
22 Replies
10 months ago
url-backend
Omitting the url here is not helpful, please include it.
Please also send a link to the frontend where we can see this error for ourselves.
10 months ago
url-backend
Omitting the url here is not helpful, please include it.
Please also send a link to the frontend where we can see this error for ourselves.
I've edited the content to be more specific
10 months ago
I've opened the frontend URL in Chrome and I do not see any errors in the console or network tab, is there some specific page im supposed to go to go this error?
10 months ago
I've opened the frontend URL in Chrome and I do not see any errors in the console or network tab, is there some specific page im supposed to go to go this error?
Yes, go to login and get access with: IVR (railway.app)
email: anggie_castle17@gmail.com
password: Password1+
When open, click in any module as could be Patient. This will trigger a get resquest end-point. Here you'll see the errors.
Do not worry about these credentials, this is a demo app.
Details: Do not pay attention to errors about Websocket connection errors. There is a error:
"Access to XMLHttpRequest at 'https://duo-care-backend-production.up.railway.app/socket.io/?EIO=4&transport=polling&t=P25BnVP' from origin 'https://ivrfrontend-production.up.railway.app' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource."
All these happened, because I delete some line in my code
10 months ago
Are you able to make those requests successfully locally with postman or a similar app.
10 months ago
Are you able to make those requests successfully locally with postman or a similar app.
yes, I can do it, if I'm in local environment, for example in frontend. localhost:5173 and server running in localhost:8000 there is not issue, as long as I have the Authorization key for JWT of course
10 months ago
Did you get the issue inside the application module?
I did my research about this. Adding http2 instead of http won't work, because these doesn't accept express() as a second argument.
Example:
public _app: Express = express();
public server = http2.createServer({}, this._app); Won't work, because:
Argument of type 'Express' is not assignable to parameter of type '(request: Http2ServerRequest, response: Http2ServerResponse).
I tried with:
public server = spdy.createServer({
key: fs.readFileSync(process.env.KEY_PEM!, 'utf-8'),
cert: fs.readFileSync(process.env.CERT_PEM!, 'utf-8')
}, this._app);This work perfectly in localhost. But when it's deployed, any request get to my back-end server. I mean nothing. And a Cors errors Appears.
This happened because the SSL certificate IS created by my own in my application and that doesn't match with Railway SSL automatic SSL generation for my domain
10 months ago
You can not create your own ssl cert, you should only be starting an http server.
10 months ago
You can not create your own ssl cert, you should only be starting an http server.
Exactly, that's why I just let the code as
public server = http.createServer({ maxHeaderSize: 20000 }, this._app);10 months ago
yes, I can do it, if I'm in local environment, for example in frontend. localhost:5173 and server running in localhost:8000 there is not issue
I was asking if you can call the backend domain hosted on Railway locally.
10 months ago
yes, I can do it, if I'm in local environment, for example in frontend. localhost:5173 and server running in localhost:8000 there is not issue
I was asking if you can call the backend domain hosted on Railway locally.
I can, but i'll receive a Cors error because the origin is not right one, all requests must be done through: https://ivrfrontend-production.up.railway.app
10 months ago
I'll open it for any origin
10 months ago
Same issue, I tried from my front-end in localhost => production server, nothing, same result
10 months ago
Done, I receive the data perfectly
but, why is this happening when is requested from my frontend? is a misconfiguration from my code?
10 months ago
Yes this is absolutely something wrong with your code, likely with axios specifically.
Status changed to Solved railway[bot] • 10 months ago
10 months ago
I was reading a lot about this, many people are just using 'Fetch' but, my entire application is done with axios already :/Can I share you my vite.config.js?
10 months ago
Fetch would be a better choice, and I don't see what your vite config has to do with axios or fetch.
10 months ago
Fetch would be a better choice, and I don't see what your vite config has to do with axios or fetch.
Thank you very much for your help and the time you took. Can I provide you some reward?
