I have a Django server amd I am trying to send a request to it using AngularJS.
This is my code:
var req = {
method: 'POST',
url: 'http://127.0.0.1:8000/api/user/register/',
headers: {
'Access-Control-Allow-Origin': '*',
'Content-Type': 'application/x-www-form-urlencoded'
},
data: $.param({ phone_number: phonenumber, password: phonenumber, country: 1 })
}
$http(req).then(function(response){
callback(response);
}, function(response){
console.log(response);
});
I am getting the following error:
XMLHttpRequest cannot load http://127.0.0.1:8000/api/user/register/. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1' is therefore not allowed access.
I am not sure what can be the problem here. I already created an applications for iOS and Android that both communicate with the same server and I didn't have any problems.
I am using AngularJS 1.5.5 https://code.angularjs.org/1.5.5/
Can someone suggests what is wrong with this request in AngularJS?
It appears that the code didn't need this part:
'Access-Control-Allow-Origin': '*',
The real problem was because the server wasn't allowing local urls.
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.
I'm trying to get a token using the Outlook REST API after I got the code from this url https://login.microsoftonline.com/{tenant}/oauth2/v2.0/authorize
I used a POST request with axios but the issue is I got this error:
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:3000' is therefore not allowed access.
My Axios post is this:
return Axios({
method: 'post',
url: 'https://login.microsoftonline.com/common/oauth2/v2.0/token',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
'Access-Control-Allow-Origin':'*', Content-Type, origin, authorization, accept, client-security-token"
},
data: {
'client_id': 'xxxxxx',
'scope': 'calendars.readwrite',
'code': encodeURIComponent('000000000'),
'redirect_uri': encodeURIComponent('http://localhost:3000/storeprofile/xxxxxxxxx/outlook-scheduler'),
'grant_type': 'authorization_code',
'client_secret': encodeURIComponent('xxxxxxxxxx')
};,
responseType: 'json'
}).then((response) => {
console.log('token response: ', response);
});
I get a 200 status but can't see the token I am supposed to get in the response. The response should be a json but still nothing.
Can someone please guide me? Thank you in advance!
When you register your app, you must setup the Redirect URI/URL, usually this url will be added to the CORS header.
doc : https://developer.microsoft.com/en-us/graph/docs/concepts/auth_overview#how-do-i-get-my-app-talking-to-azure-ad-and-microsoft-graph
I'm facing problem with CORS requests in AngularJS while calling web services but the same service able to call by using jQuery.
Note: From server side we are receiving header "Access-Control-Allow-Origin:*" and these services are running fine in jQuery application.
Here I'm posting my AngularJS code as well as jQuery code.
AngularJS:
$http({
method: 'POST',
url: $rootScope.host + "UserLogin",
//headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
data: {
"uname": $scope.uname,
"password": $scope.password
},
}).then(function (success) {
$scope.loginDetails = success;
console.log($scope.loginDetails);
}),function (error){
console.log(error);
});
If I pass the header like headers: { 'Content-Type': 'application/x-www-form-urlencoded' } able to ping the service but my request is not going in JSON format.
If I change the header to 'Content-Type': 'application/json', getting
XMLHttpRequest cannot load https://XXXX.XXXX.in/XXXXAPI/UserLogin.
Response to preflight request doesn't pass access control check:
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://170.11.0.61' is therefore not allowed access.
I don't know what is the reason for this error.
$.ajax({
url: BASE_URL + "UserLogin",
type: "POST",
xhrFields: {withCredentials: true},
data: {
"uname": uname,
"password": password
},
cache: false,
success: function (result, textStatus, request) {
console.log(result);
},
error: function (e) {
console.log("Error in login service call:"+JSON.stringify(e));
}
});
This jQuery is sending my request in the json format.
Try to pass headers like
headers: { 'Content-Type': 'application/json' }
I am trying to make a request to 'https://connect.squareup.com/v2/locations' using angularjs, where call is getting failed saying 403 FORBIDDEN.
Here is the code sample :
var url = 'https://connect.squareup.com/v2/locations';
var config = {
headers: {
'Authorization': 'Bearer sandbox-sq0atb-JJGltCa375qzAyoQbjPgmg',
'Accept': 'application/json',
"X-Testing": "testing"
}
};
$http.get(url, config)
.then(
function (response) {
console.dir(response);
},
function (response) {
console.log("failed" + response)
}
);
I have made a fiddle of the above sample. Any help is appreciated.
http://jsfiddle.net/dx6tdrha/
Are you seeing this error: XMLHttpRequest cannot load https://connect.squareup.com/v2/locations. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.? It means that you cannot access the API via front-end Javascript (like AngularJS) You'll need to use a different implementation like Node.js, PHP, etc.
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?