We Keep Coding

POST going as OPTIONS in firebase node js http request [duplicate]

I am working on an internal web application at work. In IE10 the requests work fine, but in Chrome all the AJAX requests (which there are many) are sent using OPTIONS instead of whatever defined method I give it. Technically my requests are "cross domain." The site is served on localhost:6120 and the service I'm making AJAX requests to is on 57124. This closed jquery bug defines the issue, but not a real fix.
What can I do to use the proper http method in ajax requests?
Edit:
This is in the document load of every page:
jQuery.support.cors = true;
And every AJAX is built similarly:
var url = 'http://localhost:57124/My/Rest/Call';
$.ajax({
url: url,
dataType: "json",
data: json,
async: true,
cache: false,
timeout: 30000,
headers: { "x-li-format": "json", "X-UserName": userName },
success: function (data) {
// my success stuff
},
error: function (request, status, error) {
// my error stuff
},
type: "POST"
});

Chrome is preflighting the request to look for CORS headers. If the request is acceptable, it will then send the real request. If you're doing this cross-domain, you will simply have to deal with it or else find a way to make the request non-cross-domain. This is why the jQuery bug was closed as won't-fix. This is by design.
Unlike simple requests (discussed above), "preflighted" requests first
send an HTTP request by the OPTIONS method to the resource on the
other domain, in order to determine whether the actual request is safe
to send. Cross-site requests are preflighted like this since they may
have implications to user data. In particular, a request is
preflighted if:
It uses methods other than GET, HEAD or POST. Also, if POST is used to send request data with a Content-Type other than
application/x-www-form-urlencoded, multipart/form-data, or text/plain,
e.g. if the POST request sends an XML payload to the server using
application/xml or text/xml, then the request is preflighted.
It sets custom headers in the request (e.g. the request uses a header such as X-PINGOTHER)

Based on the fact that the request isn't sent on the default port 80/443 this Ajax call is automatically considered a cross-origin resource (CORS) request, which in other words means that the request automatically issues an OPTIONS request which checks for CORS headers on the server's/servlet's side.
This happens even if you set
crossOrigin: false;
or even if you ommit it.
The reason is simply that localhost != localhost:57124. Try sending it only to localhost without the port - it will fail, because the requested target won't be reachable, however notice that if the domain names are equal the request is sent without the OPTIONS request before POST.

I agree with Kevin B, the bug report says it all. It sounds like you are trying to make cross-domain ajax calls. If you're not familiar with the same origin policy you can start here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Same_origin_policy_for_JavaScript.
If this is not intended to be a cross-domain ajax call, try making your target url relative and see if the problem goes away. If you're really desperate look into the JSONP, but beware, mayhem lurks. There really isn't much more we can do to help you.

If it is possible pass the params through regular GET/POST with a different name and let your server side code handles it.
I had a similar issue with my own proxy to bypass CORS and I got the same error of POST->OPTION in Chrome. It was the Authorization header in my case ("x-li-format" and "X-UserName" here in your case.) I ended up passing it in a dummy format (e.g. AuthorizatinJack in GET) and I changed the code for my proxy to turn that into a header when making the call to the destination. Here it is in PHP:
if (isset($_GET['AuthorizationJack'])) {
$request_headers[] = "Authorization: Basic ".$_GET['AuthorizationJack'];
}

In my case I'm calling an API hosted by AWS (API Gateway). The error happened when I tried to call the API from a domain other than the API own domain. Since I'm the API owner I enabled CORS for the test environment, as described in the Amazon Documentation.
In production this error will not happen, since the request and the api will be in the same domain.
I hope it helps!

