How do I set CORS on requests for fonts files (or any other static resource) on the built in ember-cli server?
This is the error message just for reference:
Font from origin 'http://some-domain:4200' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:61277' is therefore not allowed access.
Add the following to ENV in config/environment.js:
module.exports = function(environment) {
contentSecurityPolicyHeader: 'Content-Security-Policy',
contentSecurityPolicy: {
// ... other stuff here
'font-src': "'self' http://some-domain:4200",
},
}
I tried adding the CSP settings but it was unsuccessful for me. I still got CORS errors for font files being referenced from my Ember app's CSS. In another post I saw someone mention ember-cli-cors which I tried and seemed to solve the issue for me. It just adds CORS headers allowing requests from everywhere to all resources which is exactly what I needed to get all resources to load properly in my local dev environment serving the Ember app assets using ember-cli's built in ember serve command to another local development server running a Python app serving my index.html from Redis(ember-cli-deploy style).
Related
My stack is the following: NestJS backend (Express under the hood) deployed on Elastic Beanstalk, NextJS frontend deployed on AWS Amplify, CloudFront as CDN, and I can't get Set-Cookie header back to the frontend NextJS app, nor a cookie is being set.
FE and BE are on a different domains.
Locally everything works fine, when FE and BE apps are local, eg. I'm getting Set-Cookie and a cookie is stored in the browser. When FE is local and BE is deployed, it doesn't work as expected also when communicating between the two. CORS is being set up and there's no error there. Cookie options seems right too.
On the backend, CORS has been set with 3 options, out of the factory method, eg. app.enableCors({...}):
explicit origin (no wildcard) - works with allowed credentials turned on
credentials set to true - allow credentials header
allowed headers
So, CORS is working, no error there, just not returning Set-Cookie header when deployed.
For cookie, I'm using cookie-parser npm module, and having set up the following options for the cookie when returning the response for POST /auth/login request:
httpOnly: true - no script reading
maxAge (1 day into the future from request time)
sameSite: 'none' - cross-site enabled
secure: true - https (required for cross-site)
On the frontend, I'm using NextJS with axios npm module to fetch an API. Also, I'm having credentials set to true.
I tried to update CORS settings on load balancers, eg. proxy for the backend, and was doing a lot of research on Stack Overflow and other platforms, but couldn't find a solution. Most solutions mention that some options are missing for the backend, like CORS and a cookie settings, and credentials: true for the frontend. But as mentioned before, seems I got that covered. CloudFront settings didn't help either. CloudFront caching policy - didn't help. Something is missing or am doing it wrong.
Everything points that the AWS has to be set up properly(default/basic settings), but I don't know what excatly. Any help?
I'm working on a React and Django API project, I'm using postgreeSQL as Database, and I deployed my website using nginx and gunicorn,
I have a problem on my deployed website when I try to insert a lot of data (add studies),
I'm getting this error:
Access to XMLHttpRequest at 'http://192.168.85.126:8000/api/new-study/'
from origin 'http://192.168.85.126' has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
PS: I'm not getting this error when I try to add less data, in my development environment I can add whatever data I want, the problem is only happening in production
Let me guess, you're not using gunicorn in your development environment, but only use manage.py runserver, aren't you? That's why it was running, as "development server" is more easy and loose on security than gunicorn.
This is a security issue, as your system is blocking request from an unknown origin:
Your server: http://192.168.85.126:8000
The request origin: http://192.168.85.126 <<< no port, so it is considered different server
To fix the issue, in the settings.py, add the CSRF_TRUSTED_ORIGINS parameter like this
CSRF_TRUSTED_ORIGINS = ['http://192.168.85.126:8000', 'http://192.168.85.126']
Furthermore, if you're going to use SSL later (https), then you will also have to add CSRF_TRUSTED_ORIGINS for each https server
Implemented Module Federation for Host and Remote Application.
For the Remote application, federated module is uploaded on a CDN.
While accessing the federated module on localhost, Host application is working fine but while accessing the module using CDN link, getting an error. Error exists during Lazy Loading of the federated module:
Uncaught ChunkLoadError: Loading chunk 531 failed.
Below is my module federation configuration in webpack (Host app):
**new ModuleFederationPlugin({
name: 'common',
filename: 'common',
remotes: {
sampleAppModule: sampleApp#http://CDN-link/remoteEntry.js
// sampleAppModule: sampleApp#http://localhost:8000/remoteEntry.js (this works fine)
},
shared: [sharedDependencies],
})**
Able to see the federated module on CDN link by directly accessing it.
Also, successfully getting 200 status while fetching remoteEntry.js file but error comes when lazy loading the remote module.
This exception can arise when the public path of the remote module is misconfigured, so even if the app can access to the remoteEntry, then it fails to find other chunks because it tries to fetch them from a wrong location. Using code splitting you need to set a Dynamic Public Path on remotes. Webpack can automatically determine the public path when setting an Automatic publicPath. If that is the case, you just need to update the webpack configuration of your remotes like this.
webpack.config.js
module.exports = {
...
output: {
...
publicPath: 'auto',
},
};
If the error appears intermittently, another cause of this exception is misconfigured CDN cache. It's common to configure Webpack using output filenames depending on content hash in combination with long expiration time for cached content on CDN. This configuration optimizes performances because user browsers will cache static assets locally and use those files for subsequent requests.
When using Webpack Module Federation, the remoteEntry.js represents a stable entry point for the remote module. For this reason its name won't change on subsequent builds, even if its content changes. It is updated at every build because it contains a "map" of other files, whose names are dynamically generated with content hash. So, this file should never be cached, allowing the browser to download new files when a deploy occurs.
You can avoid to cache the remoteEntry.js by setting for it a Cache-Control header like Cache-Control: max-age=0 on the server. It's very important to set this header only on the remoteEntry.js file and not setting it as the server default, otherwise every file will be not cached.
Alternatively, if you can invalidate CDN cache for this file, you can set Cache-Control: max-age=0, s-maxage=<time> and invalidate the CDN cache for remoteEntry.js at every deploy. This header allows caching only on shared caches, like the CDN. That way your CDN can serve requests to remote entry, avoiding to request it to the server.
Setting up production lucee box, having issues locating ajax library in lucee server. My browser unable to find ajax library showing 404 error.
I am not sure this is because of firewall or lucee server configuration issue.
My development and staging working fine only having issue in production server.
Request URL: https://example.com/mapping-tag/lucee/core/ajax/JSLoader.cfc?method=get&lib=LuceeAjax
Request Method: GET
Status Code: 404
Remote Address: 201.10.26.29:443
Referrer Policy: no-referrer-when-downgrade
Please advise..
With an Adobe CF server, the JS files related to cfajaxproxy are in the /CFIDE/scripts/ folder. The /CFIDE/ folder is removed from public access when the server is locked down. To allow access to the JS files for the UI and ajax tags, you can specify an alias in CF Admin for that folder.
For example, /cfjs would map to /CFIDE/scripts in CF Amin, so CF will generate that path for cfajaxproxy use. You'd have to create this folder alias in IIS or whatever web server you're using.
If on Lucee, the folder /lucee/core/ is blocked when locked down, there should be a similar solution for that engine.
I have my index.html document deployed to a www.lorem.io bucket and the rest of my assets deployed to a cdn.lorem.io bucket. Both of these buckets have their own Cloudfront distributions. When visiting https://www.lorem.io/ I'm receiving the following error:
Uncaught SecurityError: Failed to execute 'replaceState' on 'History': A history state object with URL 'https://cdn.lorem.io/' cannot be created in a document with origin 'https://www.lorem.io' and URL 'https://www.lorem.io/'.
You're ember.js configuration file defines rootURL to be "https://cdn.lorem.io" which is wrong. When accessing lorem.io your rootURL is supposed to be "https://www.lorem.io".
Perhaps you meant baseURL. See this explanation for the difference between rootURL and baseURL.
Warning: Keep in mind, that baseURL gets deprecated in ember-cli 2.7.
Our locationType setting in our configuration file is hash in production.
In ember.js configuration file, can you change your locationType as hash, and try again:
ENV.locationType = 'hash';
From Guide
From a discussion on github