I'm trying to make an Ajax post request from Backbone, calling the Laravel route "pay" but I get always this answer from the console log:
XMLHttpRequest cannot load https://www.sandbox.paypal.com/webscr?cmd=_express-checkout&useraction=commit&token=EC-5S932878HU8059629. Origin http://localhost is not allowed by Access-Control-Allow-Origin.
I tried to modify my MAMP httpd.conf to accept cross domain script, and as you can see I've added an header instruction to the routes.php.
Here is my JS code:
Backbone.ajax({
url:'index.php/pay',
type:'POST',
dataType:"json",
data: converteditems,
crossDomain: true,
success:function (data) {
if(data.error) { // If there is an error, show the error messages
$('.alert-error').text(data.error.text).show();
}
}
});
This is the routes.php in Laravel:
<?php
header('Access-Control-Allow-Origin: *');
Route::get('/', function()
{
return View::make('home');
});
Route::resource('products','ProductsController');
Route::resource('login', 'AuthenticationController');
Route::post('pay','PaypalController#doPay');
The doPay method use the Omnipay package in this way (for testing purpose ofc):
public function doPay()
{
$gateway = GatewayFactory::create('PayPal_Express');
$gateway->setUsername('blablablabla-facilitator_api1.gmail.com');
$gateway->setPassword('137787773');
$gateway->setSignature('AhFvPK5rU.kfQOKIwZcYO1yItmtHASGDFDFGDbY9.w');
$gateway->setTestMode('true');
$args['amount']='2.00';
$args['description']='Your purchase';
$args['returnUrl']='http://localhost/shoppingcart/index.php/return';
$args['cancelUrl']='http://localhost/shoppingcart/index.php/cancel';
try {
$response = $gateway->purchase($args)->send();
if ($response->isSuccessful()) {
$responsereturn=$response->getData();
} elseif ($response->isRedirect()) {
$response->redirect();
} else {
exit($response->getMessage());
}
} catch (\Exception $e) {
exit('internal error, log exception and display a generic message to the customer');
}
}
Some more info from the headers of my console:
Request URL:http://localhost/shoppingcart/public/index.php/pay
Request Headersview source
Accept:application/json, text/javascript, */*; q=0.01
Content-Type:application/x-www-form-urlencoded; charset=UTF-8
Origin:http://localhost
Referer:http://localhost/shoppingcart/public/
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/30.0.1599.69 Safari/537.36
Request URL:https://www.sandbox.paypal.com/webscr?cmd=_express-checkout&useraction=commit&token=EC-6J290181UP558705C
Request Headersview source
Origin:http://localhost
Referer:http://localhost/shoppingcart/public/
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/30.0.1599.69 Safari/537.36
Query String Parametersview sourceview URL encoded
cmd:_express-checkout
useraction:commit
token:EC-6J290181UP558705C
If you want to make your request from Ajax, then you don't want omnipay to immediately redirect that request to paypal. You want to redirect the customer'a browser to paypal.
So you need to put some logic in your controller action, so if it is an XHR request, then just return the URL to forward the customer to.
E.g. Use $response->getRedirectUrl() on the omnipay response instead of $response->redirect(). Then put that in a JSON response or something and use JavaScript to send the customers browser to that URL.
Related
All, I just created a new Angular package using 1.6.1 but now the data doesn't seem to pass to my WebAPI. However, when I post bits via SoapUI or something like that, everything is fine.
The Javascript looks like this:
function testapi()
{
var serviceRoot='http://server/testangular16/api/Values';
var deferred=$q.defer();
var req = {
method: 'POST',
url: serviceRoot,
data: 'PassInTheText'
};
$http(req).then(goodResponse,badResponse);
return deferred.promise;
};
function goodResponse(response)
{
console.log("Good response");
console.log(response);
}
function badResponse(response)
{
console.log("Bad response");
console.log(response);
}
and the webapi is a very simple C# controller:
// POST api/values
public HttpResponseMessage Post([FromBody]string value)
{
HttpResponseMessage rp = new HttpResponseMessage(HttpStatusCode.OK);
rp.Content = new StringContent(value);
return rp;
}
I am making it into the controller, I can set a break point and hit the parts where I can look at the value. It's always null.
Looking at the network trace, the angular part does do a preflight and I can see the 200 response back.
Request URL:http://server/testangular16/api/Values
Request Method:OPTIONS
Status Code:200 OK
Remote Address:10.7.14.209:80
**Response Headers view source**
Access-Control-Allow-Credentials:true
Access-Control-Allow-Headers:content-type
Access-Control-Allow-Origin:http://localhost:8000
Cache-Control:no-cache
Content-Length:0
Date:Fri, 03 Feb 2017 18:09:04 GMT
Expires:-1
Pragma:no-cache
Server:"Management Corporation"
X-AspNet-Version:4.0.30319
**Request Headers view source**
Accept:*/*
Accept-Encoding:gzip, deflate, sdch
Accept-Language:en-US,en;q=0.8
Access-Control-Request-Headers:content-type
Access-Control-Request-Method:POST
Connection:keep-alive
Host:mjvzrx3
Origin:http://localhost:8000
Referer:http://localhost:8000/
User-Agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36
So, it looks like I'm passing CORS, but when I get to trying to pass the data in as the content of the post, it doesn't make it.
Any ideas what I'm missing?
Thanks,
Nick
Web API expects an object in the message body, you cant pass in a primitive type unless you use application/x-www-form-urlencoded as the content-type and prefix the value with an equals = sign.
So you can fix it by one of these methods
Adjust the c# parameter and turning it into a type that has a string property and then send in a json object with a matching parameter name.
Change the request to url-encoding content type and add a = to the variable value.
Send it as a part of the URL instead of the message body, you can still use the POST method.
Change to form-urlencoded
function testapi()
{
var serviceRoot='http://server/testangular16/api/Values';
var deferred=$q.defer();
var req = {
method: 'POST',
url: serviceRoot,
data: '=PassInTheText', // added =
contentType: 'application/x-www-form-urlencoded' // specify content type
};
$http(req).then(goodResponse,badResponse);
return deferred.promise;
};
It seems if I do this, it works as expected.... Thoughts?
// POST api/values
public HttpResponseMessage Post(HttpRequestMessage request)
{
var data = request.Content.ReadAsStringAsync().Result;
Console.WriteLine("Data: {0}", data);
HttpResponseMessage rp = new HttpResponseMessage(HttpStatusCode.OK);
rp.Content = new StringContent("Data back from WebAPI" + data);
return rp;
}
I'm new to e2e testing. I've encountered problem during my protractor tests. My web application calls API despite my efforts:
Started GET "/api/programs" for 127.0.0.1 at 2015-06-22 10:43:19 +0200
Processing by Api::V1::ProgramsController#index as JSON
======= NO Authorization token =======
I want to provide my web application with a correct HTTP POST response. Yet my code is not working:
Here is my code:
describe('e2e tests', function() {
it('FO tests', function() {
browser.addMockModule('WebClientApp', function() {
console.log('test');
angular.module('WebClientApp', ['ngMockE2E'])
.run(function($httpBackend) {
console.log('Test2!');
alert('Test3!');
$httpBackend.when('POST','api/auth/current_resource')
.respond(200, [{
"resource":
{"id":"e11e5e4a-034c-4545-967a-dae395d5c950","email":"admin#aa.com","name":"Xaa","surname":"Xaaaa","is_active":true,"personal_number":null,"resource_name":"User","roles":"admin"}
"token": "AdPnyXvZZDtcPkMVE9rIDFM09WmHubAnEd4wGXLPMiPWrFu0gDH1uIg7lqXXl1k2UgmJ1ektHf3Pduq2iF0nsR3A4yJ1dw8cB2FHgw3rWMf3q4357Atg9FtC7WnHisGa"
}]);
$httpBackend.whenGET(/.*/).passThrough();
});
});
browser.getRegisteredMockModules();
browser.get('http://0.0.0.0:9000/#/back-office/dashboard');
browser.pause();
});
});
And my Request:
Remote Address:0.0.0.0:3000
Request URL:http://0.0.0.0:3000/api/auth/sign_in
Request Method:OPTIONS
Status Code:200 OK
Response Headers
view source
Access-Control-Allow-Credentials:true
Access-Control-Allow-Headers:accept, content-type
Access-Control-Allow-Methods:GET, PUT, DELETE, POST, OPTIONS
Access-Control-Allow-Origin:http://localhost:9000
Access-Control-Max-Age:1728000
Content-Type:text/plain
Transfer-Encoding:chunked
X-Request-Id:1c75d93d-4539-4654-9963-a04bf45defe0
X-Runtime:0.029612
Request Headers
view source
Accept:*/*
Accept-Encoding:gzip, deflate, sdch
Accept-Language:pl-PL,pl;q=0.8,en-US;q=0.6,en;q=0.4
Access-Control-Request-Headers:accept, content-type
Access-Control-Request-Method:POST
Connection:keep-alive
Host:0.0.0.0:3000
Origin:http://localhost:9000
Referer:http://localhost:9000/
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_1)AppleWebKit/537.36 (KHTML, like Gecko) Chrome/43.0.2357.124 Safari/537.36
Here is a possible work around if the problem is CORS. (I don't believe tat $httpBackend is prepare for that use).
But can you provide the code of the service which is calling: /api/programs ?
Maybe you are missing to mock other web services responses, which are been executed by some angular factory/service etc.
Update:
#Dan Kanze answer that for cross domain request you can use expectJSONP.
Here is his example code
httpBackend.expectJSONP('http://api.stackexchange.com/2.1/users/gigablox/timeline?callback=JSON_CALLBACK')
.respond(returnData);
I am trying to create a call with AngularJS v1.3.15 into ASP.NET WebAPI (latest from Nuget) to get a list of customers. I can successfully authenticate and get back a token. I add the token to an Authentication header but when I make the call it gets kicked back saying the Authentication header is missing.
The Angular call after I get the token looks like this
$scope.baseUrl = "http://localhost:7800/";
$http({
method: 'GET',
url: $scope.baseUrl + 'customer',
headers: {
'Authorization': $scope.token
}})
I have also tried to utilize the angularjs $resourse
return $resource($scope.baseUrl + 'customer', { }, { 'get': { method: 'GET', isArray: true, headers: { 'Authorization': $scope.token } } });
In the WebApiConfig Register method I have the following setup
var cors = new EnableCorsAttribute("*","*","*");
config.EnableCors(cors);
in a DelegatingHandler I check for the Authorization header like so
var authHeader = request.Headers.Authorization;
From the Angular app it is always null. If I run a check from Fiddler and PostMan I get the Authorization header just fine.
When I press F12 from Chrome and look at the request header these are the results
OPTIONS /customer HTTP/1.1
Host: localhost:7800
Connection: keep-alive
Access-Control-Request-Method: GET
Origin: http://localhost:63342
User-Agent: Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2376.0 Safari/537.36
Access-Control-Request-Headers: accept, authorization
Accept: */*
Referer: http://localhost:63342/Test/index.html
Accept-Encoding: gzip, deflate, sdch
Accept-Language: en-US,en;q=0.8
Fixed my issue, after some searches I found that OPTIONS does not seem to be supported out of the box. I found that if I add NuGet package Microsoft.Owin.Cors and then add
app.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll);
to the startup.cs file
I'm trying to do requests to a RestAPI coded with Codeigniter 3. Access-Control-Allow-Origin and Access-Control-Allow-Headers are set to "*". The API has been successfully tested on Postman.
I'm coding a Web App using AngularJS, and trying to do requests to that API. The following code works properly:
api_service.getUsers = function() {
return $http({
method : 'GET',
url : url + '?dd-api-key=' + api_key
});
}
As this other code functions well too:
api_service.getUsers = function() {
return $http.get(url + '?dd-api-key=' + api_key);
}
But I need to send the API key as a header and not in the URL. So I wrote the function this way:
api_service.getUsers = function() {
return $http({
method: 'GET',
url: url,
headers: {
'accept': undefined,
'dd-api-key': api_key
}
});
}
That code doesn't work. Google Chrome console displays me this:
OPTIONS http://www.myweb.com/api/v1/users
XMLHttpRequest cannot load http://www.myweb.com/api/v1/users. Invalid HTTP status code 403
And at the network tab it shows that the request uses a method type 'OPTIONS', not a 'GET' method.
The Response Headers are:
Access-Control-Allow-Headers:*
Access-Control-Allow-Methods:PUT, GET, POST, DELETE, OPTIONS
Access-Control-Allow-Origin:*
Cache-Control:no-store, no-cache, must-revalidate, post-check=0, pre-check=0
Connection:keep-alive
Content-Language:es-ES
Content-Length:45
Content-Type:application/json; charset=utf-8
Date:Wed, 25 Mar 2015 01:45:09 GMT
Expires:Thu, 19 Nov 1981 08:52:00 GMT
Pragma:no-cache
Server:nginx/1.6.2
And the Request Headers are:
Accept:*/*
Accept-Encoding:gzip, deflate, sdch
Accept-Language:es-ES,es;q=0.8,en;q=0.6
Access-Control-Request-Headers:dd-api-key
Access-Control-Request-Method:GET
Connection:keep-alive
Host:www.myweb.com
Origin:http://127.0.0.1:55652
Referer:http://127.0.0.1:55652/index.html
User-Agent:Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2272.101 Safari/537.36
Excuse me if my english is not correct.
Many thanks.
you should add header with this:
$http.defaults.headers.common.dd-api-key = api_key;
You can add it in some config as global.
I am using NGINX and sparkjava for my web application. I am sure I have enabled all CORS headers properly. Still, I am getting "XMLHttpRequest cannot load http://localhost:3003/platformAPI/login. Invalid HTTP status code 404" error.Below mentioned are my client and server methods from extjs and spark java respectively. I have inspected the network tab of my browser to get the response and request headers sent as well. They are also mentioned below. Any help to let me know as to what's wrong with my approach is highly appreciated :)
Client method from Nginx:
function(button, event, options){
var form = Ext.getCmp("LoginformId").getForm();
if (form.isValid()) {
var userJson = JSON.stringify(form.getFieldValues());
form.submit({
url: 'http://localhost:3003/platformAPI/login',
//headers : {'Content-Type':undefined,},
//dataType: 'jsonp',
success: function(form, action) {
// Ext.Msg.alert('Success', action.result.msg);
var sessionID=action.result.sessionID;
var clientName=action.result.clientName;
sessionStorage.setItem('sessionID',sessionID);
sessionStorage.setItem('clientName',clientName);
window.location="http://localhost:3000/";
},
failure: function(form, action) {
Ext.Msg.alert('Failed', action.result.msg);
}
});
}
}
Server Methods:
filter to enable CORS headers (Calling this in main)
private static void enableCORS(final String origin, final String methods, final String headers) {
before(new Filter() {
#Override
public void handle(Request request, Response response) {
response.header("Access-Control-Allow-Origin",request.headers("origin"));
response.header("Access-Control-Allow-Headers", "Origin, x-requested-with, content-type, Accept");
response.header("Access-Control-Request-Method", "GET,PUT,POST,DELETE,OPTIONS");
);
}
});
}
Login method:
post("platformAPI/login", "undefined",
(request, response) -> {
System.out.print("inside login");
JSONObject object1 = new JSONObject();
response.body(object1.put("success", true).toString());
return response;
});
Request and response headers:
Remote Address:127.0.0.1:3003
Request URL:http://localhost:3003/platformAPI/login
Request Method:OPTIONS
Status Code:404 Not Found
Response Headers
view source
Access-Control-Allow-Headers:Origin, x-requested-with, content-type, Accept
Access-Control-Allow-Origin:http://localhost:3000
Access-Control-Request-Method:GET,PUT,POST,DELETE,OPTIONS
Cache-Control:must-revalidate,no-cache,no-store
Content-Length:295
Content-Type:text/html; charset=ISO-8859-1
Server:Jetty(9.0.2.v20130417)
Request Headers
view source
Accept:*/*
Accept-Encoding:gzip, deflate, sdch
Accept-Language:en-US,en;q=0.8
Access-Control-Request-Headers:x-requested-with, content-type
Access-Control-Request-Method:POST
Connection:keep-alive
Host:localhost:3003
Origin:http://localhost:3000
Referer:http://localhost:3000/
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2272.89 Safari/537.36
Try enable CORS in Spark-Java with the following snippet:
options("/*",
(request, response) -> {
String accessControlRequestHeaders = request
.headers("Access-Control-Request-Headers");
if (accessControlRequestHeaders != null) {
response.header("Access-Control-Allow-Headers",
accessControlRequestHeaders);
}
String accessControlRequestMethod = request
.headers("Access-Control-Request-Method");
if (accessControlRequestMethod != null) {
response.header("Access-Control-Allow-Methods",
accessControlRequestMethod);
}
return "OK";
});
before((request, response) -> {
response.header("Access-Control-Allow-Origin", "*");
});
Provided you must consider this point as well.
It will works with Postman because you are directly calling the server. There is no CORS involved here. But when you do it through javascript or angular etc.. CORS comes into play. So the requested url doesn't contain http scheme. You need to change localhost:portNumber/login to http://localhost:portNumber/login