Click here to Skip to main content
15,843,498 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
Bit strange to get " access to fetch URL blocked by cors preflight etc..." because the PUT request works for me in postman but i only get that error when i try to upload in react js . Here is my code above.

I get another error by the way "

<pre>error TypeError: Failed to fetch
    at Upload (Upload.js:28:1)

Which i have no clue why i am getting a type error . Any help would be appreciated

import axios from 'axios';
  
import React,{Component} from 'react';
import { useState } from 'react';
  
export default function Upload(){


const [data,setData] = useState()

if (data) {
  const file = (data.target.files[0])
console.log(file)
const myHeaders = new Headers();
myHeaders.append("Content-Type", "image/jpeg");
const formdata = new FormData();

formdata.append('File', file);


const requestOptions = {
  method: 'PUT',
  headers: myHeaders,
  body: formdata,
  redirectXXX: 'manual'
};

fetch("https://XXXX.execute-api.us-east-1.amazonaws.com/prod/XXXX/IMG_0733.jpg", requestOptions)
  .then(response => response.text())
  .then(result => console.log(result))
  .catch(error => console.log('error', error));

}




return (
  <div>
    <form>
        <input type="file" onChange={(e) => setData(e)}/>


    </form>




  </div>



)





}

expecting upload to put into API same way the postman does it.,

What I have tried:

expecting upload to put into API same way the postman does it.,
Posted
Updated 4-Dec-22 23:34pm

1 solution

Cross-Origin Resource Sharing (CORS)[^] only applies to requests initiated by the browser. It is intended to prevent a malicious site from instigating a request in the context of the current user.

For example: you log in to your bank's website. You visit evilbadguys DOT com. That site sends a cross-origin request to your bank's website telling it to transfer all of your money to their account. The bank sees you are already logged in, and processes the request as if you initiated it yourself.

Such restrictions do not apply to tools such as Postman.

In order to resolve the issue, the site you're calling needs to be explicitly configured to allow the site you're calling from to make the request. There is nothing you can do in your code to circumvent that (short of writing your own server-site proxy script).

You need to configure the CORS settings on your AWS account, as described in the documentation:
https://docs.aws.amazon.com/AmazonS3/latest/userguide/cors.html[^]
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900