codesandbox link: https://codesandbox.io/s/muddy-firefly-vfxmib?file=/src/App.tsx
I'm able to upload images to S3 through presighed URL with https://github.com/pqina/filepond. However, when I try to edit images with Filepond, the browser gave me CORS error. The S3 bucket is private and behind Amazon CloudFront.
In above codesandbox, you can see that it works fine with:
export default function App() {
const fileLinks = [
"https://cdn.shopify.com/s/files/1/0466/8784/6560/products/HALFCHAINCHARMRING_1_160x.jpg"
];
return (
<div className="App">
<FormikEditFilesField name="productImageUrls" fileLinks={fileLinks} />
</div>
);
}
However, if you replace above file link with my image link "https://alpha.assets.bimelody.com/images/movintnyc/VD33744WHITE_4_1000x.webp", an CORS error will get thrown. You can open this link in browser with no problem.
Also want to mention that when I run the React app locally, displaying the images work fine. It is just try to load the images with Filepond doesn't work. This part confuses me as if it is a CORS problem, then why it works in localhost for displaying the images, but not for Filepond edit ?
Do I miss some configuration in my API or bucket?
Update
Looks like I missed allowing HEAD header in the CORS configuration.
After update, it works. And my final bucket cors is:
[
{
"AllowedHeaders": [
"*"
],
"AllowedMethods": [
"GET",
"POST",
"PUT",
"HEAD",
"DELETE"
],
"AllowedOrigins": [
"*"
],
"ExposeHeaders": []
}
]
If you encountered same problem, check your cloudfront and S3 configuration based on these links:
https://www.mslinn.com/blog/2021/03/21/cors-aws.html
https://aws.amazon.com/premiumsupport/knowledge-center/no-access-control-allow-origin-error/
Also, Chrome has caching issue that may cause Chrome-only CORS issue, which can be addressed with:
fetch(myRequest, {
method: 'GET',
mode: 'cors',
cache: 'no-store',
})
Wrong S3 configuration. This problem is already resolved.
Please check https://stackoverflow.com/a/70780987/6323902
Related
I am trying to get an object from aws-s3 (a test file with dictionnary inside) with Vue.js and Amplify for a frontend project. I would like to see the content of the file on my interface.
I'm simply using Amplify library with this tag in my component.vue:
<template>
<amplify-s3-text text-key="file_name" />
</template>
I configured the file aws-exports.js like this:
const awsconfig = {
"aws_project_region": "eu-west-1",
"aws_cognito_identity_pool_id": "eu-west-1:xxxxxxxxxxxxxx",
"aws_cognito_region": "eu-west-1",
"aws_user_pools_id": "eu-west-xxxxx",
"aws_user_pools_web_client_id": "xxxxxxx",
"oauth": {},
"aws_user_files": 'enable',
"aws_user_files_s3_bucket": 'bucket_name',
"aws_user_files_s3_bucket_region": 'eu-west-1',
};
export default awsconfig;
I'm working on an EC2 instance so I use a forwarded port to view my app on localhost.
But I can't see anything in my interface. The error on the console is:
axios-http-handler Error: Request failed with status code 403
I am using an existing backend, so I don't want to use amplify/CLI.
I didn't find anything more in the official documentation (https://docs.amplify.aws/ui/storage/s3-text/q/framework/vue).
How can I display the content of this s3 file on my interface ?
In Page Builder I've added a page called About Us which has the url '/about-us/'
I've been following the instructions found here
https://developer.bigcommerce.com/stencil-docs/storefront-customization/custom-templates
in order to make a custom template for that page.
I made a file called about-us.html in templates/pages/custom/page with the contents:
<h1>About Us Page Test</h1>
My .stencil file looks like the following
{
"normalStoreUrl": "my url",
"accessToken": "my access token",
"port": "3003",
"customLayouts": {
"brand": {},
"category": {},
"page": {
"about-us.html": "/about-us/"
},
"product": {}
}
}
I've stopped and reran 'stencil start' but every time I visit localhost:3003/about-us/ it just shows the normal page instead of the custom template I build.
Is there something I'm missing? Is this an issue with using the page builder in combination with stencil?
I assume you haven't set the custom template for your page yet.
Go to Web Pages and edit your About Us page then look for the Template Layout File dropdown. Your custom template should appear there if it is setup correctly.
The issue was resolved when a full system reboot was performed. I'm not sure why stopping and restarting stencil did not resolve this.
I created an app with vue-cli and then I build the dist folder for production.
The app is deployed on IIS with flask backend and works fine.
The problem occurs when I have to make some changes and I have to redo the deployment. After this, users call me because app doesn't work but if I clear the chrome cache, the app works fine again.
How can I fix this problem? Is there a method to clear chrome cache automatically when I release a new application version?
Thanks
my dist folder
deployment: copy and paste folder dist on IIS
if files in dist folder are correct, maybe the problem is in axios cache? i have make some changes also to rest apis
I had the same problem and changing (incrementing) the version number in package.json before running the build command fixed it.
For example by default the version number is set to "0.1.0"
package.json file:
{
"name": "project-name",
"version": "0.1.1",
"private": true,
...
}
If you use vue-cli, then it has built-in webpack configs for building dist. And in fact it adds hash-names to output files.
But if it was removed somehow, you can add it back to webpack config like
output: {
filename: '[name].[hash].bundle.js'
}
And your app will looks like this:
And even more, you do not need to handle how all this stuff will be added to html, coz webpack will figure it out for you.
You need to add a version query to your js file. This is how a browser can know if the file has changed and needs to download the new version.
So something like:
<script src="main.js?v=1.1"></script>
<script src="main.js?v=1.2"></script>
etc...
Assuming this is nothing to do with service worker/PWA, the solution could be implemented by returning the front-end version.
axiosConfig.js
axios.interceptors.response.use(
(resp) => {
let fe_version = resp.headers['fe-version'] || 'default'
if(fe_version !== localStorage.getItem('fe-version') && resp.config.method == 'get'){
localStorage.setItem('fe-version', fe_version)
window.location.reload() // For new version, simply reload on any get
}
return Promise.resolve(resp)
},
)
You can also ensure the fe-version is returned based on any sort of uniqueness, here I have used the commit SHA.
Full Article here: https://blog.francium.tech/vue-js-cache-not-getting-cleared-in-production-on-deploy-656fcc5a85fe
You can't access the browser's cache, that would be huge a security flaw.
To fix it, you must send some headers with your flask responses telling the browser not to cache you app.
This is an example for express.js for you to get the idea:
setHeaders: function (res, path, stat) {
res.set('Cache-Control', 'no-cache, no-store, must-revalidate') // HTTP 1.1
res.set('Pragma', 'no-cache') // HTTP 1.0
res.set('Expires', '0') // Proxies
}
You can read a lot more about caching in here.
This is an older post, but since I could not find the solution for this problem online, ill just post this here in case someone else might find it usefull.
I added the hash to the appllication chunk files via the webpack.mix.js file by adding:
mix.webpackConfig({
output: {
chunkFilename: 'js/[name].js?id=[chunkhash]',
},
})
This adds a fingerprint to the actual chunks and not just the app.js file. You can add a version name to the app.js file aswell by adding version(['public/js/app.js']); at the end of the file, or add filename: '[name].js?[hash]' to the output block.
My complete webpack.mix.js:
const mix = require('laravel-mix');
mix.webpackConfig({
output: {
chunkFilename: 'js/main/[name].js?id=[chunkhash]',
}
}).js('resources/js/app.js', 'public/js').vue()
.postCss('resources/css/app.css', 'public/css', [
//
]).version(['public/js/app.js']);
In my laravel blade file I used
<script src="{{ mix('js/app.js') }}"></script>
to load the app.js file with the correct version fingerprint.
The answer for me was caching at my DNS provider level.
Basically, I'm using Cloudflare DNS proxy and they are caching the website so in development mode I was not getting the code updates.
I had to clear the cache many times to get anything to change. I had to wait a significant period of time before anything update.
Turned it off and it stopped doing that.
the method I want to suggest
<script src="{{ asset('js/app.js?time=') }}{{ time() }}" defer></script>
add below script in publc/index.html
<head>
...
<script type="text/javascript" language="javascript">
var timestamp = (new Date()).getTime();
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "<%= BASE_URL %>sample.js?t=" + timestamp;
document.head.appendChild(script);
</script>
...
</head>
could you try ?
vm.$forceUpdate();
Also it's possible that the component it self needs a unique key :
<my-component :key="unique" />
I am currently working on a DICOM based web application, I have created my backend server using .net core and want to integrate my server with OHIF viewer. I read all the documentation of OHIF viewer and configured my default.js file and changed the routes of wadoUriRoot,qidoRoot and wadoRoot as follows
window.config = {
// default: '/'
routerBasename: '/',
extensions: [],
showStudyList: true,
filterQueryParam: false,
servers: {
dicomWeb: [
{
name: 'DCM4CHEE',
wadoUriRoot: 'http://127.0.0.1:5000',
qidoRoot: 'http://127.0.0.1:5000',
wadoRoot: 'http://127.0.0.1:5000',
qidoSupportsIncludeField: true,
imageRendering: 'wadors',
thumbnailRendering: 'wadors',
enableStudyLazyLoad: true,
},
],
}
Now when I recompile and run it, I get a totally black screen. I have checked that data is going to the browser. What are the possible reason for this behavior? How can I make my OHIF viewer to display my own Dicom images?
I finally able to solve it. It was a browser problem, Firefox and Chrome were not allowing CORS so I had to add services and UseCors to my Startup.cs in my server code to enable CORS
https://learn.microsoft.com/en-us/aspnet/core/security/cors?view=aspnetcore-3.1
There it's mentioned how to do it.
I have implemented Universal links in iOS app. It works perfectly when I put the url in external app such as "Notes" and then tap it. It opens the app.
What I want to achieve is that when someone visits a specific url of my webpage, the ios app should be launched by itself. So in order to accomplish this, I have put:
applinks:www.mydomain.com
in my entitlements.
And the following in my "apple-app-site-association" file
{
"applinks":
{
"apps": [ ],
"details":
[
{
"appID": "team_id.com.teamname.app_name",
"paths": ["/path-CompA/path-CompB/"]
}
]
}
}
But When I navigate through my website, and I reach the path mentioned in json file, it only shows the bar at top of web page saying "Open in App_name" with "Open" button on right side.
I want to know if its the default behaviour of Universal links to not open the app if user is coming from the same domain? If its not the case then how does it open the app form "Notes".
Please note that my json file is not signed but I have put it on my website which is on https.
Thanks,
A couple of things. Can you try changing your apple-app-site-association file code as such?
{
"applinks": {
"apps": [],
"details": [
{
"appID": "team_id.com.teamname.app_name",
"paths": [
"*",
"/"
]
}
]
}
}
You can check your format with this validation tool: https://search.developer.apple.com/appsearch-validation-tool/
The answer is that basically, this behavior is expected as of iOS9.2, with Universal links. Universal links only work from a different domain.
With Branch (https://branch.io/), you can use one domain for links (bnc.lt), so that when you (as a developer using branch) host universal links on your site, they still operate as expected.
Also, for universal links from other domains (not to the same domain), you can 'unbreak' the safari redirect behavior by long-pressing on the link from an application and choosing 'Open in «App»'. I hope this helps!