We started implementing PWA, As part of the implementation, I am importing manifest.json from the amazon s3 bucket. Getting following error.
Failed to load https://abcdefghij.com/static/pwa/Manifest.json:No 'Access-Control-Allow-Origin' header is present on the requested
I had written following code in index.html file
<link rel="manifest" crossorigin="anonymous" href="https://abcdefghij.com/static/pwa/Manifest.json"/>
will be thankful, if someone helps.
Does your https://abcdefghij.com/ server support cross-origin request?
For more information: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
I would not recommend disabling CORS.But you can white list Few sources using S3 buckets. CORS Has to be set on server side you can use this as a reference assuming you are using Node
For S3 use this
Related
After deploying the app on beanstack I am getting the 413 Entity too large Exception. I know the reason of this Exception but I don't know where can I need to configure this client request body max size in ktor project or Beanstack.
I tried to increase the size on client request body and added the custom configuration in the .platform/nginx/conf.d/myConfig.conf and .ebextensions/nginx/conf.d/proxy.conf files but didn’t get any luck.
Note: It is working fine in local but getting this issue after deploying...
myConfig.congis an incorrect config file for configuring nginx. The correct files have extension *.conf as described in AWS docs.
When I use chrome version 78, I can pass the custom header key-value to the backend normally, but when I upgrade the kernel to the latest chrome version 87, I get an error when I access the backend java api interface again and it says "No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin' header is present on the requested resource."
What am I doing wrong?
vue : 2.6.11
axios: 0.19.2
This is a server-side problem. You should contact the server manager and ask him to add Access-Control-Allow-Origin header in the responses or do it yourself if server is in your hands).
I solved the chrome 85+ security policy problem, by:
Set up a reverse proxy through vue proxy to trick the browser.
I am getting several warnings when loading my website on Google Chrome similar to the following:
DevTools failed to load SourceMap: Could not parse content for https://mywebsite.com/static/js/2.abcd1234.chunk.js.map: Unexpected token < in JSON at position 0
My webapp is a React application (create-react-app) deployed on AWS Amplify. I do not get these warnings when running the app locally. How do I get rid of these warnings?
This is a problem caused by using react-router with AWS amplify. See this github issue. It suggests adding the following entry in the Rewrites and redirects section of App settings in AWS Amplify:
Source address:
</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf)$)([^.]+$)/>
Target address:
/index.html
Type:
200 (Rewrite)
To solve my problem, I added the map extension to this regex:
Source address:
</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map)$)([^.]+$)/>
I checked my Rewrites and redirects settings and it was already configured as per the below answer by "roob" but also had json at the end. I removed it to see if that helped. Either way, I still got the error.
More research with a colleague and found another root cause. Answered here:
AWS Amplify error: Failed to parse source map... file: Error: ENOENT: no such file or directory
I have a simple html file saved in my desktop. This html file needs to send the link to a json file(stored in azure blob) to the app included in this webpage.
Script part of the webpage
<script>
var zbc = "https://blobtempdemo.blob.core.windows.net/path/to_required_file.json";
require(['scripts/SampleApp/App'], function(App)
{
App.start(abc);
});
The json file is stored in microsoft azure blob. When i run the webpage in Mozilla Firefox, it gives a warning saying
Warning
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://blobtempdemo.blob.core.windows.net/path/to_required_file.json. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).
The app/ web page works perfectly when all the files are saved in my desktop.
When i paste the url in the firefox, it can get the file and ask me if i want to download it. But it does not work when the file is in the blob and i open this webpage.
Any Help?
Just allow CORS from all the domains (just to test) in the target storage account. That should do it. Use * as the value for allowed domains.
Reference:
https://learn.microsoft.com/en-us/rest/api/storageservices/fileservices/cross-origin-resource-sharing--cors--support-for-the-azure-storage-services
We are creating a web api application. In one of our API's if there are any validation errors, we are returning the error message in JSONP format. In the API Request URL user adds a query string parameter ?jsoncallback=xxxxxxxxxx like this.
On validation failure we are throwing a 400 bad request JSONP with response message in the below format:
xxxxxxxxxx({"error","error message"})
It is working good in all the environments, where there is no nginx. In our staging environment we have nginx configured.
Here it is modifying the output as below:
badrequest{"error","error message"})
Because of this our front end application is unable to read the response message.
Could you please let me know, what configuration setting of nginx could cause this problem?
Thanks in Advance
Venkat.
Actually the problem is not due to nginx.
It is due to IIS 7.5 in our staging server which is causing the problem.
Below configuration change in web.config has fixed it.
<httpErrors errorMode="Detailed" />