So i'm trying to upload pdf files to directus. In postman it's working fine and uploads successfully on my React project i keep getting "You are not allowed to upload files. What am I doing wrong?
Could be cors problem
Could be that you overwrite your token via postman
From the official Directus API Docs:
By default, all data in the system is off limits for unauthenticated users. To gain access to protected data, you must include an access token with every request.
Source: https://docs.directus.io/api/authentication.html
I don't know how your project is structured, but if you're already authenticated within your (Web)app and want to upload using Axios or similar, you should pass the temporary or static token that you've already got to the library or method that sends the file (Header -> Authorization: bearer xxtokenxx).
If you still have questions, the documentation link above has everything you need.
Related
I am working locally with react and a nodejs server. I have configured my nodejs server to communicate with react and it works.
From react I want to check if external urls (for example youtube) exist, but the cors error always jumps.
I have tried with axios, XMLHttpRequest, fetch and I have used the header : 'Access-Control-Allow-Origin': '*',
I can remove the cors validation from the browser for testing, but what happens when I upload it to the server?
How can I check if an image, page, video... on an external server exists?
CORS is only applied when you try to do it directly from your browser. Then you can create your own server, create an API endpoint to check if a URL exists, and then, from your react page, you send requests to your API and your API check the page existence. – (by Pipe)
I have a locally hosted wordpress installation using woocommerce, and a separate locally hosted react webapp that will be used to manage the products. I'm using the woocommerce-rest-api react plugin to call the end points.
GETs work fine and don't have any issues, however PUT and DELETE I'm having issues with CORS.
I've updated the wordpress htaccess:
and call the endpoint like so:
and this is what I get in dev tools:
Here is the preflight headers and response and then the failing call:
Any ideas what I'm doing wrong or what I've missed?
Your preflight response from (what i assume is the wordpress server) appears to be missing the Access-Control-Allow-Origin header in the response (sent back from the OPTIONS request).
To match your other requests this should be *. However it is not best practice to use * for security reasons and should instead use the domains you want to be able to access this from browsers.
I am currently working on a single page react app. This app will not require any login and it will be publicly available.
I am making a POST request to a webhook of another API that I do not have access to and that I do not maintain. This API required me to send an authentication token via the POST. I wonder how I can securely store this token so that it does not get out in the world. I need to send it as is so storing it in a cookie that a backend provides is not an option. Storing in in JWT will not work as I can decode that without the secret.
Is there even a way to store the token without exposing it to the world?
I hope the issue is clear, if not let me know and I'll explain better.
Thank you all for your time!
I would usually have a local Express server running and proxy the request through that.
You would set up a route in your Express app that you would POST to from your React front-end, this Express route handler then makes the call to the external API from the server side which has the token to put in the header. Then the response is returned to your React front-end without it knowing anything about the external API or tokens.
You can't store the token in front-end. either you need to use
cookies/session to store the token. If you want to store the token you
need to encrypt it and store it will be the better option.
Please check here to understand the JWT token mechanism
if the web app doesn't have a login. you can't generate token without user details.
The token should be passed in the header of the request for best practices.
If you're using create-react-app to instantiate your React project, have you looked into using an environment variable to store the token? It's not 100% safe and secure, check here for the cons, but can be a quick fix without a separate proxy request. You can make an .env file (make sure to add it to your .gitignore if using git) in the root of your directory and define variables there. They need to start with REACT_APP, like REACT_APP_SECRET=1234 and can then be referenced where you need them in your app with process.env.REACT_APP_SECRET.
Read more about environments in React here.
We are using AWS cloudfront to store our translation locale JSON files. Our Angular application gets these files via StaticFilesLoader in angular translate module.
In most cases it works perfectly. However after an environment is freshly created AWS could responses redirect to other location to get translation files. It is normal cloudfront behavior. But StaticFilesLoader is not able to follow this redirect and crashes with error:
XMLHttpRequest cannot load https://some.cloudfront.net/3...9-a...0-1..c-9...f/i18n/locale-en.json. Response for preflight is invalid (redirect)
Is there any known solution of this issue? Could you please give me some suggestion how to solve it?
A workaround could be to write interceptor to catch the redirect and fetch data with provided URL. But I decided to ask community before.
GAE = Google App Engine
GCS = Google Cloud Storage
My GAE application receives GET requests for files that are actually stored on a bucket of GCS. I would like to redirect those requests to their real location and include an auth token in the redirected request so that GCS accepts to serve them.
To issue a redirection, GAE exposes webapp2.RequestHandler.redirect which does not let me add any header to the original request.
Is it possible to redirect the GET request and include an auth token in it?
HTTP redirect is just a response with 3XX status code. You can't forward a header or response body to a new location.
That said, you will want to implement some logic on a client. Your client has to issue one request to your GAE application, then process the response, and then issue one more request to GCS with all the headers or body that you want to supply (auth token in your case).
I updated another thread with this as well, but just in case you didn't see it.
In the upcoming 1.6.4 release of AppEngine we've added the ability to pass a Google Storage object name to the blobstore.send_blob() to send Google Storage files of any size from you AppEngine application. We create the correct token for your application to access the objects in the Google Storage bucket.
Here is the pre-release announcement for 1.6.4.