score:4
the problem you have is that the go server is served on the origin http://localhost:8080
while the react local webapp is certainly served on the origin http://localhost:3000
(this is what i have most of the time)
according to https://developer.mozilla.org/en-us/docs/web/http/headers/origin the origin (in the sense of the browser) is:
<scheme> "://" <hostname> [ ":" <port> ]
the browser detects the js react webapp is trying to access another origin (port 8080) that has no specific header and therefore blocking it.
one solution to this is to configure the go api so that it returns the appropriate header access-control-allow-origin: *
.
even better, for chi, i personnaly use:
import "github.com/go-chi/cors"
router := chi.newrouter()
router.use(cors.allowall().handler)
more about cors here: https://developer.mozilla.org/en-us/docs/web/http/cors
score:0
react now proposes the proxy
field in the package.json
file to collect and redirect your webapp requests:
"proxy": "http://localhost:8080"
should do the trick with no cors at all.
see https://create-react-app.dev/docs/proxying-api-requests-in-development/
Source: stackoverflow.com
Related Query
- Requests between ReactJS Axios and Go API
- Delete data from API with Axios and ReactJS
- Multiple API requests using Axios ReactJS
- How to make API requests correctly with Reactjs and Axios?
- What is the difference between Reactjs and Rxjs?
- Difference between production and development build in ReactJS
- ReactJS difference between stateful and stateless
- What are the differences between Redux-Thunk and Redux-Promise when used with Axios apis?
- Multiple Axios Requests Into ReactJS State
- ReactJS - What is difference between component state and class variable?
- What are the main differences between AngularJS and ReactJS
- reactjs make https (not http) requests with axios
- Difference between `ref` and `innerRef` in ReactJS
- Using different API url for development and production with React and axios
- WebSocket connection between reactjs Client and flask-socketio Server doesn't open
- Differences between `useRef` and ref variable in ReactJS
- Reactjs and redux - How to prevent excessive api calls from a live-search component?
- Difference between if(x) and if(x==true) in a reactjs component
- Difference between {} and () with .map with Reactjs
- What's the difference between componentWillMount and UNSAFE_componentWillMount in ReactJS
- Secure authentication between ReactJS and Django
- Authenticate Users and use Graph API using Azure AD, ReactJS and NodeJS
- reactjs axios cant get api data
- Call web api method inside ReactJS web worker with axios
- Creating a code verifier and challenge for PKCE auth on Spotify API in ReactJS
- how to make api calls in reactjs new hook api and share that across components?
- Making CORS API requests with create-react-app and webpack - no express
- windows Authorization in ReactJS and .NET Core API
- GraphQl and Conditional Resolver API Requests
- Why in React, my axios API call has Authorization Header which contains Bearer <token> but not being authorized and gives 401 error
More Query from same tag
- reactJS material UI Icon button to upload file
- Difference between react hooks returning from useEffect
- Apollo 2.1, Mutation and React-Router
- Using 'material-ui' with react-rails gem?
- Not able to display bootstrap table using map function
- How to refactor useEffect to onlick function
- How do i change the color of a button when clicked in react?
- Flex div size and Tabulator table (React version)
- REACT - how can wait until api call finish to load a path?
- Render unstanitized HTML with ClojureScript+Sablono
- Run custom function as part of build process with babel
- Stripe Elements - Restrict certain card types
- componentWillRecieveProps method is not working properly: ReactJS
- How to add sass to webpack + react?
- Generic Model in Mobx State Tree?
- Mixed operators in JSX
- Could not find a declaration file for module '@editorjs/image'
- NextJs useEffect triggers every time I route
- How return data from a GraphQL mutation?
- @cypress/react : How to launch a component under a given path / URL?
- React-Google-Maps displays two markers, one at the original position and another marker that follows the new center of the map onDrag
- Base64 image not opening up when converted from Image URL
- useQuery doesn't fire on rerender
- How to import a script into a react element and use the class and functions provided by that script
- How to call an action from inside an options object?
- Not able to pass data to child react component
- React.js / Leaflet -- Run useEffect on Mount only in DevServer
- npm test -- --coverage never exits
- Reduce( ): Type 'number' is not assignable to type 'Item'
- Pass existing record record/value to Create Component