score:-1
first, check the cors version, if it doesn't work, try to use a proxy.
you can use proxy as follow,
in your front-end, pacakge.json just add this line of code.
"proxy": "http://localhost:5000",
and in your axios.get remove thie http://localhost:5000 and
axios.get("http://localhost:5000/api/products");
instead, do it like this
const res = axios.get("/api/products");
and if both doesn't work, then try to install and import body-parser on your server-side.
installtion:
npm i body-parser
import:
const bodyparser = require('body-parser')
score:-1
try creating a file called: setupproxy.js within your src folder in client. install http-setup-proxy
add this to setupproxy.js:
const { createproxymiddleware } = require('http-proxy-middleware')
module.exports = function (app) {
app.use(
'/api',
createproxymiddleware({
target: 'http://localhost:5000',
changeorigin: true,
}),
)
}
finally, restart your application.
score:0
the problem is that you include the cors
middleware at the bottom of your middleware stack, so it would only ever be reached if none of the routes match, i.e. your 404 errors would have cors headers but nothing else would:
app.use("/api/auth", authroute);
app.use("/api/users", userroute);
app.use("/api/products", productroute); // this route handles the request
// and ends the request processing
app.use("/api/carts", cartroute);
app.use("/api/orders", orderroute);
app.use(cors()); // this is never reached!
you need the cors headers always, so you have to put the middleware at the top of the stack:
app.use(cors()); // this is executed first, adds the
// headers and continues processing
app.use("/api/auth", authroute);
app.use("/api/users", userroute);
app.use("/api/products", productroute); // this route handles the request
app.use("/api/carts", cartroute);
app.use("/api/orders", orderroute);
Source: stackoverflow.com
Related Query
- Access to XMLHttpRequest at '...' from origin 'localhost:3000' has been blocked by CORS policy
- Access to XMLHttpRequest at '…' from origin 'localhost:3000' has been blocked by CORS policy
- Access to fetch from origin has been blocked by CORS policy, server api already supports middleware
- Access to XMLHttpRequest at 'http://localhost:5000/api/products' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Contr
- Access to fetch at from origin 'http://localhost:3000' has been blocked by CORS policy
- Access to fetch at *** from origin *** has been blocked by CORS policy: No 'Access-Control-Allow-Origin'
- Having a public API but only allowing access to requests sent from my website
- Can't access params sent in POST request from React client to Rails api
- Access to XMLHttpRequest blocked by CORS, No 'Access-Control-Allow-Origin' header is present on the requested resource for PUT and DELETE API only
- How to access react-app build from local file url ("file:///"), without using any HTTP server?
- Can't access array data from API call when using map() in React
- "Property does not exist on type 'never'" when i try to access a json data from API response
- I can't access the object what I want from Poke API
- Access AWS API Gateway from Axios
- Use access token from first fetch in a second fetch API in React JS
- Access React context API from _app in NextJS
- React Application Requiring Access to 3000+ Entries from Contentful API
- With React useState how do you access key values of an array returned from fetch API
- Access to fetch at 'http://localhost:5000/login' from origin 'http://localhost:3000' has been blocked by CORS policy using reactjs and node webserver
- XMLHttpRequest at from origin has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource
- How to fetch json data from a url that requires an api key to access the data in reactjs?
- How to fix "Response to preflight request doesn't pass access control check: It does not have HTTP ok status" error in react app with nodejs api
- Access Individual Elements in an Array from an API (react)
- CORS problem - Access to fetch at *** from origin *** has been blocked by CORS policy: No 'Access-Control-Allow-Origin' - PUT request to Firebase
- Access method on React Context API from Children's Method
- Trying to access API response from server on client-side
- How do i access another column from related table other than the foreign key, when creating an API view
- Access Electron Api from React
- Remove port number from Node HTTP request to external API
- Access to fetch at 'http://localhost:9900/jaxrs-post-example/rest/customers' from origin 'http://localhost:3000' has been blocked by CORS policy
More Query from same tag
- Is there a way to have a React child component displayed as a string, with indentations, returns, and with jsx syntactic sugar?
- react - rendering multiple components
- Multiple conditions in return reactjs
- this.setState makes variable undefined?
- How to listen for changes on formik field with nested values?
- Bootstrap carousel not displaying in reactjs
- Why my "webpack": "^5.70.0" is not able to process jpg file?
- How to solve data loading issue in React redux
- Why won't it work this way to display what the user has clicked to appear in the modal?
- Why does react hook form errors object temporarily empty?
- React.js - Loading single post data from API correctly
- Changing the arrow/icon colour material ui select
- Conditionally applying inline style in react
- useEffect with setTimeout in reactjs
- React Ionic Modal not closing when button clicked
- React delaying my state update by 1 iteration
- redirect from component level after specific dispatch - redux thunk
- How to get last data and set a color in map foreach in reactjs
- Accesing object using props in ReactJs
- Google-api search in reactjs
- Axios interceptor won't retry original call on React
- componentDidMount() is not getting called but only in a particular circumstance
- Not showing images in browser - React
- How to make styles not to modify external packages styles?
- How to call ComponentDidMount() of different component from another component in react.js
- Time Slider in Javascript
- Proper way to handle server-side protected routes in React?
- Why child component didnt get parent's props with Axios in React
- Add props into styled-component via custom component
- Input field focus state in react not working with the given style