Habilité CORS en mi aplicación web api
var cors = new EnableCorsAttribute("*", "*", "*"); config.EnableCors(cors); Todas las solicitudes están funcionando bien. pero when i pass an object to the post method obtengo esto:
Solicitud de origen cruzado bloqueada: la misma política de origen no permite leer el recurso remoto en http://localhost:44367/api/Users/Create . (Motivo: falta el encabezado CORS 'Access-Control-Allow-Origin').
// WORKING return axios.post(url) return axios.get(url) // NOT WORKING let model = { firstName: 'a', } return axios.post(url, model); // or with configuration let axiosConfig = { headers: { 'Content-Type': 'application/json;charset=UTF-8', "Access-Control-Allow-Origin": true, "Access-Control-Allow-Credentials": true, } }; return axios.post(url, model, axiosConfig);También está funcionando la publicación con cartero, con el siguiente cuerpo
//{ // "model" : { // "name":"firstName" // } //} He establecido un punto de interrupción en el evento Application_BeginRequest y no llegará.
Acción del controlador
public ClientResponseModel<User> Create([FromBody]UserAddModel model) { ///..... }Encabezado de solicitud
Host: localhost:44367 User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:73.0) Gecko/20100101 Firefox/73.0 Accept: */* Accept-Language: en,en-US;q=0.5 Accept-Encoding: gzip, deflate Access-Control-Request-Method: POST Access-Control-Request-Headers: access-control-allow-credentials,access-control-allow-origin,content-type Referer: http://localhost:44346/Registration.aspx Origin: http://localhost:44346 Connection: keep-aliveEncabezado de respuesta
HTTP/1.1 200 OK Allow: OPTIONS, TRACE, GET, HEAD, POST Server: Microsoft-IIS/10.0 Public: OPTIONS, TRACE, GET, HEAD, POST X-SourceFiles: =?UTF-8?B?QzpcVXNlcnNcYWxpLmtcc291cmNlXEF6dXJlXExlYmFuZXNlTGF3c1xDTVNcYXBpXFVzZXJzXENyZWF0ZQ==?= X-Powered-By: ASP.NET Date: Mon, 24 Feb 2020 13:56:15 GMT Content-Length: 0¡Cualquier ayuda es muy apreciada!
esa es la pregunta típica de cors, lea el enlace a continuación, puede ayudarlo a comprender por qué ocurrió este error.
https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
Tecnología, el navegador bloqueará su solicitud xhr cuando el dominio de su página no sea el mismo dominio que la URL de solicitud. Su servidor debería responder con un encabezado Access-Control-Allow-Origin: <origin of your client page> | *
Terminé agregando lo siguiente en mi web.config para que funcione sin ninguna configuración personalizada en axios:
<system.webServer> <handlers> <remove name="ExtensionlessUrlHandler-Integrated-4.0"/> <remove name="OPTIONSVerbHandler"/> <remove name="TRACEVerbHandler"/> <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0"/> </handlers> </system.webServer>Estaba recibiendo el mismo error. Permití cors tanto del lado de la aplicación como del lado del servidor. Pero después de buscar, descubrí que podría haber un problema de región, así que agregué la URL del proxy con la URL original y funcionó para mí. Aquí hay un código:
var myHeaders = new Headers(); myHeaders.append("Authorization", "Bearer "+ token); var requestOptions = { method: 'GET', headers: myHeaders, Vary: 'Origin', }; const proxyurl = "https://cors-anywhere.herokuapp.com/"; const url = "your url"; fetch(proxyurl + url, requestOptions) .then(response => response.json()) .then(result => console.log(result)) .catch(error => console.log('error', error));@Bean public CorsFilter corsFilter() { CorsConfiguration corsConfiguration = new CorsConfiguration(); corsConfiguration.setAllowCredentials(true); corsConfiguration.setAllowedOrigins(Arrays.asList("http://localhost:4200")); corsConfiguration.setAllowedHeaders(Arrays.asList("Origin", "Access-Control, Allow-Origin", "Content-Type", "Accept", "Authorization", "Origin, Accept", "X-Requested-With", "Access-Control-Request-Method", "Access-Control-Request-Header" )); // this allows all headers corsConfiguration.setExposedHeaders(Arrays.asList("Origin", "Content-Type", "Accept", "Authorization", "Access-Control-Request-Allow-Origin", "Access-Control-Allow-Credentials")); corsConfiguration.setAllowedMethods(Arrays.asList("GET", "POST", "PUT", "DELETE", "OPTIONS")); UrlBasedCorsConfigurationSource urlBasedCorsConfigurationSource = new UrlBasedCorsConfigurationSource(); urlBasedCorsConfigurationSource.registerCorsConfiguration("/**",corsConfiguration); return new CorsFilter(); }Usé esto y me funcionó bien