I have a react native app that loads a local page in a webview. This page has normal javascript files that try to load other local files in the same folder using XMLHttpRequest but are unable to do so due to the CORS restrictions.
This is how the webview is loading the content:
source={{ uri: 'file:///android_asset/viewer.html' }}
Does anyone knows a workaround for this? Either disabling CORS or loading the local content with http will work.
I found that the option allowUniversalAccessFromFileURLs was supposed to allow local file access, but it didn't. The view executes before the security settings are updated.
The following workaround worked for me: https://github.com/react-native-community/react-native-webview/issues/656#issuecomment-551312436
Related
I currently have a react native webview where the url is set to the path to a html file inside my workspace. In development, everything is working accordingly and the page gets rendered with the parameters set in the url.
My problem, i would like to move to production and hence the IP address used in the path to the index.html file is no longer available.
Here is my code:
const [url,setUrl]=useState(`http://IPADDRESS_ONMYCOMPUTER:19000/app/screens/Payment/index.html?sessionId=${route.params.sessionId}`)
return (
source={{uri:url}}
)
Update
I have created the html files on my server and are working accordingly when i access them from the browser. Unfortunately, they are not working inside my webview in react native.
I keep getting an error and the page doesnt load.
Here is my updated Code:
Here is my code:
const [url,setUrl]=useState(`http://SERVERIPADDRESS/api/payments/index.html?sessionId=${route.params.sessionId}`)
return (
source={{uri:url}}
)
for this you do not need to your local url. there are multiple solution to this. if you page is static you can copy the source code and use this package to render your html. if the page is dynamic you have to put that on some server and the specify that's url.
if your url is http so have to allow http request in your application.
for android add this
<application android:usesCleartextTraffic="true">
</application>
for details visit this question
for iOS visit this
If I try mywebsite.com/NON-EXISTENT-PATH for my site on Google App Engine, I get a 404 response.
However using create-react-app's local development server for another app, if I try localhost:3000/NON-EXISTENT-PATH, it just gives me the response for localhost:3000, rather than a 404. This also applies to hosting the app on ZEIT Now. Why is this?
Create React App is auto-detected and a wildcard route is added so that any path that doesn’t match a static file will serve /index.html.
https://zeit.co/docs/v2/build-step#optimized-frameworks
This is necessary for frameworks that don't create HTML files for each page but instead create a single index.html file and use JavaScript to route on the frontend.
This pattern is typically called SPA.
Well in my application I have a link to download a report, the report is dynamically generated. During testing the generation happens in a test server, to which CRA normally correctly redirects for xhr requests.
The link is called like:
<a href={'/api/event/2/report/csv'} download={"report.csv"}>
Load CSV report
</a>
CRA runs on port 3000, and it should act as a transparent host for all request to /api - redirecting them to localhost:3000/api. For the xhr requests this works smoothly by using the default reverse proxy. In package.json:
{
"proxy": "http://localhost:1337"
}
However this doesn't work at all. When I test above link I get a failed no file error on chrome. If I remove the download parameter I get a 404 page.
If I manually link to http://localhost:1337/api/event/2/report/csv it works (given there's no cookie so I the code shows a permission denied, but that's expected).
How can I get cra to work with this?
I'm currently developing the frontend (VueJS) for a project and to test my login and register logics I'm using laravel as backend, though we'll be actually working with springboot for backend. I was coding in a desktop and everything was normal. So I just started to work with my laptop. I got the same project, everything is equal. When I use postman to make the requests, it works normally, but when I try to make them with the form from my website, I get that error.
I've looked everywhere but couldn't fix it. Nothing I tryed did work. And It seems that no one else had a similar problem.
Cross-Origin Read Blocking (CORB) blocked cross-origin response http://127.0.0.1:8000/api/login with MIME type application/json. See https://www.chromestatus.com/feature/5629709824032768 for more details.
Add proxy configuration in vue.config.js file
module.exports = {
devServer: {
proxy: 'http://localhost:4000'
}
}
This will tell the dev server to proxy any unknown requests (requests that did not match a static file) to http://localhost:4000.
here is a link to the doc for more detail
I am trying to load Google Picker.
I am using this npm package https://www.npmjs.com/package/google-picker
When loading the picker, the auth windows show up, and I can select my Google account.
After auth is done, it tries to open the Google Picker iframe.
It is at this point the iframe fails to load and I get the error
Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://docs.google.com') does not match the recipient window's origin
I have searched this issue and many solutions say make sure to add your domain to the authorized JS origins in google console
I have done this! The domain is definitely in the authorized domains for the client. Google sign in works with my app.. but I just can't seem to get the Picker to work.
I have tried both running from localhost and uploading to the server. But I get the same error.
The server I am using is HTTPS. And the iframe URL for picker is HTTPS too. So this should not be a problem.
What else can I try? I am out of options. I am following the API exactly. I have put in all the right keys.
From this SO post answer, it is cited that the issue is with the target origin which is https.
I believe this is an issue with the target origin being https. I
suspect it is because your iFrame url is using http instead of
https. Try changing the url of the file you are trying to embed to
be https.
For instance:
var id = getId(url);
return '//www.youtube.com/embed/' + id + '?showinfo=0&enablejsapi=1&origin=http://localhost:9000';
}
to be:
var id = getId(url);
return 'https://www.youtube.com/embed/' + id + '?showinfo=0&enablejsapi=1&origin=http://localhost:9000';
}
The reason Google Picker was not showing was actually unrelated to the console error.
Even though the console error appeared, the picker still works.
But I thought it was not working because I was using the pickadate library which had css that conflicts with Google Picker.
More info about that issue here: https://github.com/amsul/pickadate.js/issues/619