I am using parse.com cloud code and has a function inside, which is called using a https post call from my angularjs.
When I test the same function from POSTMAN REST client it works.
But from my domain it gives a CORS error
XMLHttpRequest cannot load
https://api.parse.com/1/functions/sendemail. Response to preflight
request doesn't pass access control check: A wildcard '*' cannot be
used in the 'Access-Control-Allow-Origin' header when the credentials
flag is true. Origin 'http://www.crickify.com' is therefore not
allowed access.
Cloud Code:
Parse.Cloud.define("sendemail", function(request, response) {
//response.success("Hello world!");
var mailgun = require('mailgun');
console.log("from parselog",request.params);
response.set("Access-Control-Allow-Origin", "http://www.crickify.com");
response.set("Access-Control-Allow-Headers", "X-Requested-With");
response.set('Access-Control-Allow-Headers', 'Content-Type');
mailgun.initialize('XXX', 'XXX');
mailgun.sendEmail({
to: "bala#mindlens.com.sg",
from: "Mailgun#CloudCode.com",
subject: "Hello from Cloud Code!",
text: "Using Parse and Mailgun is great!"
}, {
success: function(httpResponse) {
console.log(httpResponse);
response.success("Email sent!");
},
error: function(httpResponse) {
console.error(httpResponse);
response.error(httpResponse);
}
});
});
Angular Code:
$scope.sendemail = function(passedEmail) {
// body...
var email = passedEmail;
var message = {mail:email};
$http({
method: 'POST',
url: 'https://[app key]:jskey]#api.parse.com/1/functions/sendemail',
data: message
})
.success(function(data) {
console.log("Success" + data);
})
.error(function(error) {
console.log("Success" + data);
});
}
Related
const https = require('https');
export async function main(event, callback) {
const options = {
method: 'GET',
host: 'https://api.challonge.com/v1/',
headers: {
'Access-Control-Allow-Methods': 'GET',
"api_key": "THE_KEY",
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Credentials": true
}
};
var dataString = " ";
const response = await new Promise((resolve, reject) => {
const req = https.get(options, function (response) {
response.on('data', chunk => {
dataString += chunk;
});
response.on('end', () => {
resolve({
statusCode: 200,
headers: {
"Access-Control-Allow-Origin": "*"
},
body: JSON.stringify((dataString))
});
});
});
req.on('error', (e) => {
reject({
statusCode: 500,
headers: {
"Access-Control-Allow-Origin": "*"
},
body: e.message
});
});
});
return response;
};
This is the lambda function ^
getChallongeTournaments:
handler: getChallongeTournaments.main
events:
- http:
path: tournaments/
method: get
cors: true
authorizer: aws_iam
my serverless.yml
// in a useEffect
function getChallongeTournaments(){
return API.get("byoc_users", '/tournaments.json');
}
async function onLoaded() {
try {
const testChallonge = await getChallongeTournaments();
^ The API call
According to the challonge docs this should receive 'Retrieve a set of tournaments created with your account.' and there is one created.
This is the CORS error I'm receiving: Access to XMLHttpRequest at 'https://m3heucf413.execute-api.us-east-2.amazonaws.com/prod/tournaments.json' from origin 'http://localhost:8100' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.
Preflight Requests and CORS flag is raised by the Browser when there is a request from a domain/port to an entire new domain/port. If you are doing this for testing, you can disable this security flag in chrome by adding the --disable-web-security flag. Just create a shortcut of chrome to desktop > Right click > Properties >In shortcut tab - Target > Append --disable-web-security --user-data-dir="C:\tmpChromeSession" to target. This will disable the CORS check.
If you have access/control on the 3rd party api server config, what you should be doing is to add necessary response headers (Access-Control-Allow-Origin) to the response. If you do not have access, one option will be to route the request through a CORS proxy.
So, I created my client application using angular to interact with my WCF REST API. I basically use cookies to store the login session and retrieve the information by sessions. This works perfectly from Postman and also with a console client application (there I created cookie container).
Now I have a problem to read the cookies from AngularJs. My HTTP response header shows the cookies but the angular response header is undefined.
AngularService.js:
this.login = function (credential) {
var request = $http({
method: "POST",
url: "someUrlLogin",
data: angular.toJson(credental),
config: { withCredentials: true },
});
return request;
}
AngularContoller.js :
var promisePost = AngularService.login(credential);
promisePost.then(function (response) {
$scope.loginResult = angular.fromJson(response);
$timeout(function () {
console.log(response.headers("Set-Cookie"); //null
console.log($cookies["ASP.NET_SessionId"]); //undefined
console.log($cookies.getAll); //undefined
},
function error (err) {
$scope.loginResult = err;
});
WCF REST session:
_context.Session["USERLOGGEDIN"] = "SomeValue"
I have set the HTTPOnly flag to false
I have also tried "console.log(response.headers("setcookie") which also doesn't work
"Access-Control-Allow-Credentials = true"
"Access-Control-Expose-Headers" value="content-type, Set-Cookie"
What else am I missing? Is it even possible to read the cookies from the http response headers?
I have a REST API developed using Play Framework/Java and front end developed in Angular JS.
I am trying to call a POST method fron the Angular Client to the server using the following code:
$scope.login = function () {
console.log('login called');
var loginURL = 'http://localhost:9000/login';
var loginInfo = {
'email': $scope.email,
'password': $scope.password
};
$http({
url: loginURL,
method: 'POST',
data: loginInfo,
headers: { 'Content-Type': 'application/json' }
}).then(function (response) {
console.log('SUCCESS: ' + JSON.stringify(response));
$scope.greeting = response.status;
}, function (response) {
console.log('ERROR: ' + JSON.stringify(response));
});
}
This is the code at my server:
public Result doLogin() {
ObjectNode result = Json.newObject();
result.put("status", "success");
return ok(result).withHeader("Access-Control-Allow-Origin", "*");
}
And this is the application conf file:
#allow all hosts.
play.filter.hosts {
allowed = ["."]
}
#allow CORS requests.
play.filters.cors {
allowedOrigins = ["*"]
}
Yet even after enabling CORS, I am getting error in console in both Firefox and Google Chrome:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:9000/login. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).
ERROR: {"data":null,"status":-1,"config":{"method":"POST","transformRequest":[null],"transformResponse":[null],"jsonpCallbackParam":"callback","url":"http://localhost:9000/login","data":{"email":"xxx","password":"xxx"},"headers":{"Content-Type":"application/json","Accept":"application/json, text/plain, /"}},"statusText":""}
I do know that the server is sending the correct response and the correct header because when I do the POST from Postman, I can see the response and also the headers containing {"Access-Control-Allow-Origin", "*"} in Postman.
So then, what could be the problem? Is there something I am missing from the Client side?
The difference between POSTMAN request and browser request is browser sends an OPTIONS request before the actual POST / GET request.
To be able to accept OPTION request with your play framework allowedHttpMethods = ["GET", "POST" ,"OPTIONS"]
for follow this link
Play Framework 2.3 - CORS Headers
This causes a problem accessing CORS request from a framework (like angularjs). It becomes difficult or the framework to find what was the options request for and take action properly.
For fixing your problem you will need to analyze how the options request going and how it's being interpreted and how to overcome. But in general, I suggest using "fetch" built-in request for this, which supports the promises so can be chained easily with angularjs code
so your code will look something like this
$scope.login = function () {
console.log('login called');
var loginURL = 'http://localhost:9000/login';
var loginInfo = {
'email': $scope.email,
'password': $scope.password
};
fetch(loginURL, {
method: 'post',
headers: {
"Content-type": "application/json"
},
body: loginInfo
}).then(function (response) {
console.log('SUCCESS: ' + JSON.stringify(response));
$scope.greeting = response.status;
}, function (response) {
console.log('ERROR: ' + JSON.stringify(response));
});
}
I have Angularjs app connects to a server using API, and i'm using token authentication, when i use Postman to get the token, it works perfect, but when i'm use Angulajs with the same header and parameters i got error:400.
When i checked both requests using Fiddler, i found that the request from Angularjs is missing Access-Control-Allow-Origin: * header.
How to fix this?
Here is the service used to get the token:
AuthenticationApi.Login = function (loginData) {
//POST's Object
var data = "grant_type=password&username=" + loginData.userName + "&password=" + loginData.password;
var deferred = $q.defer();
//the data will be sent the data as string not JSON object.
$http.post('http://localhost:53194/Token', data, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } })
.then(function (response) {
console.log(response);
localStorageService.set('authorizationData',
{
token: response.access_token,
userName: loginData.userName
});
Authentication.isAuth = true;
Authentication.userName = loginData.userName;
console.log(Authentication);
deferred.resolve(response);
},
function (err, status) {
logout();
deferred.reject(err);
});
return deferred.promise;
};
for the API server, i'v done CORS:
public void Configuration(IAppBuilder app)
{
ConfigureOAuth(app);
HttpConfiguration config = new HttpConfiguration();
WebApiConfig.Register(config);
app.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll);
app.UseWebApi(config);
}
i found the problem and i fixed it.
in the API server, i have this code:
var cors = new EnableCorsAttribute("*", "*", "*");
cors.PreflightMaxAge = 60;
config.EnableCors(cors);
The problem is in the PreflightMaxAge, i just commented it...It worked!!!
if the problem not solved, try to use IE or FireFox, don't use Chrome because it is not CORS enabled
I am developing an ionic app when I am sending a post request using angularjs $http.post to my express js server, I cannot see the data in the req.body.
I am running my server on localhost:3000
Code in my server for CORS
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Content-Type");
res.header("Access-Control-Allow-Methods", "GET,PUT,DELETE,POST");
next();
});
My angular Js post request
$http.post('http://localhost:3000/signup',{"username":"x","password":"y"}).success(function(res){
console.log(res);
if(res.msg=="success")
{
//do something
}
}
I am able to see data in req.body as "key" like:
{'{"username":"x","password":"y"}':''}
When I am setting the header from ionic app as:
$http.defaults.headers.post["Content-Type"] = 'application/x-www-form- urlencoded; charset=UTF-8';
Please let me know how to debug this
You are getting the entire data as key in req.body. This is because the angular request that you are making is wrong. Here is the part of code that should work
$http({
url: 'http://localhost:3000/signup',
method: "POST",
data: { username : "a" , password : "b" }
})
.then(function(response) {
// success
},
function(response) { // optional
// failed
});
Well I figured that out
I have used this stackoverflow link Ionic framework http post request to parse my data before its send to my server
$http.defaults.headers.post["Content-Type"] = 'application/x-www-form-urlencoded; charset=UTF-8';
Object.toparams = function ObjecttoParams(obj)
{
var p = [];
for (var key in obj)
{
p.push(key + '=' + encodeURIComponent(obj[key]));
}
return p.join('&');
};
$http({
url: 'http://localhost:3000/signup',
method: "POST",
data: Object.toparams(u)
})
.then(function(response) {
console.log(response);
},
function(response) { // optional
// failed
});