We Keep Coding

AngularJs - Server throwing exception''XMLHttpRequest cannot load the "URL" Response for preflight is invalid (redirect)'

What is the reason the server is returning object as 'undefined' and 'XMLHttpRequest cannot load the "URL" Response for preflight is invalid (redirect).
Flow of app - its just a normal post service sending document details to the server in return should return an object holding various parameters, but its returning 'undefined'
The service for posting the document
fileUpload: {
method: 'POST',
url: config.apiPath + 'employee/service/pushRecords', //this is the URL that should return an object with different set of parameters (currently its returning Error error [undefined])
isArray: false,
params: {},
headers: {
'content-type': undefined
}
},
above service i have used after creating formdata w.r.t document
function registerFormdata(files, fieldName) {
files = files || [];
fieldName = fieldName || 'FileSent';
var returnData = new FormData();
_.each(files, function (file, ind) {
returnData.append(fieldName,file);
});
return returnData;
}
now this is the controller where these services are used
function sendFilesToServer() {
var formData = employeePushService.registerFormdata(directive.dropZoneFile.fileToUpload);
return docUploadService.fileUpload(formData)
.then(function(document) {
// Extra actions but here the server should be returning an object with set of parameters but in browser console its Error [undefined]
}).catch(logger.error);
}

Assuming that the URL target in yout post is correct, it seems that you have a CORS problem, let me explain some things.
I don't know if the server side API it's developed by yourself, if it is, you need to add the CORS access, your server must return this header:
Access-Control-Allow-Origin: http://foo.example
You can replace http://foo.example by *, it means that all request origin will have access.
First, you need to know that when in the client you make an AJAX CORS request, your browser first do a request to the server to check if the server allow the request, this request is a OPTION method, you can see this if, for example in chrome, you enable the dev tools, there, in the network tab you can see that request.
So, in that OPTIONS request, the server must set in the response headers, the Access-Control-Allow-Origin header.
So, you must check this steps, your problem is that the server side is not allowing your request.
By the way, not all the content-type are supported in CORS request, here you have more information that sure will be helpfull.
Another link to be helpfull for the problem when a 302 happens due to a redirect. In that case, the POST response must also include the Access-Control-Allow-Origin header.

Accessing custom http response headers in angularjs

I am trying to access the header 'error-detail' as you can see in the browser network inspector (link above), the header gets returned. Server-wise I have also added the custom header to the 'Access-Control-Expose-Headers' to allow cross-domain requests as this was suggested to be the fix on other questions.
Below is the request to the server along with the success/error callbacks.
this.signon = function (request, onComplete, onError) {
console.log("Calling server with 'login' request...");
return $http.post("http://localhost:8080/markit-war/services/rest/UserService/login/", request)
.then(onComplete, onError);
};
var onLookupComplete = function(response) {
if (response.data.username)
{
//If user is returned, redirect to the dashboard.
$location.path('/dashboard');
}
$scope.username = response.data.username;
};
var onError = function(response) {
$scope.error = "Ooops, something went wrong..";
console.log('error-detail: ' + response.headers('error-detail'));
};
When I try access the response header as seen below:
console.log(response.headers());
console.log('error-detail: ' + response.headers('error-detail'));
This only outputs:
content-type: "application/json"
error-detail: null
Is there a reason why the error-detail header is not being mapped over to the response object?

I think you are on the right track. To have access to custom headers, your server needs to set this special Access-Control-Expose-Headers header, otherwise your browser will only allow access to 6 predefined header values as listed in the Mozilla docs.
In your screenshot such a header is not present in the response. You should have a look at the backend for this cors header to also be present in the response.

