I have a reactjs website, that uses react-router with browserHistory.
Today I found an issue and I have no clue how to solve this.
The problem is, when my website is opened inside an iframe, for example in google translate page. Navigation in my website no longer works everytime a link is clicked it gives me this error:
Uncaught DOMException: Failed to execute 'pushState' on 'History': A history state object with URL 'https://www.mywebsite.com/page' cannot be created in a document with origin 'https://translate.googleusercontent.com' and URL 'https://translate.googleusercontent.com/translate_c?depth=2&hl=fr&prev=sear….com&sl=en&u=https://www.mywebsite.com/&usg=ALkJrhiWY47c812s4y3W0cS1VDZX0xRNqA'.
Does anyone knows how can I 'fix' this?
Btw, I've tested this using the latest version of Chrome, and Firefox (both on Windows)
Thanks
This is a security design. You cannot push history state cross-domain.
Mozilla documents this limitation pretty well here:
https://developer.mozilla.org/en-US/docs/Web/API/History_API
Related
I made a website with React and I used react router for routing, my problem is:
When on a non route page the browser is refreshed, I got the hostgator standard 404 page.
I know why is that and I looking for a solution like at netlify.
At netlify I can use a file named _redericets and the problem is solved.
I am working on a gatsby hybrid app that has several client-only routes with dynamic server data.
Strangely when navigating to one of the client-only routes at I am getting the 404 page and the message that there is no page found.
Visiting the client-only URL directly, eg. mysite/auth/login works, and the issue only happens when using an internal Link component or navigate('/auth/login').
I am using the gatsby-plugin-create-client-paths setup
and Router component to handle the client-routing
I am have tried different approaches but couldn't figure out why I am being redirected to the 404 page.
The issue happens only on the inial page visit. Once the page has been loaded internal navigation works without errors and also only happens in development mode. The production build works just fine.
Any ideas what could cause this behavior??
I guess you are using reach router navigate.
If thats the case, try and use navigate from gatsby.
import { navigate } from 'gatsby'
Similar issue exists in the "simple-auth" example in Gatsby git repository. After initial startup by running yarn develop at background, the click on 'log in' will go to Gatsby development 404 page.
The reason behind this is this example, and quite a lot demo around blog spots use the "Link" from #reach/react, which normally doesn't handle SSG or static routing thing, but "Link" from gatsby knows very well how to handle these.
So, the fix is:
to replace // import { Link } from "#reach/router" with import { Link } from "gatsby".
I am serving a R app using ShinyProxy with default configurations. When there is an error, the default error page exposes a lot of information about what caused the error. I would like to replace the error page, but cannot figure out where to find the HTML that creates the error message.
There is a git repo https://github.com/openanalytics/shinyproxy-config-examples/tree/master/04-custom-html-template shows how to change html for log in and the index page, but i cannot seem to find the error- does anyone have any suggestions?
Maybe this will help: https://www.tutorialspoint.com/adding-404-page-in-express
and you can replace res.send('<h1> Page not found </h1>'); with res.sendFile(pagedir);
After uploading my react app on gitHub pages its showing a blank page, and there is no error displaying in console. When I inspected the pages it says:
You need to enable javascript to run this page
but when I checked by browser settings it shows my javascript is enabled.
Here is my console
Here are the elements
Here is the Package.json
Also when I tested with a basic react app(no routes only single page) it was displaying properly
If gitHub is not publishing, is there any other alternative to publish my work?
Thanks
It looks good from my side. You should try with another browser to see if the problem persists.
I'm using Nextjs for a front-end application and dotnet core 3.1 for the Web API. There are some pages that are static and other that are dynamic I followed the official documentation to achieve this. On development mode (local machine) everything works fine. Both static and dynamic routes are working properly and fetching data from the dontnet core Web API.
However, when publishing the Nextjs app following this steps:
yarn build
yarn export
An out folder is generated at the root of the project
The content of that folder is uploaded to the server
After, the deployed files are uploaded and when loging to the app, it redirects to the main page (until here is working OK), but as soon as I click on the reload page botton (Chrome) I am gettint the 404 error.
Looking at the console in the developer tools I got this:
I found this Stackoverflow link with same issue but there the answer is to use Express for server routing. In my case I am using dotnet core Web API for server requests. So, not sure how to do that.
Is there a way to fix this from the client side? Might be a configuration is missing?
The only thing I noticed while doing the export was a message saying: No "exportPathMap" found. Not sure if that would the the reason.
I had got similar issue in react when all of my pages after building and exporting had ".html" extensions. I solved it by the following code in next.config.js file.
next.config.js
module.exports = {
exportTrailingSlash: true,
}
Note: Do not work with the above code while in development. Use it just before building the project.
You can find the documentation link here: https://nextjs.org/docs/api-reference/next.config.js/exportPathMap#adding-a-trailing-slash.
UPDATE
The above code was for next.js v9.3.4 which I was using at that time. For newer versions below code should be used according to docs.
next.config.js
module.exports = {
trailingSlash: true,
}
it has been fixed update your nextjs package
npm install next#latest
based on the current version of Next js you have, visit here to see if there's any breaking change before updating what you have
I had a similar issue where after deploying the out folder created by next export all URL's would redirect me to the homepage. Everything was working fine during development and all URL's were accessible with next/link but in order to access pages with a URL I had to add a .html extension at the end of the URL.
Because I needed a quick workaround I added a useEffect block in the _app.tsx file for rerouting so that upon landing on the homepage it would act as if a Link component was clicked redirecting to the entered URL.
useEffect(()=>{
router.push(window.location.href)
},[])