CORS - OPTIONS ... 404 (not found)
The problem seems to be that https://pablocordovaupdated.herokuapp.com/api always returns 404:
$ curl -i https://pablocordovaupdated.herokuapp.com/api
HTTP/1.1 404 Not Found
That is, the server isn’t doing anything special/different for the OPTIONS
request—instead all requests are just hitting that 404.
app.post('/api', function(req, res, next) { console.log('!I AM YOUR FATHER'); ... });
I’m not super clear on how Express handles this case, but it may be that must configure it to send some kind of response for that route—not just a console.log
on the server side.
When I look at the content of https://pablocordovaupdated.herokuapp.com/api what I see is just a generic Heroku 404 page—so it’s not being served from your app but instead falling back to being served by Heroku. For example, the contents of that 404 page have this:
<iframe src="//www.herokucdn.com/error-pages/no-such-app.html"></iframe>
That is, it appears to be that request for that URL are never getting handled as expected by your app code at all under any circumstances. So it seems like that’s what you need to fix first.
Pablo Cesar Cordova Morales
BY DAY: I am a web developer, I focus on technologies with Javascript more because I think is rising. BY NIGH: I like to be more dark and be a web pentester to do the internet more sure. FOR FUN: I like to practice algorithms and share my advances in Youtube.
Updated on July 09, 2022Comments
-
Pablo Cesar Cordova Morales almost 2 years
Hi I'm having a problem with CORS.
GENERAL STRUCTURE:
Angular 4 sends data of a Form to my api. Function
saveForm()
is executed when I send information about form contact.app.component.ts
saveForm() { let headers = new Headers(); headers.append('Content-Type', 'application/json'); let requestOptions = new RequestOptions({ headers: headers }); // Encode JSON as string to exchange data to web server. this.data = JSON.stringify(this.myContact); this.http.post('https://pablocordovaupdated.herokuapp.com/api', this.data, requestOptions).subscribe(res => { let result = res.json(); if(result['result'] == 'success') { this.successMessage = true; } } ); }
Here is the root of problem, because I'm using
POST
andContent-Type->application/json
to send my data and by definition It gives me a problem withCORS
-preflighted request
, here more definition: Link about preflighted requestThis meaning that before angular 4 sends the data to the server, this asks to server if it is available to receive my data with the verb
OPTION
, if the response of server is OK then angular 4 sends the data of form.PROBLEM:
In console I always get this error message:
OPTIONS https://pablocordovaupdated.herokuapp.com/api 404 (Not Found)
XMLHttpRequest cannot load https://pablocordovaupdated.herokuapp.com/api. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://pablocordova.herokuapp.com' is therefore not allowed access. The response had HTTP status code 404.
XHR failed loading: POST "https://pablocordovaupdated.herokuapp.com/api".
ERROR Response {_body: ProgressEvent, status: 0, ok: false, statusText: "", headers: Headers…}
WHAT I TRIED:
so far, I understand that problem is because
https://pablocordovaupdated.herokuapp.com/api
doesn't return answer for verbOPTIONS
then I tried to resolve this of 2 ways:
Using cors package CORS package I configured according documentation.
var express = require('express'); var cors = require('cors'); ... var app = express(); ... app.options('/api', cors()); app.post('/api', cors(), function(req, res, next) { // Proccess to send this data via email // and also save in data base(only for learning) });
But I get in console the same error.
Configuring headers manually by Discussion StackOverFlow or Discussion Github
That code is inserted inside every route that I want to write the headers, in my case:
app.post('/api', function(req, res, next) { if (req.method === 'OPTIONS') { console.log('!OPTIONS'); var headers = {}; // IE8 does not allow domains to be specified, just the * // headers["Access-Control-Allow-Origin"] = req.headers.origin; headers["Access-Control-Allow-Origin"] = "*"; headers["Access-Control-Allow-Methods"] = "POST, GET, PUT, DELETE, OPTIONS"; headers["Access-Control-Allow-Credentials"] = false; headers["Access-Control-Max-Age"] = '86400'; // 24 hours headers["Access-Control-Allow-Headers"] = "X-Requested-With, X-HTTP-Method-Override, Content-Type, Accept"; res.writeHead(200, headers); res.end(); } else { // Process to send this data via email // and also save in data base(only for learning) } });
Here the problem is that never execute
console.log('!OPTIONS');
Here also I tried simply:
app.post('/api', function(req, res, next) { console.log('!I AM YOUR FATHER'); ... });
but never is printed. Note: I tried to see this message with
heroku logs
because the whole page is in Heroku.But also doing this I get the same error.
MORE INFORMATION:
When the
.../api
is called, I have this headers**GENERAL**: Request URL:https://pablocordovaupdated.herokuapp.com/api Request Method:OPTIONS Status Code:404 Not Found Remote Address:23.21.185.158:443 Referrer Policy:no-referrer-when-downgrade **RESPONSE HEADERS**: HTTP/1.1 404 Not Found Connection: keep-alive Server: Cowboy Date: Wed, 10 May 2017 04:14:45 GMT Content-Length: 494 Content-Type: text/html; charset=utf-8 Cache-Control: no-cache, no-store **REQUEST HEADERS**: OPTIONS /api HTTP/1.1 Host: pablocordovaupdated.herokuapp.com Connection: keep-alive Pragma: no-cache Cache-Control: no-cache Access-Control-Request-Method: POST Origin: https://pablocordova.herokuapp.com User-Agent: Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.96 Safari/537.36 Access-Control-Request-Headers: content-type Accept: */* Referer: https://pablocordova.herokuapp.com/ Accept-Encoding: gzip, deflate, sdch, br Accept-Language: es-ES,es;q=0.8
QUESTION:
That is my true problem or I am understanding bad? and/or What can I do to solve that problem? and/or Any advices?
Thanks.
-
Pablo Cesar Cordova Morales almost 7 yearsThanks!!! I dont know how I didn't realize of that the true endpoint must be: pablocordova.herokuapp.com/api, thanks again I was trying to solve this problem almost for 2 hours.