I'm trying to integrate my single page React app with GitHub.
I successfully run first stage of authentication, i.e. receiving redirect with code from https://github.com/login/oauth/authorize
The problem is the second part, i.e. POST to https://github.com/login/oauth/access_token
I can't do POST or GET from my web page itself via JavaScript or JQuery. Using $.ajax or $.post all end up with error Access-Control-Allow-Origin.
The app was created with create-react-app and run with npm start.
How can I avoid Access-Control-Allow-Origin error in my scenario? Is there a way to get GitHub token for GitHub API in some other way?
I've tried to do POST with , and it does not complain on Access-Control-Allow-Origin. In fact after .submit() I receive expected response (as per https://developer.github.com/apps/building-oauth-apps/authorizing-oauth-apps/#web-application-flow) but it comes as a file, which Chrome immediately downloads.
Related
Newish to Next.js. I deployed a Next app to GCP with Cloud Run. The local build runs with with no errors or warnings but I'm getting Minified React errors 419 and 425 on production.
I looked at the full error message but I'm not sure how to debug my code since my local build works fine.
I'm grabbing half a dozen collections from a Firestore db in a getStaticProps() and subscribing to two collections with onSnapshot in a useEffect() hook.
Any thoughts?
I could try grabbing everything in a useEffect (ditching the getStaticProps) but that seemed like the place to do my data fetching since it's a simple SPA with static data that doesn't change much.
The 400s error that you have mentioned generally means that the client is not in the capacity to complete a request.
The error “419” Indicates that you're missing your CSRF token from your request; you may fix this by adding the token when it is generated in the headers token variable and without the CSRF-token the endpoint will return the 419 status response.
Next,the error “425” indicates that when using Server-Side Rendering (SSR) with a framework like NextJS, it is uses React hydration, which basically means React is figuring out how to take the DOM structure rendered from the HTML file and convert it into a running single-page app (SPA),for this to work correctly, React Hydration requires that the HTML from the server and what your client-side app renders are an EXACT match.
I would recommend you to rectify these in your source code and try to deploy the build again.
Also check out these links for more information and examples:
Error Decoder - 425
Error Decoder - 419
Error text content does not match
419 page expired CSRF token
I did basic movie database type app with React and then deployed it to Heroku. App contains input field and it returns results after pressing Enter, and this works just fine locally. My problem is when I deployed my app to Heroku nothing happens anymore when I hit Enter and trying to search something. I belive app works correctly but for some reason it doest't get data from API when app is deployed to Heroku. Any ideas what causing this problem and how to fix this?
Source code
Live demo
Mixed Content: The page at 'https://reactmoviedb.herokuapp.com/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://www.omdbapi.com/?apikey=bf410ecf&s=dfvdf'. This request has been blocked; the content must be served over HTTPS.
The error your are getting
ReactJS API Data Fetching CORS error
I have a SPA made with React JS on a S3 Bucket and I’m using Cloud Front to work through HTTPS and with a custom domain. When I refresh the page - if I have another Route that is not the BASE_URL (for example domain.com/something), S3 sends me a 404 error.
I also tried redirecting the error page to BASE_URL but it doesn’t work, it redirects me to the Http default domain that S3 provides me and again, it gives me an 404 error page.
I don’t know if there exists an alternative way to keep the URL without any change (domain.com/page) and avoid the 404 error the way a web server (apache) handles.
If you are using CloudFront to host s3 website, the effective way to get rid of 404 on reload of non-index route like www.google.com/about or similar non / is by the following steps:
Go to your CloudFront distribution
Go to Error Pages
Create a new error page with the following params:
HTTP Error Code: 404
TTL: 0
Custom Error Response: Yes
Response Page Path: /index.html
HTTP Response Code: 200
enjoy
credits going to this article https://gist.github.com/bradwestfall/b5b0e450015dbc9b4e56e5f398df48ff
You have two options. Either use CloudFront error page as a catch-all that redirects to / (you mentioned you tried setting an error page but did not detail what you did. This should work). The downside is that it will respond with the HTML page for all not found paths, even for mistyped CSS paths, for example.
The other solution is to use Lambda#Edge to rewrite the origin request path. This is a more customizable solution and you can define which paths you want to redirect to the root.
I have recently developed an React app in which I made HTTP request to external API using Axios library. Then I used gh-pages to deploy it. But it doesn't even show up (it's a blank page). I know GitHub only hosts static pages. The React app is running perfectly fine on localhost.
When I host React App on Localhost using npm start and request data using HTTP GET request using Axios Library. I receive a JSON format data from the API. And I use this data to show on front end of the React App.
But when I host the react app on git hub pages and request for data using the same way. It does not send HTTP requests to the API. And hence webpage is static in nature
have you tried to change http:// to https://?
because browsers nowadays don't let http requests to happen
I have a React application (create-react-app) running on http://localhost:3000/ and I need to send a request to an API (Java with Spring Boot) that is available on "https://review-feature-...api/partner".
However, when I send the request, I get the following error on my Chrome console:
POST https://review-feature-...api/partner net::ERR_CERT_AUTHORITY_INVALID
I've tried to change my React application to run on https://localhost:3000, but it doesn't work because I have a Keycloak authorization server running behind my React app, so I have to find a way to send the request using http://localhost:3000/ anyway.
I've also tried to use the following environment variables (How can I provide a SSL certificate with create-react-app?) but it doens't work.
SSL_CRT_FILE=.cert/server.crt
SSL_KEY_FILE=.cert/server.key
Thanks in advance.