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.
Related
HTTP Error 404.3 - Not Found
The page you are requesting cannot be served because of the extension configuration. If the page is a script, add a handler. If the file should be downloaded, add a MIME map.
I got this error when accessing react frontend. the app is hosted on the azure app service. so anyone knows how to fix this? is it need to be done in react side?
I was working over react and made a request using axios but in the browser it shows "Response to preflight request doesn't pass access control check" i had installed the corx extension but still getting the same error
Assuming you are using create-react-app you can try defining a proxy property in your package.json file and give the url to your api server, something like
"proxy": "http://localhost:8000".
This will proxy your api calls through the express server provided within create-react-app without the need for any CORS configuration in your browser
Note : This can be only used in your local environment and for production setup, you should try alternate approaches by configuring CORS setting in the API server or hosting the UI and API applications under the same hostname
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'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.
I'm doing application with spring security and Spring MVC in back end and Angular in front end.
My problem is that I do the logged in correctly, but the problem in logged out I implemented correctly in my localhost: http://localhost:8080 worked without problem. When I change it to https:// I get this error:
Mixed Content: The page at '' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint ''. This request has been blocked; the content must be served over HTTPS.
I want to know how to correct that? And how to know which url blocked by https in the browser for example chrome?
This post which gives a solution to your problem: http://www.learningthegoodstuff.com/2015/08/mixed-http-error-with-spring-security.html
All the details are explained there, basically all you have to do is add this two lines to my application.properties file:
server.tomcat.remote_ip_header=x-forwarded-for
server.tomcat.protocol_header=x-forwarded-proto
I fixed by removing a forward slash from the end of a URL fixing everything.this is help me : GET request throws error after app implemented SSL: Mixed Content: This request has been blocked; the content must be served over HTTPS"
This happens when the server is using http (non secured). You can fix it by enforcing https for all resources in the backend. Check here for more details.
In #Jabir Minjibir's answer there is very good link to describe the error. As sum up, when your application works with httpS scheme you can't make visits to unsecure links which is http.
I got this error and fixed it like I wrote below:
Mixed Content: The page at 'https://stackblitz.com/' was loaded over HTTPS, but
requested an insecure XMLHttpRequest endpoint 'http://172.19.0.62:920/'.
This request has been blocked; the content must be served over HTTPS.
You can mask unsecure links with simple-https-proxy npm package. In my experience I was coding an angular sample on httpS://stackblitz.com and I was trying to connect to an Elasticsearch server which doesn't have a domain name. I needed to make it working with ssl but I couldn't modify it's scheme. Thus I installed a proxy which can work secure (httpS).
I installed the npm package:
npm i -g simple-https-proxy#latest
Then I created certificate:
simple-https-proxy --makeCerts=true
Then I ran it
simple-https-proxy --target=http://172.19.0.62:9200 --port=9201 --rewriteBodyUrls=false
In another example: