I can't upload my files using angularjs? - angularjs

$scope.uploadFiles = function () {
//debugger;
var request = {
method: 'POST',
url: 'http://localhost/upload/',
data: formdata,
headers: {
'Content-Type': undefined
}
};
// SEND THE FILES.
$http(request)
.success(function (d) {
alert(d);
})
.error(function () {
});
}
i am getting in console window like
XMLHttpRequest cannot load http://localhost/upload/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:55555' is therefore not allowed access. The response had HTTP status code 405.

If I understand this correctly, the app is running at http://localhost:55555 and you are trying to send a POST request to http://localhost/upload/ (which really means http://localhost:80/upload/). Your browser is not allowing you to do this since http://localhost:80/ and http://localhost:55555/ are different origins.
Perhaps you meant to say http://localhost:55555/upload/? This would solve your issue.
Otherwise you need to disable CORS in your browser or add the 'Access-Control-Allow-Origin: * header in your server at http://localhost:80/.

Related

How do i enable cors policy / or request in react js with no access to the API?

Im using RapidApi to make som simple calls for fetching country data using axios. The API is paged in that the next response will have the URL for the next request. So basically i don't even have the URLs.
Problem i get the error which i have seen all over stack overflow about cors policy
Access to XMLHttpRequest at 'https://api.hybridgfx.com/api/list-countries-states-cities?page=2' from origin 'http://localhost:3002' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
I tried adding the line "access-control-allow-origin": "*" but that doesn't work and i still get the same error. When i click on the URL or just run it directly on the browser i get a bunch of data but when it is called in the code it blows up . Please help.
const fetchNextResults = async (url: string): Promise<FetchResponse> => {
const options = {
method: "GET",
url: url,
headers: {
"X-RapidAPI-Key": MyKey,
"X-RapidAPI-Host": "countries-states-cities-dataset.p.rapidapi.com",
"access-control-allow-origin": "*",
},
};
const res: FetchResponse = await axios
.request(options)
.then(function (response) {
console.log(response.data);
return response.data;
})
.catch(function (error) {
console.error(error);
});
return res;
};
You can send a request throw the CORS proxy.
List of proxies.
url: <proxy url>/<my url>
Or create your own.

Cross Origin Request when Access-Control-Allow-Origin missing

I am calling the url from server side language using nodejs. When i use that url on the client side, I am getting the CORS error. If I use POSTMAN then i am getting the reponse. I have searched through various forums and questions on Stack Overflow and I can't seem to find any solution to this. It would be appreciated if someone could provide some insight.
app.controller('Ctrl',['$scope','$http', function($scope,$http) {
var config = {
headers: {'Access-Control-Allow-Origin': 'https://developer.mozilla.org'}
}
$http({
url: 'http://localhost:8000/psp/getbank',
method: 'GET',
})
.then(
function successCallback(response) {
$scope.cspinfo = response.data;
console.log('Data Displayed successfully')
},
function errorCallback(response) {
console.log("Error:" + response.data)
})
}]);
The 'Access-Control-Allow-Origin' header is sent FROM the server, to let the client know where requests can come from. This is not a header you send TO the server.
This article specifies (among other things) the headers you are allowed to send in a CORS request: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

restdb.io wont let me access with GET verb although I got CORS enabled

I have CORS enabled in restdb.io. I have set up so all origins are allowed to make GET requests. I have generated a Api key .This is the error message and api call. The wierd thing is that if I click the request in the network tab in chrome dev mode I can see it got 200 ok from the server. Am I missing something?
No 'Access-Control-Allow-Origin' header is present on the requested resource.
I am using Angular JS.
function getImages() {
var def = $q.defer();
$http({
async: true,
crossDomain: true,
url: getImagesURL,
method: "GET",
headers: {
"content-type": "application/json",
"x-apikey": APIKEY,
"cache-control": "no-cache"
}
}).then(function successCallback(response) {
def.resolve(response.data);
}, function errorCallback(response) {
console.log("Error " + response.data)
});
return def.promise;
}
Solved it. I was using the wrong api key.

Request Forbidden 403 when request made to Square-Connect from localhost

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.

I was trying to implement facebook integration using facebook-passport, I got an error

I was trying to implement facebook integration, I got this error:
XMLHttpRequest cannot load https://www.facebook.com/dialog/oauth?response_type=code&redirect_uri=http%3A%2F%2Fchefin.com%2Fauth%2Ffacebook%2Fcallback&client_id=865410220269534. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://chefin.com' is therefore not allowed access.
when I call auth/facebook URL on button click.
$scope.facebookLogin = function() {
$http({
url: '/auth/facebook',
method: 'GET',
}).success(function(response) {
});
};
It seems the /auth/facebook is having a redirect request. So instead of AJAX can you try:
$scope.facebookLogin = function() {
window.location.href = "/auth/facebook";
}

Resources