I have an API that authenticates the request based on the header fields and then returns a HTML page.
The request to this API has to be made in a way, such that the domain will change from domain1.com to domain2.com (Just like clicking a hypertext).
I cannot use <a>Link</a> because I need to add header fields.
And ajax cannot be used because it does not change controls from domain1.com to domain2.com.
Something like this did not make sense at all...
$.ajax({
// Use ajax to authenticate
...
success : function(path){
// Load the path for domain change
location.assign(path);
// Even this request should have a header field
},
...
})
I need the functionalities of both(changing domains and header usage) in a single request - if possible or at the least with 2 requests.
Any ideas to do this?
In order to send HTTP request with credential in header, and "change domain" when it is successful, you can use JSON response with 302 code and Location -- just a convention, browser behaviour won't be triggered.
An example response:
HTTP response code: 200 OK
HTTP response body:
{
status: 302,
location: 'domain2.com/result'
}
The Ajax code would look like:
$.ajax({
// Use ajax to authenticate, with credential in HTTP header
...
success: function(result){
if (result.status === 302) {
window.location = result.location;
}
},
...
})
2 HTTP requests will be used. One for Ajax, and another for the redirection.
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!!
I am sending data in json format from javascript using XMLHttpRequest and receiving data at node.js file as following
client.js
$.ajax({
type: "POST",
dataType: 'json',
data: JSON.stringify(Idata),
url: AjaxURL,
success: function (result) {
return true;
}
});
server.js
var http = require('http');
console.log("server initialized");
var server = http.createServer(function (req, response) {
req.on('data', function (data) {
var d = JSON.parse(data);
console.log("data : " + d.OperationType);
});
req.on('end', function () {
response.end();
});
}).listen(3000);
Now i successfully got the value of operationtype but the at client browser this error is showing:
XMLHttpRequest cannot load http://localhost:3000/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access.
The primary problem is that you are making a "GET" request. A data payload/HTTP request body cannot be uploaded with an XMLHttpRequest "GET" request. See the specification of XMLHttpRequest: "If stored method is GET act as if the data argument is null."
In order to send data, you should make a "POST" request, in this case:
xmlhttp.open("POST", AjaxURL, true);
In response to updated question:
For security reasons, your AJAX request will not be allowed to access your server hosted at localhost:3000 unless the AJAX request is initiated from a page served by localhost:3000 OR you tell your server to allow "cross-origin" requests. The latter can be accomplished by adding a line like this to your server:
response.setHeader("Access-Control-Allow-Origin", "*");
This sets a header that tells the browser to allow AJAX requests to localhost:3000 even if the request is initiated from a page that was not served by localhost:3000.
Please do the following:
In client.js, output the value Idata(using console.log) right before sending it.
Use the 'Network' tab in Chrome(or equivalent in your favorite browser) to check what is actually being sent.
In server.js, output the value data(using console.log) right after recieving it.
That will probably give you a clue as to where it went wrong, which will help you determine your next course of action. If you still don't know how to proceed, update the question and I will update my answer.
What I can say right now based on my (very lacking) knowledge of node.js, is that if the variable data is being treated as an object, store += data; is not a good idea, as that would mean you are trying to add an object to an (empty) string.
(Probably resulting in the object returning "[object Object]", or some such)
I noticed that my Angular is creating OPTIONS request also before each POST request.
I'm using custom API Service for HTTP request handling.
app.service('ApiService', function ($http) {
/**
* Process remote POST request to give URL with given params
* #param {String} url
* #param {String} POST params
* #return {JSON} response from server
*/
this.doHttpRequest = function (type, url, params) {
return $http({
method: type,
url: url,
data: params,
timeout: 5000,
headers: {
"Content-Type": "application/json",
}
});
}
});
Question is:
How can i disable it (which config values put where)?
Is OPTIONS good for something?
I think that is it something like "Handshake between 2 servers".
Angular version: 1.2.15
Thanks for any advice.
That isn't Angular. It is XMLHttpRequest.
Complex cross-origin HTTP requests require a pre-flight OPTIONS request so the browser can find out if the other server will grant permission for the Ajax request.
Short of making sure the Ajax request you are making is simple, there is no way to prevent the OPTIONS request.
A simple request:
Only uses GET, HEAD or POST. If POST is used to send data to the server, the Content-Type of the data sent to the server with the HTTP POST request is one of application/x-www-form-urlencoded, multipart/form-data, or text/plain.
Does not set custom headers with the HTTP Request (such as X-Modified, etc.)
Unless you wish to give up sending JSON, you can't use a simple request for this.
I run into a close situation, need to get JSON with Cross-site HTTP requests and fixed it by using jQuery request, instead of angularjs
$.getJSON('http://www.host.com/test.json', '', function (data) {
if (meta) {
console.log("jq success :" + JSON.stringify(data));
}
console.log("jq success, but empty JSON");
})
.done(function () {
console.log("jq second success");
})
.fail(function (data) {
console.log("jq fail " + JSON.stringify(data));
})
.always(function () {
console.log("jq complete");
});
I used Amazon S3 CDN, and OPTIONS requests didn't work well with it, so this saved me. The answer from S3 server was:
This distribution is not configured to allow the HTTP request method that was used for this request. The distribution supports only cachable requests.
I use JS automation framework for testing iOS application. In the middle of a test I need to create POST request to server to some money to user and then verify that changes are reflected in UI.
Request looks like: wwww.testserver.com/userAddMoney?user_id=1&amount=999
but to authorize on server I need to pass special parameters to Header of request:
Headers: X-Testing-Auth-Secret: kI7wGju76kjhJHGklk76
Thanks in advance!
So basically you want to set the header of a POST request. You can do it only if its an ajax request (You can't set headers for a normal html form submission request). Here is a way to set headers for an ajax request:
var request = new XMLHttpRequest();
request.onreadystatechange= function () {
if (request.readyState==4) {
//handle response
}
}
request.open("POST", "url", true);
request.setRequestHeader("header", "blah blah");
request.setRequestHeader("Accept","text/plain");
request.send("post data");