Helo,
I'm trying to consume the api from a React app to learn but I can't consume it through CORS. How can I add cors headers in each request.
Console Log Browser:
Cross-origin request blocked: The same-origin policy does not allow reading the remote resource at http://localhost/genesis/api/get/paises. (Reason: missing CORS ‘Access-Control-Allow-Origin’ header.) Status code: 400
Thanks in advance.
How to add CORS for API
2 years ago
2 years ago
#1
2 years ago
#2
Seems like there is no direct support for CORS on the API endpoints from what i can tell.
I made a PR to add this, https://github.com/trongate/trongate-framework/pull/187
I made a PR to add this, https://github.com/trongate/trongate-framework/pull/187
2 years ago
#3
Hi guys,
Thank you sasin91 for your solution. However, I'm a little concerned about the security can of worms you may have opened here.
1. Allowing All Origins ('*'): This can be risky, especially if the API handles sensitive data or operations. It enables any external domain to access the API, which can lead to Cross-Site Request Forgery (CSRF) and other attacks.
2. Wildcard Handling: The code attempts to handle wildcard origins, but this can be complex and error-prone. Incorrect handling can unintentionally expose the API to unintended origins.
3. Credentials (`CORS_ALLOWED_CREDENTIALS`): Allowing credentials with '*' for origins is problematic. If `Access-Control-Allow-Origin` is set to '*', `Access-Control-Allow-Credentials` cannot be `true` as per the CORS specification. This setting can lead to security vulnerabilities by exposing user credentials to all origins.
What do you think about:
Use of Environment Variable:
In this example, you would set environment variables (CORS_ENABLED, CORS_ALLOWED_ORIGINS, CORS_ALLOWED_METHODS, CORS_ALLOWED_HEADERS, CORS_ALLOWED_CREDENTIALS) in your server's configuration or .env file for each environment.
There would also be a need to work on wildcard handling to make it more robust and thoroughly tested or even remove wildcards altogether. This is an untested sample block of code from GPT4-o
And a suggestion to separate configuration for credentials to ensure that `Access-Control-Allow-Credentials` is only enabled for trusted origins.In this example, `Access-Control-Allow-Credentials` is only set to `true` when `CORS_ALLOWED_CREDENTIALS` is enabled and the origin is explicitly listed in `CORS_ALLOWED_ORIGINS` (if not set to '*'). This ensures credentials are only sent to trusted origins, enhancing security.
Thank you sasin91 for your solution. However, I'm a little concerned about the security can of worms you may have opened here.
1. Allowing All Origins ('*'): This can be risky, especially if the API handles sensitive data or operations. It enables any external domain to access the API, which can lead to Cross-Site Request Forgery (CSRF) and other attacks.
2. Wildcard Handling: The code attempts to handle wildcard origins, but this can be complex and error-prone. Incorrect handling can unintentionally expose the API to unintended origins.
3. Credentials (`CORS_ALLOWED_CREDENTIALS`): Allowing credentials with '*' for origins is problematic. If `Access-Control-Allow-Origin` is set to '*', `Access-Control-Allow-Credentials` cannot be `true` as per the CORS specification. This setting can lead to security vulnerabilities by exposing user credentials to all origins.
What do you think about:
Use of Environment Variable:
In this example, you would set environment variables (CORS_ENABLED, CORS_ALLOWED_ORIGINS, CORS_ALLOWED_METHODS, CORS_ALLOWED_HEADERS, CORS_ALLOWED_CREDENTIALS) in your server's configuration or .env file for each environment.
There would also be a need to work on wildcard handling to make it more robust and thoroughly tested or even remove wildcards altogether. This is an untested sample block of code from GPT4-o
And a suggestion to separate configuration for credentials to ensure that `Access-Control-Allow-Credentials` is only enabled for trusted origins.In this example, `Access-Control-Allow-Credentials` is only set to `true` when `CORS_ALLOWED_CREDENTIALS` is enabled and the origin is explicitly listed in `CORS_ALLOWED_ORIGINS` (if not set to '*'). This ensures credentials are only sent to trusted origins, enhancing security.