He estado atascado con este problema durante 3 días. Estoy usando React.js en la interfaz con axios y quiero cargar el archivo en el servidor. Hay un punto final de la API que es un punto final posterior a este.

 POST- https://88.66.123.122:20000/b1s/v1/Attachments2

Este punto final básicamente carga los archivos en el sistema de archivos del servidor con la respuesta exitosa que tiene el estado 201 . La respuesta está bien cuando pruebo el punto final con el cliente de escritorio Postman y el fragmento de código generado por esta herramienta es este.

Pero quiero lograr esto en la interfaz de usuario del navegador. Así que estoy usando React.js para esto.

Este punto final también necesita una cookie de autorización en el encabezado de la solicitud para asegurarse de que el usuario esté autenticado. Entonces, en la interfaz de usuario, creé un botón de inicio de sesión que básicamente envía una solicitud de publicación con credenciales codificadas al punto final de login de sesión y me da una respuesta exitosa con una identificación de sesión.

Estoy guardando la identificación de la sesión en el navegador como una cookie para el archivo de carga, pero cuando envío la cookie con la solicitud, obtengo la siguiente respuesta en el navegador

 Refused to set unsafe header "Cookie"

y la respuesta que recibo con el siguiente JSON.

 POST https://88.66.123.122:20000/b1s/v1/Attachments2 [401 (Unauthorized)] { "error" : { "code" : 301, "message" : { "lang" : "en-us", "value" : "Invalid session." } } }

No sé ¿Cómo puedo solucionar este problema? Puedes ver el GIF .

Código:

 import React from 'react'; import axios from 'axios'; const URL_LOGIN = `${process.env.REACT_APP_SERVER}Login`; const COMPANY_DB = process.env.REACT_APP_DB; const URL_ATTACHMENT = `${process.env.REACT_APP_SERVER}Attachments2`; const CREDENTIALS = { UserName: process.env.REACT_APP_USERNAME, Password: process.env.REACT_APP_PASSWORD, CompanyDB: COMPANY_DB }; function App() { const [isLogin, setIsLogin] = React.useState(false); const [selected, setSelected] = React.useState(null); function onClick() { setIsLogin(true); axios .post(URL_LOGIN, CREDENTIALS) .then(function (response) { setIsLogin(false); console.log(response.data); }) .catch(function (err) { setIsLogin(false); console.log(err); }); } // onUpload function handleUpload(event) { console.log('File set', event.target.files[0]); setSelected(event.target.files[0]); } function uploadSubmit() { const formData = new FormData(); formData.append('files', selected, selected?.name); axios .post(URL_ATTACHMENT, formData) .then(function (response) { console.log('response', response); }) .catch(function (err) { console.log('err', err); }); } return ( <div> <div> <button type="button" onClick={onClick} disabled={isLogin}> Login Create Cookie </button> </div> <hr /> <div> <div> <input type="file" onChange={handleUpload} /> </div> <button type="button" onClick={uploadSubmit}> Upload File </button> </div> </div> ); } export default App;