We are trying to get our Office Excel add-in to contact one of our own Web API services so it can send and receive data from it. For the request to be authorised we must fill out the Authorization header attribute. This is how we are doing the request, which works perfectly well in all of our normal web applications.
this.LoginAuth = function (authString) {
$http.defaults.headers.common.Authorization = 'Basic ' + authString;
return $http({
url: MainFactory.GetWebAPILocation() + '/API/User/AddInLoginAuth',
dataType: 'json',
method: 'POST',
data: {},
headers: {
"Content-Type": "application/json"
}
});
}
However, when the request is made through the add-in the Authorization attribute has been cleared down causing our request to fail. Is this clearing of the attribute being done by Excel? And if so, is there a way in which we can stop it?
Turns out this was a CORS issue in our Web API service.
Related
Ext.Ajax.request({
url: 'https://dev-516799.oktapreview.com/api/v1/users?limit=200',
method: 'GET',
Accept: 'application/json',
'Access-Control-Allow-Origin': '*',
headers: {
'Authorization': 'SSWS Token'
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': '*',
//'Access-Control-Allow-Methods': 'GET'
},
scope: this,
cleanup: function () {
view.setLoading(false);
},
success: function (response) {
}
But I am getting error as "Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource"
Access-control: Allow-Origin headers are a security feature that has to be enabled in the reply from the server, not in the request to the server.
Examples: ExtJS - Adding headers to AJAX store
In your case, you are at the mercy of Okta. They have some APIs that support CORS if you provide them with the allowed URLs, and others that don't. You cannot access Okta APIs directly from your JavaScript code unless the APIs are marked as CORS-enabled and you have added your URL to the list of CORS-enabled URLs in the Okta admin panel. If you need unmarked APIs or access from arbitrary URLs, you may have to create a wrapper in your own server backend that relays the requests from your frontend to the Okta server.
Trying to connect Ionic app to server.
I am not getting proper response from server for $http request, I am using PHP back-end,
The same API is working in POSTMAN, after changing the content type to form-data
Below is the code,
var req={
url: 'url',
method: "POST",
headers: {
'Content-Type': 'multipart/form-data',
'Accept': 'text/plain'
},
data: {
username: "syam",
password:"syamnath123"
}
}
Response from server
{"data":{"status":"Failed","meta-info":[]},"status":200,"config":{"method":"POST","transformRequest":[null],"transformResponse":[null],"url":"url","headers":{"Content-Type":"multipart/form-data","Accept":"text/plain"},"data":{"username":"syam","password":"syamnath123"}},"statusText":"OK"}
The Username and password is correct, Tested POSTMAN(Started giving expected response when i changed content type to form-data, before it was giving status failed)
I thought of cross domain,then I have build release and tested from my phone, I am getting the same error.
I cannot check the server side code as the php code is handling by some one in different company
Please help.
When sending request with header in angulajs. The request is:
$http.get('http://dev.oms.fetchr.us/order/',{
headers:{
'Authorization': 'Token ' + token
}
})
The request is converted to option request. If I remove the authorization token it works as get request, but returns 403 error.
After so much time and reading I got this about preflight requests.
https://developer.mozilla.org/en-US/docs/Web/HTTP/Server-Side_Access_Control
I also tried with adding headers define here. But results gives error.
If I edit the request in mozilla console and resend the request then it works. And I am able to hit the api.
I also tried this: How does Access-Control-Allow-Origin header work?
to allow origin.but as i running on local server.It is not working too.
It is working fine in JQuery. But not with angularjs please help how to send get request in angularjs with express server on cross-origin.
For making get request with header use this
$http({
"method": "GET",
"url": url + "",
"data": '',
"headers": { 'Authorization': Your Token },
"Content-Type": "application/x-www-form-urlencoded ; charset=UTF-8"
})
As the title suggest, I need to pass an authorization token but when I check the network console, I'm getting a 403 because the accept and authorization isn't there. NOTE: I removed my authorization token for this example
$http({
url: 'http://api.stubhub.com/search/catalog/events/v2?title="san"',
dataType: 'json',
method: 'GET',
data: '',
headers: {
"Content-Type": 'application/json',
"Authorization": 'Bearer {token}'
}
}).success(function(response){
$scope.searchResponse = response;
}).error(function(error){
$scope.error = error;
});
This seems like correct syntax? What's wrong here?
EDIT: added the XHR screenshot
EDIT: 2. Here's my network traffic, HAR via paste bin:
http://pastebin.com/fiFngZSy
setting custom headers on XHR requests triggers a preflight request.
I bet you're seeing an OPTIONS request without the Authorization header, and a corresponding response whose Access-Control-Allow-Headers header value is not listing Authorization, or the API doesn't even allow unauthorized OPTIONS requests.
I don't know the stubhub api, but does it return CORS-compliant responses?
I am facing a weird issue. I am running my angularjs app in nodejs server locally which calls a POST API from my app located on Google App Engine. The API is configured with all CORS headers required as follows:
def post(self):
self.response.headers.add_header("Access-Control-Allow-Origin", "*")
self.response.headers.add_header("Access-Control-Allow-Methods", "POST,GET,PUT,DELETE,OPTIONS")
self.response.headers.add_header("Access-Control-Allow-Headers", "X-Requested-With, content-type, accept, myapp-domain")
self.response.headers["Content-Type"] = “application/json; charset=utf-8”
GET requests to the API work without issues.
POST requests to the API work but ONLY when I send the post data as a 'string of params' and NOT when post data is sent as an object which is the right way to do. Eventually I need to be able to upload pictures using this API so the first solution below might not work for me. Please help!
METHOD 1: This works:
postMessageAPI = "https://myapp-qa.appspot.com/message";
var postData = "conversationid=1c34b4f2&userid=67e80bf6&content='Hello champs! - Web App'";
var postConfig = {
headers: {
"MYAPP-DOMAIN" : "myapp.bz",
'Content-Type': 'application/json; charset=UTF-8'
}
};
$http.post(postMessageAPI, postData, postConfig).
success(function(data){
$log.log("POST Message API success");
}).
error(function(data, status) {
$log.error("POST Message API FAILED. Status: "+status);
$log.error(JSON.stringify(postData));
});
METHOD 2: This fails:
postMessageAPI = "https://myapp-qa.appspot.com/message";
var postData = ({
'conversationid' : '1c34b4f2',
'userid' : '67e80bf6',
'content' : 'Hello champs! - Web App'
});
var postConfig = {
headers: {
"MYAPP-DOMAIN" : "myapp.bz"
'Content-Type': 'application/json; charset=UTF-8'
}
};
$http.post(postMessageAPI, postData, postConfig).
success(function(data){
$log.log("POST Message API success");
}).
error(function(data, status) {
$log.error("POST Message API FAILED. Status: "+status);
$log.error(JSON.stringify(postData));
});
When I use METHOD 2 it fails with the following error in the console:
XMLHttpRequest cannot load https://myapp-qa.appspot.com/message.
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'http://0.0.0.0:8000' is therefore not allowed access.
Please let me know if you have any solution. Thanks in advance.
The issue is most likely with Angular sending a pre-flight OPTIONS request to check the access headers from the server. I am not sure how OPTIONS requests are handled in your API, but I am betting these headers are not being added. I suggest installing Fiddler to monitor the actual requests to see what is going on with the headers. You may only be adding them to your POST responses.
See this answer for details on why METHOD 1 may work in this scenario, while METHOD 2 does not.
Here are some more details about pre-flight requests.