网络错误/403 Forbidden on request to a service React JS axios 代理

Question

I need to make a React app that makes a request to this service https://www.indecon.online/last for a Job application and I'm currently having an issue when trying to make a GET request.

It works fine browsers or inside Postman, but when trying with axios its not the same story.

At first I tried to make a simple GET request with axios like so:

and I got back this error:

Access to XMLHttpRequest at 'https://www.indecon.online/last' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

So, I tried a second time, this time using http-proxy-middleware npm package (following this tutorial: https://levelup.gitconnected.com/overview-of-proxy-server-and-how-we-use-them-in-react-bf67c062b929 ). I configured a setupProxy.js file like so:

And simply changed the async function like this:

And now I'm getting this error after the request (second one is the result of a console.error() inside the catch block):

GET http://localhost:3000/last 403 (Forbidden)

ERROR:  Error: Request failed with status code 403
at createError (createError.js:16)
at settle (settle.js:17)
at XMLHttpRequest.handleLoad (xhr.js:61)

I have already tried the proxy config and the axios request with another public service and got a successful response.

I appreciate any help!

Answer 1

I assume you created the app with create-react-app so you have a package.json that has a dependency to react-scripts and a start script using react-scripts. You can remove the http-proxy-middleware package from your project and add proxy entry in package.json:

{
  "dependencies": {
    "react-scripts": "3.4.1", <-- you should already have this
  },
  "scripts": {
    "start": "react-scripts start", <-- you should already have this
  },
  "proxy": "https://www.indecon.online"
}

Now in your react code you can do axios.get('/last')

Start your project with npm or yarn start.

If it doesn't work then can you please post your package.json in the question (not an image but copy paste the text please).

This answer is also in the documentation you refer to in your question.