Tengo una aplicación React basada en Typescript que está alojada en mi PC. Uso Spring Gateway para reenviar solicitudes a otro microservicio. Las solicitudes GET funcionan bien, pero para las solicitudes POST obtengo:
Access to XMLHttpRequest at 'http://1.1.1.1:8080/api/support/tickets/create' 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.Me encuentro con este problema de Spring Cloud Gateway:https://github.com/spring-cloud/spring-cloud-gateway/issues/229
Código de reacción:
export async function getTicket(id: string) { return await axios.get(`${baseUrl}/support/tickets/ticket/${id}`); } export async function postTicket( data: TicketFullDTO ): Promise<AxiosResponse<TicketFullDTO>> { return await axios.post<TicketFullDTO>( `${baseUrl}/support/tickets/create`, data); } ¿Sabe cómo puedo deshabilitar la solicitud de OPTIONS antes de las solicitudes POST y DELETE ?
Desde el servidor, puede regresar si req.method==="OPTIOINS" dentro de las rutas POST
La solicitud de OPTIONS se envía automáticamente porque axios establece encabezados HTTP personalizados 'aplicación/json'. Con los encabezados 'application/xml' o 'application/json', "las OPCIONES are automatically sent. try to set header like application/x-www-form-urlencoded in your solicitud POST or DELETE`
O puede configurar un proxy desde el cliente.
Si está utilizando create-react-app, en la carpeta src cree setupProxy.js
npm install http-proxy-middleware --savehttp-proxy-middleware tiene toneladas de opciones
luego en setupProxy.js
const { createProxyMiddleware } = require('http-proxy-middleware'); module.exports = function(app) { app.use( '/api', createProxyMiddleware({ target: 'http://localhost:3080', changeOrigin: true, }) ); };Si está utilizando un paquete web, https://webpack.js.org/configuration/dev-server/
devServer: { historyApiFallBack: true, contentBase: path.resolve(__dirname, 'public'), proxy: { '/v1/**': { target: 'http://url', secure: false, changeOrigin: true } } },La solicitud previa al vuelo de OPCIONES está relacionada con la política de CORS y el navegador la envía automáticamente , por lo que no puede deshabilitarla.
Si tiene acceso al código del servidor, puede agregar el encabezado Access-Control-Allow-Origin: YOUR_DOMAIN en el mensaje de respuesta.
Puede consultar aquí cómo configurar CORS en Spring Cloud Gateway.
Si planea alojar la aplicación de reacción y el backend en la misma URL/puerto y solo tiene este problema en desarrollo, puede configurar el servidor de desarrollo local para enviar todas las solicitudes a su backend.
En el archivo package.json, agregue:
"proxy": "your-backend-base-url"A continuación, debe ejecutar las llamadas de back-end utilizando una URL relativa.