This is a CORS Issue. Because this is a cross-origin request, the browser is hiding most ot the headers. The server needs to include a Access-Control-Expose-Headers header in its response.
The Access-Control-Expose-Headers1 response header indicates which headers can be exposed as part of the response by listing their names.
By default, only the 6 simple response headers are exposed:
Cache-Control
Content-Language
Content-Type
Expires
Last-Modified
Pragma
If you want clients to be able to access other headers, you have to list them using the Access-Control-Expose-Headers header.
For more information, see MDN HTTP Header -- Access-Control-Expose-Headers

Ajax - "Access-Control-Allow-Origin" error in ember.js

I would like to know your opinion on the issue in this simple code in ajax, which has the problem Access-Control-Allow-Origin, already tried several ways defenir the ember "Access-Control-Allow-Origin": "* " but without success, so I wonder if someone with the same problem found a solution.
I use the url address localhost: 4200 and already tried with a subdomain of firebase in both cases the error was always the same.
The ajax request:
import Ember from 'ember';
import { isAjaxError, isNotFoundError, isForbiddenError } from 'ember-ajax/errors';
export default Ember.Controller.extend({
ajax: Ember.inject.service(),
actions: {
code() {
var cliente = '***';
var redirectUri = 'http://localhost:4200/teste';
var client_secret = '***';
var code = '***';
var grant_type = 'authorization_code';
var data =
"client_id=" + cliente +
"&redirect_uri=" + encodeURIComponent(redirectUri) +
"&client_secret=" + client_secret +
"&code=" + code +
"&grant_type=" + grant_type;
this.send('post', data)
},
post(data) {
this.get('ajax').post("https://login.live.com/oauth20_token.srf", {
method: 'POST',
headers: {
"Access-Control-Allow-Origin": "*",
"Content-Type": "application/x-www-form-urlencoded",
},
data: data,
dataType: 'JSON',
});
},
}});
My content Security Policy:
contentSecurityPolicy: {
'connect-src': "'self' http://localhost:4200 https://*.googleapis.com https://login.live.com/oauth20_token.srf",
'child-src': "'self' http://localhost:4200",
'script-src': "'self' 'unsafe-eval' https://login.live.com",
'img-src': "'self' https://*.bp.blogspot.com https://cdn2.iconfinder.com http://materializecss.com https://upload.wikimedia.org https://www.gstatic.com",
'style-src': "'self' 'unsafe-inline' ",
},
The error is:
XMLHttpRequest cannot load https://login.live.com/oauth20_token.srf. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access.

This doesn't actually seem like an Ember related question. The problem you are having is exclusively backend related. For ajax requests to work backend should serve the proper 'Access-Control-Allow-Origin' header in response. Otherwise your browser would not accept such responses and throw an error that you are seeing. It's not Ember related in any way it's just how browsers work.
Now to fix this issue you would have to add the proper client server name to your backend 'Access-Control-Allow-Origin' headers. I.e. if you are going to serve your Ember app from https://example.com that is what you need to add to 'Access-Control-Allow-Origin' header.
So let's assume you just want the ways to bypass this messages.
There are plenty of browser extensions that would disable CORS check in your browser for development. This way would work just fine if you are using localhost but plan to move to real server in the future and have a way to actually set 'Access-Control-Allow-Origin' header on backend.
Let's assume you don't have any way to change the backend header now but desperately want to test how the client app would work on your remote https://example.com. You would have to setup a remote server to proxy all your requests to the target backend modifying the headers that are sent in response so your browser would accept them. This way you don't have to use any chrome extensions to disable CORS.
One of the simplest ways to setup such server would be to use the following package - https://www.npmjs.com/package/express-http-proxy . The configuration for your case would be pretty straightforward.
sample express app:
var proxy = require('express-http-proxy');
var app = require('express')();
app.use('/', proxy('www.example.com', {
intercept: function (rsp, data, req, res, callback) {
res.append('Access-Control-Allow-Origin', '*');
callback(null, data);
}}));
app.listen(3000, function () {
console.log('listening on port 3000');
});

Accessing response headers on CORS request

