{"id":299,"date":"2019-08-28T12:53:36","date_gmt":"2019-08-28T16:53:36","guid":{"rendered":"http:\/\/arielnavarrete.cl\/blog\/?p=299"},"modified":"2019-08-28T12:53:36","modified_gmt":"2019-08-28T16:53:36","slug":"error-cors-nelmio_cors-con-xmlhttprequest","status":"publish","type":"post","link":"https:\/\/arielnavarrete.cl\/blog\/2019\/08\/28\/error-cors-nelmio_cors-con-xmlhttprequest\/","title":{"rendered":"Error cors nelmio_cors con XMLHttpRequest"},"content":{"rendered":"\n<p>Me paso hace poco que estaba ocupando el <a rel=\"noreferrer noopener\" aria-label=\"nelmio_cors (abre en una nueva pesta\u00f1a)\" href=\"https:\/\/github.com\/nelmio\/NelmioCorsBundle\" target=\"_blank\">nelmio_cors<\/a>, en general todo muy bien con las peticiones desde una aplicaci\u00f3n en Angular, pero puntualmente con una petici\u00f3n <strong>XMLHttpRequest<\/strong> que enviaba archivos a mi API Rest me empezo a mostrar un lindo error en la consola por cors, el error es:<\/p>\n\n\n\n<!--more Seguir leyendo\u2026-->\n\n\n\n<pre class=\"wp-block-code\"><code>Access to XMLHttpRequest at 'https:\/\/localhost:8000\/XXXXX.php' from origin 'http:\/\/localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.<\/code><\/pre>\n\n\n\n<p>Y aqu\u00ed empezaron los problemas, si tengo un bundle que se ocupa de evitar los problemas por cors, porque aqui no funcionaba? la respuesta despu\u00e9s de googlear mucho fue bastante simple la verdad, en el archivo <strong>nelmio_cors.yaml<\/strong> debes modificar el <strong>allow_headers<\/strong>. <\/p>\n\n\n\n<p>Asi esta originalmente (claramente deberia variar un poco por tus rutas):<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>    paths:\n        '^\/rest\/':\n            allow_origin: ['*']\n            allow_headers: ['Content-Type', 'Authorization']\n            allow_methods: ['POST', 'PUT', 'GET', 'DELETE']\n            max_age: 3600\n        '^\/':\n            origin_regex: true\n            allow_origin: ['^http:\/\/localhost:[0-9]+']\n            allow_headers: ['Content-Type', 'Authorization']\n            allow_methods: ['POST', 'PUT', 'GET', 'DELETE']\n            max_age: 3600\n            hosts: ['^rest\\.']<\/code><\/pre>\n\n\n\n<p>Lo unico que debes hacer es agregarle las opciones  <strong>&#8216;Accept&#8217;, &#8216;Cache-Control&#8217;, &#8216;Origin&#8217;, &#8216;X-Requested-With&#8217;, &#8216;X-File-Name&#8217;<\/strong> al <strong>allow_headers<\/strong>, quedando asi:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>    paths:\n        '^\/rest\/':\n            allow_origin: ['*']\n            allow_headers: ['Content-Type', 'Authorization', 'Accept', 'Cache-Control', 'Origin', 'X-Requested-With', 'X-File-Name']\n            allow_methods: ['POST', 'PUT', 'GET', 'DELETE']\n            max_age: 3600\n        '^\/':\n            origin_regex: true\n            allow_origin: ['^http:\/\/localhost:[0-9]+']\n            allow_headers: ['Content-Type', 'Authorization']\n            allow_methods: ['POST', 'PUT', 'GET', 'DELETE']\n            max_age: 3600\n            hosts: ['^rest\\.']<\/code><\/pre>\n\n\n\n<p>Con esto el problema se soluciona, cabe mencionar que es un poco extra\u00f1o este comportamiento, es decir, si una vez aceptada la primera peticion remueves el codigo agregado funciona, pero despues de un rato vuelve a pasar, interesante no? prodria ser un tema de cache, pero al menos con esto ya no deberias tener mas problemas.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Me paso hace poco que estaba ocupando el nelmio_cors, en general todo muy bien con las peticiones desde una aplicaci\u00f3n en Angular, pero puntualmente con una petici\u00f3n XMLHttpRequest que enviaba archivos a mi API Rest me empezo a mostrar un lindo error en la consola por cors, el error es:<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[33,32],"tags":[35,37,36,34],"class_list":["post-299","post","type-post","status-publish","format-standard","hentry","category-cors","category-symfony4","tag-angular","tag-cors","tag-nelmio_cors","tag-symfony4"],"_links":{"self":[{"href":"https:\/\/arielnavarrete.cl\/blog\/wp-json\/wp\/v2\/posts\/299","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/arielnavarrete.cl\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/arielnavarrete.cl\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/arielnavarrete.cl\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/arielnavarrete.cl\/blog\/wp-json\/wp\/v2\/comments?post=299"}],"version-history":[{"count":6,"href":"https:\/\/arielnavarrete.cl\/blog\/wp-json\/wp\/v2\/posts\/299\/revisions"}],"predecessor-version":[{"id":305,"href":"https:\/\/arielnavarrete.cl\/blog\/wp-json\/wp\/v2\/posts\/299\/revisions\/305"}],"wp:attachment":[{"href":"https:\/\/arielnavarrete.cl\/blog\/wp-json\/wp\/v2\/media?parent=299"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/arielnavarrete.cl\/blog\/wp-json\/wp\/v2\/categories?post=299"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/arielnavarrete.cl\/blog\/wp-json\/wp\/v2\/tags?post=299"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}