As answered by #Dark Falcon, I simply dealt with it.
In my case, I am using node.js server, and creating a session if it does not exist. Since the OPTIONS method does not have the session details in it, it ended up creating a new session for every POST method request.
So in my app routine to create-session-if-not-exist, I just added a check to see if method is OPTIONS, and if so, just skip session creating part:
app.use(function(req, res, next) {
if (req.method !== "OPTIONS") {
if (req.session && req.session.id) {
// Session exists
next();
}else{
// Create session
next();
}
} else {
// If request method is OPTIONS, just skip this part and move to the next method.
next();
}
}

"preflighted" requests first send an HTTP request by the OPTIONS method to the resource on the other domain, in order to determine whether the actual request is safe to send. Cross-site requests
https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

Consider using axios
axios.get( url,
{ headers: {"Content-Type": "application/json"} } ).then( res => {
if(res.data.error) {
} else {
doAnything( res.data )
}
}).catch(function (error) {
doAnythingError(error)
});
I had this issue using fetch and axios worked perfectly.

I've encountered a very similar issue. I spent almost half a day to understand why everything works correctly in Firefox and fails in Chrome. In my case it was because of duplicated (or maybe mistyped) fields in my request header.

Use fetch instead of XHR,then the request will not be prelighted even it's cross-domained.

$.ajax({
url: '###',
contentType: 'text/plain; charset=utf-8',
async: false,
xhrFields: {
withCredentials: true,
crossDomain: true,
Authorization: "Bearer ...."
},
method: 'POST',
data: JSON.stringify( request ),
success: function (data) {
console.log(data);
}
});
the contentType: 'text/plain; charset=utf-8', or just contentType: 'text/plain', works for me!
regards!!

Logon to a website and the use of jQuery and JSON

I have a information screen solution where a computer has a locally stored HTML page which loads an external template (including the functional Javascript etc.) into the browser.
The reason that this page is local is that if the computer is started when there is no network connection, or e.g. the server is down, it will retry over a period of time.
However, sometimes this computer needs to logon, so I pass the logon credentials and a cookie is based back.
<script type="application/javascript">
url = "http://192.168.1.27:9000/carousel/1/template?user=test&password=test";
function loadTemplate() {
$( "#error" ).html("Loading...");
$( "#message" ).html("");
$('body').load(url, function( response, status, xhr ) {
if ( status == "error" ) {
$( "#error" ).html("<h3>Sorry but there was an error:<br/></font></h3>" + " Description: " + xhr.statusText + " (" + xhr.status + ")");
}
});
}
</script>
However, on subsequent requests (which come as part of this template load) this cookie does not seem to be passed on.
I tried loading using:
$.ajax("${dataUrl.raw()}",
{
xhrFields: {
withCredentials: true
}, crossDomain: true
}).done(function(data) {
});
But his results the following error:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://192.168.1.27:9000/carousel/1/data.json. (Reason: CORS header 'Access-Control-Allow-Origin' does not match '*').
Loading it without the xhrFields loads ok, but the user is not logged on, suggesting the cookie is not passed in the request.
I could optionally include the logon credentials in each data request, but I would prefer just to do it once on startup and give use the cookie with a long lifespan.
[edit:]
I tried to add different values for the 'Access-Control-Allow-Origin', but passing in 'file://' which seems the origin in the case of the call from the local file system does not work as to is said to not match, or chromium says the t'null' is not allowed (which technically I think it is because I have nothing after 'file://'.)

In a CORS request the server (http://192.168.1.27:9000) needs to allow the use of sending cookies or else an error will be thrown. To enable this the server needs to respond with the following header
Access-Control-Allow-Credentials: true
You can read more about this header here: https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Access-Control-Allow-Credentials
In addition, can you serve this page from say localhost? I'm not sure how file:// plays with the CORS headers.
Also, make sure you server is passing along this header
Access-Control-Allow-Origin: *
The * will allow any website but you can scope it to just a single domain.

node js server safari client connection fails

I have a simple html-js<-ajax->nodejs server loop as a test base for my app
core.
It works on windows 8 with browsers: IE11, Chrome45,firefox40,opera31.. and fails on safari 5.1.7
Here is the client code
<html>
<head>
<meta charset="UTF-8">
<script language="javascript">
var url="http://127.0.0.1:1001";
function sendData(rawData) {
var strout="";
var data=encodeURIComponent(rawData);
var xhr = new XMLHttpRequest();
xhr.open('POST', url, true);
xhr.onreadystatechange=function(){
if (xhr.readyState==4 && xhr.status==200){
strout=decodeURIComponent(xhr.responseText);
document.getElementById("opResult").innerHTML="srv-sent "+strout
}
}
xhr.send(data);
alert("sent = "+rawData)
}
//+++++++++++++++++++
function send(){
var v=document.getElementById("ta").value;
sendData(v);
}
</script>
</head>
<body>
<input type="button" value="send" onclick="send()">
<br>
<textarea id="ta" cols=40 rows=10> </textarea>
<br>
<div id="opResult"></div>
</body>
</html>
and here is the server code:
var http = require('http');
http.createServer(function(request, response){
var postData="",cmdQ=[],resout=[];
if (request.method == 'POST') {
request.on('data', function (data) {
postData += data;
});
}
console.log("SRV got data:"+postData);
request.on('end', function () {
console.log("got post: "+decodeURIComponent(postData));
resout="SRVRep: got "+decodeURIComponent(postData);
response.writeHead(200, {
'Content-Type': 'text/html',
'Access-Control-Allow-Origin' : '*',
'Access-Control-Allow-Headers':'Origin, X-Requested-With, Content-Type, Accept'
});
response.end(encodeURIComponent(resout), "utf-8");
console.log("sent "+resout);
post_data="";
});
}).listen(1001,'127.0.0.1');
console.log("server initialized to port 1001");
To make the web simulation complete, I am running (npm installed ) http-server (port 8080) and the client is a link in the index.html.
The simulation is simple; on the client type something in the text-box, click send, and you should get the
response showing in the opResult div. And it does, in everything except safari.
Debug code shows safari sends a blank message... CORS problem?!?
Safari experts please advise.

(summary at bottom)
Problem
I need a static file server (http-server :8080) serving up the app,
and an app file/data storage server :1001.
This is your current model: The client accesses static data and the app/data as two different origins (wiki):
(current model: client receives content from two origins)
http-server:8080 ─┐ ┌─> node:1001
└─> client <─┘
option #1: Reverse Proxy
A much more popular design is the "reverse-proxy" (nginx, apache), in which the http-server serves static data and acts as an interface to your node app. This way, your both content types come from the same origin and port, but still see performance gains:
(reverse-proxy model: everything comes from localhost:8080)
node:1001 <─────> apache or nginx:8080 <──┐
└─> client
...but you're not using nginx or apache. No worries. There's an NPM package to do just this with the stack you're already using here. See my pastebin for an example.
This model has the added advantage of providing all the configurability of your http-server to your node app, giving you advanced security and optimization options such as request caching.
...localhost!=127.0.0.1 and can't handle IO to different ports...
This is officially a CORS violation, but it wasn't always this way. Check out MDN's same origin policy documentation. This fairly recent policy necessarily mitigates problematic cross-site scripting attacks.
option #2: Cross Origin Sharing Standard (w3)
That being said, there is an officially sanctioned way to make ajax requests across origins, but the "other" domain must know and accept your traffic. There's two ways of achieving this:
Simple GET and POST requests can be allowed by adding the Access-Control-Allow-Origin: * header to your responses in your node application.
POST requests with a content-type other than application/x-www-form-urlencoded, multipart/form-data, or text/plain need a preflight request.
Summary:
You can avoid violating the browser's same-origin policy either of two ways:
By implementing a reverse-proxy, so both your static and dynamic content come from the same place (in your case, localhost:8080)
By adding the Access-Control-Allow-Origin: * header to your responses in node, or in rare cases, preflighting the request.

sending email via XMLHttpRequest no response

I tried to manage editing the template but I'm still not able to send email, I'm creating an subscription box, here's my code so far:
var x= document.getElementById("emailtxt").value;
var uploadFormData = new FormData();
uploadFormData.append("email", x);
var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://realfashionstreet.com/Emailme.php',true);
xhr.onload=function() {
alert(this.status);
if(this.status==200) {
console.log('data sent');
alert(xhr.responseText);
} else {
//alert(this.status);
alert('Something Went Wrong, Try Again Later!');
}
};
/*xhr.addEventListener("load", function () {
document.getElementById('skm_LockPane').className= 'LockOff';
}, false);*/
xhr.send(uploadFormData);
return false;
}
Here's the box I'm getting :
http://realfashionstreet.com
It's just not showing any error or any response and also not sending email, but I think that site template doesn't allow to use php files if anyone have any other idea on how to send email using javascript…
Thanks

You can't for security reasons. See the same origin policy for JavaScript.
There are some workarounds that exploit browser bugs or corner cases, but using them is not recommended.
The best approach is having a server-side proxy that receives Ajax requests, and in turn, sends HTTP requests to other servers. This should be carefully implemented by sanitizing input and whitelisting the types of requests that are sent, and the servers that are contacted.

You're missing the www. in the request, this is causing a cross domain policy violation. This is the error I see in the console.
XMLHttpRequest cannot load http://realfashionstreet.com/Emailme.php. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.realfashionstreet.com' is therefore not allowed access. Default.asp:1
Ensure the URLs for the page and the XHR request have the exact same domains. Including subdomains like www

XMLHttpRequest cross domain throws error

I made a 'voting' API for a topsite for the sites registered to use.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
var id = 1;
$(document).ready(function(){
$.getJSON("http://mysite.com/index.php?page=vote", { id: id, hasVoted: 'unknown' }, function(data) {
if(data == 2) {
window.location.replace("http://mysite.com/index.php?page=vote&id=" + id);
}
});
});
</script>
Basically, I give the user's their ID and then they put that code in their files.
The site returns a number and upon that, it redirects the user or not to voting.
So, testing on localhost that code throws this error:
XMLHttpRequest cannot load http://mysite.com/index.php?page=vote&id=1&hasVoted=unknown. Origin http://localhost is not allowed by Access-Control-Allow-Origin.
If I use this code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
var id = 1;
$(document).ready(function(){
$.getJSON("http://mysite.com/index.php?page=vote&callback=?", { id: id, hasVoted: 'unknown' }, function(data) {
if(data == 2) {
window.location.replace("http://mysite.com/index.php?page=vote&id=" + id);
}
});
});
</script>
Then it does nothing. It throws no error. ( While data is supposed to be equal to 2 ( When checking that URL directly, it returns 2 ) ).
And, if I try to do a little test, and do alert(data); It throws nothing still.
I'm completely clueless about this. Anything will help.

Well known problem, the origin control of the browser:
A browser doesn't allow you to make ajax requests to 'cross-origin' domains by default. Cross origin means, that either the port or host is different. Therefore you can't send requests to site http://siteB/ while the script to make the requests is hosted on site A.
Simple solution would be to host everything on one domain and make the url relative. If that's not possible, you have to find another way no make cross-origin calls.
Some examples:
JSONP (only GET)
CORS (work's very good with modern browser)
include an ifram + use PostMessage between the windows
proxy script
EDIT:
What I would do, is first allow your API-SERVER some stuff, by setting these headers:
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: POST, GET, OPTIONS");
header("Access-Control-Allow-Headers: Authorization");
Be aware, that this isn't working properly with the Internet Explorer, so you have to use: XDomainRequest. But this doesn't allow you sending headers. Please see my question a couple days ago, if you have to send headers cross-origin