2

I am working on an update functionality using PUT. I have a React front end and Spring back-end API. Here is the following PUT request made from front-end:

updateStuff(username, id, stuff){
    return Axios.put(`http://localhost:8080/stuff/${username}`, {stuff})
}

Controller to handle this request:

@RestController
@CrossOrigin(origins="http://localhost:3000")
public class StuffController {

        @Autowired
        private StuffService stuffService;

    @PutMapping(path="/stuff/{username}/{id}")
    public ResponseEntity<Stuff> updateStuff(@PathVariable String username,
                   @PathVariable long id, 
                   @RequestBody Stuff stuff) {
    Stuff response =  stuffService.save(stuff);
    return new ResponseEntity<Stuff>(stuff, HttpStatus.OK);
}

I am able to use the same service for GET and DELETE. I am also able to send request using REST client. But when I am trying using browser I am getting this error in console:

Access to XMLHttpRequest at 'http://localhost:8080/stuff/abc' from origin
'http://localhost:3000' has been blocked by CORS policy: 
 Response to preflight request doesn't pass access control check: No 'Access- 
 Control-Allow-Origin' header is present on the requested resource.

PUT http://localhost:8080/stuff/abc net::ERR_FAILED

Not able to figure out why its just happening for PUT request? How to resolve this? Appreciate your help and time!

EDIT: Updated the front-end to:

    updateStuff(username, id, stuff){
    return Axios.put(`http://localhost:8080/stuff/${username}`,             {
            headers:{
                'Access-Control-Allow-Origin':'*',
                'Content-Type': 'application/json;charset=UTF-8',
            }
        })
    }

Still its throwing the same error. So far Spring Security is not configured. I am just checking a simple update flow without any authentication or authorization.

EDIT 2: Request headers in browser has Access-Control-Allow-Origin: *: enter image description here

Siddharth Shankar
  • 489
  • 1
  • 10
  • 21
  • Please see https://stackoverflow.com/questions/43871637/no-access-control-allow-origin-header-is-present-on-the-requested-resource-whe – Khabir May 16 '20 at 00:09
  • Thanks @Khabir the post you shared is helpful to understand why the issue is happening but even after allowing CORS on back-end in addition to adding headers on front-end(which I just edited in question) its throwing the same error. – Siddharth Shankar May 16 '20 at 03:05
  • Hi @SiddharthShankar , how did you solve this problem? I have done all the cors configuration in the Spring backend. But react fetch is still giving me the error. In Postman, it is working fine. – Abani Sep 06 '20 at 17:24
  • Hi @SiddharthShankar, got same error, did u solve it ? – Sushilzzz Dec 04 '20 at 04:39
  • The issues arisis mainly due to CrossOrigin but you have mentioned in Springboot app [@CrossOrigin(origins="http://localhost:3000")]. You can also check the port number where your react app is working. I think @nicolabaechi has stated the correct answer. – Ujjval Sharma Dec 27 '20 at 08:47
  • Does this answer your question? [No 'Access-Control-Allow-Origin' header is present on the requested resource—when trying to get data from a REST API](https://stackoverflow.com/questions/43871637/no-access-control-allow-origin-header-is-present-on-the-requested-resource-whe) – Evert Jan 25 '23 at 23:23

3 Answers3

1

I ran into a similar issue a while ago. Check if the variables of your model class in the backend have the same name as in your frontend. That fixed it for me.

nicolabaechi
  • 55
  • 2
  • 8
  • This is actually a pretty good answer even if it does not solve the original issue. Spring is pretty strict with the request parameters and it will give you a CORS on the actual request if your parameters do not match what the server expects. Pretty annoyting issue to debug because your preflight passes and the actual request fails with CORS making you look the wrong places for an answer. – tomato Apr 20 '21 at 18:26
0

The best way to deal with this cors policy is to add a proxy field in the pakage.json file.enter image description here

Juyel
  • 31
  • 3
0

In reactjs application you can use your spring boot api's URL as proxy to avoid CORS issue.
package.

  1. package.json

{ "proxy": "http://localhost:8080/", "dependencies": { . . . } }

  1. axios

Axios.put(stuff/${username}, {stuff})

Bhesh Sejawal
  • 558
  • 2
  • 7
  • 22