I'm using the fetch API to make a cross-domain request similar to the below snippet
window.fetch('http://data.test.wikibus.org/magazines', { method: 'get'})
.then(function(response) {
var linkHeader = response.headers.get('Link');
document.querySelector('#link-header').innerText = 'The Link header is: ' + linkHeader;
});
<span id="link-header"></span>
As you see the Link header (and some other headers too) is not accessible although it is returned in the response. I assume that's a CORS issue, because on local requests all headers are accessible.
Is that by design? Is there a way around that problem?

The resource you are requesting most likely lacks a Access-Control-Expose-Headers header that contains Link as value.
See https://fetch.spec.whatwg.org/#http-access-control-expose-headers and see https://fetch.spec.whatwg.org/#concept-filtered-response-cors for the details of which headers get filtered out of a CORS response.

ajaxPrefilter with Backbone

I develop a project using backbone, underscore, require .js and REST API.
I've got error Cross-Origin Request Blocked The Same Origin Policy disallows reading the remote resource at...
NOTE : I've configured Access-Control-Allow in server side already. Still, the error still appear.
I found a solution, using ajaxPrefilter, then here I've tried in my project :
router.js :
start: function() {
Backbone.history.start({pushState: true});
},
initialize: function() {
$.ajaxPrefilter( function( options, originalOptions, jqXHR ) {
options.url = options.url;
});
}
Here is my backbone view :
var _wl = new MyModel();
_wl.save(_item,{
success: function(res) {
console.log(res);
}
});
I still got `Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://example.com/api/MyWebs. This can be fixed by moving the resource to the same domain or enabling CORS.
Could any one tell me what did I wrong here?
Any helps and ideas would be appreciated.

Can you check if the reponse from http://example.com/api/MyWebs carries back correctly configured CORS headers like "Access-Control-Allow-Origin" ,""Access-Control-Allow-Headers",""Access-Control-Allow-Methods" e.t.c. This can be done by having the dev tools open in chrome/firefox and inspecting the response headers.
Here are a couple of things to ensure if CORS has been configured properly:
Response Headers:
Check if you have configured the Access-Control-Allow-Origin header properly. Initially you can set the value of it to "*" for testing purpose and then later on specify the specific host.
If you are using custom headers make sure that you have added them to the allowed list using "Access-Control-Allow-Headers". The custom headers names are specifed as a comma separated list.
If you want to support PUT,DELETE and POST requests with certain media types, then make sure that you add "Access-Control-Allow-Methods".
Server Side:
Check if you have added code to handle the pre-flight request that comes with OPTIONS method.
EG:
if(containerRequestContext.getRequest().getMethod().equalsIgnoreCase("OPTIONS")) {
// code to check if the request is made from a allowed origin and if everything is fine abort with success / forbidden.
}
Check if each response sent from the server is made with the above response headers correctly set.
EG:
Language/Framework: Jersey Framework,Java
Each response will pass thru the below Filter and the following response headers will be added to them.
#PreMatching
#Provider
public class SecurityResponseFilter implements ContainerResponseFilter {
private static final Logger LOGGER = Logger.getLogger(SecurityResponseFilter.class);
#Override
public void filter(ContainerRequestContext containerRequestContext,ContainerResponseContext containerResponseContext) throws IOException {
try {
containerResponseContext.getHeaders().add("Access-Control-Allow-Origin", "*");
containerResponseContext.getHeaders().add("Access-Control-Allow-Methods", "GET,POST,PUT,DELETE");
containerResponseContext.getHeaders().add( "Access-Control-Allow-Headers", "tk_a,tk_r" );
} catch (Exception e) {
LOGGER.error("Error occured while processing request.",e);
throw e;
}
}
}
In the client side if you need to send custom headers, you could do it as follows :
$.ajaxPrefilter(function(options,originalOptions,jqXHR) {
jqXHR.setRequestHeader("tk_a",$.cookie("tk_a"));
jqXHR.setRequestHeader("tk_r",$.cookie("tk_r"));
});