With GET method, i easily get this reponse. But POST method i don't get it.
Ext.data.JsonP.request({
url: 'http://otherdomain/test_json_post',
method: 'POST',
type:'jsonp',
scope: this,
callbackkey: 'callback',
success: function(result) {
console.log(result);
//Your success function here...
}
});
What i wrong?
You cannot call any webservice from your browser because of security reasons so either you have to use JSONP proxy on app side or you have to enable CORS on your server side. If you are planning to build this as app then you don't have to do this, all you have to do is change security setting of your browser when you are testing. More details here : How to use json proxy to access remote services during development
Yes,it worked! ^^ Sencha Touch is a client-side(a Mobile Web App) or builded it localhost, it will have CORS - a browser policy security - related to your using ajax in it. So, I configed all api in my PHP server by add 2 code rows:
function yourAPI
{
//CORS open
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Headers: X-Requested-With');
....
{enter your code here}
}
Thank for Rob's help! Hope you have similar problem fix error successfully.
Related
Greetings
I have one web application with following architecture:
Web api: ASP.net core 2.1 (Windows Authentication)
UI: angular 8
UI is able to get data but unable to send data.
I mean GET method is working fine but POST, PUT, DELETE options are not working .
And all the methods are working using POSTMAN.
ERROR is:
Access to XMLHttpRequest at 'http://xx.xxx.xxx.xx:xxyy/xxx/xxxxxx/Method' from origin 'http://localhost:xxxx' has been blocked by CORS policy:
Response to preflight request doesn't pass access control check: It does not have HTTP ok status.
Any help will be appreciated .
Thanks in advance :)
That's because your API is on different domain than your SPA angular application.
Please at this at the start of your Configure method in Startup.cs
if (env.IsDevelopment())
{
app.UseCors(opts =>
{
opts.WithOrigins(new string[]
{
"http://localhost:3000",
"http://localhost:3001"
// whatever domain/port u are using
});
opts.AllowAnyHeader();
opts.AllowAnyMethod();
opts.AllowCredentials();
});
}
Please note that this will handle only CORS for local development since you'll probably have same domain in production - if not, you'll need to reconfigure this for production also.
CORS blocking is browser specific and that's why it's working in PostMan but not in browser.
This is what i use and it should work i hope for your case.
My startup.cs ConfigureServices() decorated with:
services.AddCors(feature =>
feature.AddPolicy(
"CorsPolicy",
apiPolicy => apiPolicy
//.AllowAnyOrigin()
//.WithOrigins("http://localhost:4200")
.AllowAnyHeader()
.AllowAnyMethod()
.SetIsOriginAllowed(host => true)
.AllowCredentials()
));
And, Configure() method with:
app.UseCors("CorsPolicy");
Notice the SetIsOriginAllowed() and allowCreds() along with other policy settings, this works for me with POST calls to my api from my angular, which are running on two different port#s.
UPDATE:
Following the questions on the comments, adding additional information on how do we check the logged in user (windows auth) btwn api and the angular (frontend).
You can check the incoming User on a specific route that would only expect the authenticated user using the decoration [Authorize]. In my case, i would have only one method that would expect the windows user in the api:
[HttpGet("UserInfo")]
[Authorize]
public IActionResult GetUserInfo()
{
string defaultCxtUser = HttpContext?.User?.Identity?.Name;
if (defaultCxtUser != null && !string.IsNullOrEmpty(defaultCxtUser))
{
_logger.LogDebug($"START - Get Context user details for {defaultCxtUser}");
ADHelper.logger = _logger;
var userFullName = ADHelper.GetUserIdentityInfo(defaultCxtUser);
_logger.LogInformation($"Context user {defaultCxtUser} with name: {userFullName}");
var userInfo = new { Name = userFullName };
//_logger.LogDebug($"END - GetUserInfo({defaultCxtUser} for {userFullName}");
return Ok(userInfo);
}
else
return Ok(new { Name = defaultCxtUser });
}
then i would call this from my angular with the service call as,
// Get the Logged in user info
GetCurrentUserInfo(): Observable<string> {
const httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json'
}),
withCredentials: true
};
// return this.http.get<string>(`${ApiPath}UserInfo`, httpOptions)
// .pipe(map(v => v as string));
return this.http.get<UserInfo>(`${ApiPath}UserInfo`, httpOptions)
.pipe(map(data => {
// console.log(data, data.Name);
return data.Name;
}))
;
}
Please see the headers with 'withCredentials: true' line that would trigger to pass the current user info, and it would be read and understood only if it has the authorize attr to read the User.Identity object in c# side. The reason we do this on a specific method is that, there should be some other parental method in the api like ApiStatus() or anything that could be, should be called first. This would ensure to also invoke the preflight check with OPTIONS that would require anonymous auth. Like in my case, getting whether the api is available and running, and some other app environment info before i get the userInfo() from my angular app.
I am building a ASP.Net MVC application that can work both in Web and JQuery mobile. So i am creating a seperate view for Web and JQuery mobile application. I have placed all my primary business logic services as a Web Api calls which are called by both the clients using the AngularJs which is working fine so far.
Now I was looking to introduce the security in to the application, and realized that Basic authentication is the quickest way to get going and when I looked around I found very nice posts that helped me build the same with minimal effort. Here are 3 links that I primarily used:
For the Client Side
HTTP Auth Interceptor Module : a nice way to look for 401 error and bring up the login page and after that proceed from where you left out.
Implementing basic HTTP authentication for HTTP requests in AngularJS : This is required to ensure that I am able reuse the user credentials with the subsequent requests. which is catched in the $http.
On the Server Side :
Basic Authentication with Asp.Net WebAPI
So far so good, all my WebApi calls are working as expected,
but the issue starts when I have to make calls to the MVC controllers,
if I try to [Authorize] the methods/controllers, it throws up the forms Authentication view again on MVC even though the API has already set the Authentication Header.
So I have 2 Questions:
Can We get the WebApi and MVC to share the same data in the header? in there a way in the AngularJS i can make MVC controller calls that can pass the same header information with authorization block that is set in the $http and decode it in the server side to generate my own Authentication and set the Custom.
In case the above is not possible, I was trying to make a call to a WebApi controller to redirect to a proper view which then loads the data using the bunch of WebApi calls so that user is not asked to enter the details again.
I have decorated it with the following attribute "[ActionName("MyWorkspace")] [HttpGet]"
public HttpResponseMessage GotoMyWorkspace(string data)
{
var redirectUrl = "/";
if (System.Threading.Thread.CurrentPrincipal.IsInRole("shipper"))
{
redirectUrl = "/shipper";
}
else if (System.Threading.Thread.CurrentPrincipal.IsInRole("transporter"))
{
redirectUrl = "/transporter";
}
var response = Request.CreateResponse(HttpStatusCode.MovedPermanently);
string fullyQualifiedUrl = redirectUrl;
response.Headers.Location = new Uri(fullyQualifiedUrl, UriKind.Relative);
return response;
}
and on my meny click i invoke a angular JS function
$scope.enterWorkspace = function(){
$http.get('/api/execute/Registration/MyWorkspace?data=""')
.then(
// success callback
function(response) {
console.log('redirect Route Received:', response);
},
// error callback
function(response) {
console.log('Error retrieving the Redirect path:',response);
}
);
}
i see in the chrome developer tool that it gets redirected and gets a 200 OK status but the view is not refreshed.
is there any way we can at least get this redirect to work in case its not possible to share the WebApi and MVC authentications.
EDIT
Followed Kaido's advice and found another blog that explained how to create a custom CustomBasicAuthorizeAttribute.
Now I am able to call the method on the Home controller below: decorated with '[HttpPost][CustomBasicAuthorize]'
public ActionResult MyWorkspace()
{
var redirectUrl = "/";
if (System.Threading.Thread.CurrentPrincipal.IsInRole("shipper"))
{
redirectUrl = "/shipper/";
}
else if(System.Threading.Thread.CurrentPrincipal.IsInRole("transporter"))
{
redirectUrl = "/transporter/";
}
return RedirectToLocal(redirectUrl);
}
Again, it works to an extent, i.e. to say, when the first call is made, it gets in to my method above that redirects, but when the redirected call comes back its missing the header again!
is there anything I can do to ensure the redirected call also gets the correct header set?
BTW now my menu click looks like below:
$scope.enterMyWorkspace = function(){
$http.post('/Home/MyWorkspace')
.then(
// success callback
function(response) {
console.log('redirect Route Received:', response);
},
// error callback
function(response) {
console.log('Error retrieving the Redirect path:',response);
}
);
}
this finally settles down to the following URL: http://127.0.0.1:81/Account/Login?ReturnUrl=%2fshipper%2f
Regards
Kiran
The [Authorize] attribute uses forms authentication, however it is easy to create your own
BasicAuthenticationAttribute as in your third link.
Then put [BasicAuthentication] on the MVC controllers instead of [Authorize].
I'm running a web-api webservice inside a MVC4 Forms authentication enabled website. The Forms authentication app uses the web-api webservices.
I've protected the web-api with the [Authorize] attribute.
Now when I call the web-api from the MVC4 app while the authorization ticket has expired I get an ugly browser kind of logon dialog (which doesn't work with forms authentication).
I'm not getting this on my dev machine (IIS7.5), which I don't really understand!
How can I prevent this dialog to come up? I only need to receive the 401.
John Galloway explain this nicely in his screencast at ASP.NET Web API - Authorization (A highly recommended watch)
For some api controller like one below, where you have used an Authorize attribute on it.
[Authorize]
public class CommentsController : ApiController
{
...
}
He says, If a client makes an unauthorized request, the AuthorizationFilter does the only thing that makes sense for an HTTP API - it returns an HTTP Status Code 401, Authorization Required. Again, we're back to the value of using HTTP for an API - we don't need to arrange anything, any client on any platform will know what an HTTP 401 response means.
It's up to the client to decide what to do when they get a 401. In this JavaScript / browser based sample, we'll just redirect to the login page on the client.
$(function () {
$("#getCommentsFormsAuth").click(function () {
viewModel.comments([]);
$.ajax({ url: "/api/comments",
accepts: "application/json",
cache: false,
statusCode: {
200: function(data) {
viewModel.comments(data);
},
401: function(jqXHR, textStatus, errorThrown) {
self.location = '/Account/Login/';
}
}
});
});
});
Here in the example if 401 is encountered its up to you to decide what has to be done.
Hope this helps.
Moved the site to an IIS8 server and now the problem has gone...
I am at my wits end, 7 hours and counting.
I am new to FB development and am having an issue of passing the authorization code from my JSP to my Servlet.
1.) I use the social plugin for login in my JSP as shown below
<fb:login-button>Login with Facebook</fb:login-button>
This logs the user in and allows them to grant my app access to their personal information
2.) Once login and authorization are successful, the user is forwarded to my servlet from the JSP via the code below
FB.Event.subscribe('auth.login', function (response) {
window.location = "testservlet";
});
3.) But when I attempt to get the authorization code (so that I can get the auth. token) in my Servlet, the "code" is empty, see the code I am using to retrieve below
String authCode = req.getParameter("code");
Can anyone tell me what I am doing wrong? I am sure that I am missing something so simple..or am trying to do more than is necessary, thanks in advance
I am not familiar with Facebook dev, but concerning servlets, window.location normally speaking will not take you to a servlet.
try using jquery's ajax function and pass a "code" parameter. Do something like :
$.ajax({
url: yourServletPath+"testservlet",
data:"code="+codevariable,
dataType: "whatever data type your servlet returns",
success: function(response)
{
// wtv code to be done
}
});
I have created a WCF ajax enabled web service named "Service1.svc"
"I have to call this Service In another app's using Jquery."
I have created on method in it :
[OperationContract]
public string GetMarkup()
{
string data = "<div>My HTML markup text here</div>";
return data;
}
Now I have created jquery script in my second application's html page :
var markup = "";
$.ajax({
type: "POST",
url: "http://localhost:1676/MyWCFService.svc/GetMarkup",
contentType: "application/json",
data: "{}",
dataType: "json",
success: callback,
error: function (textStatus) {
alert("ERROR");
}
});
function callback(result) {
alert("Inside Callback");
markup = result.d;
$("#divMyMarkup").html(markup);
alert(markup);
}
NOW, My Problem is that Whenever I execute this page in IE its working fine.
But In Firefox its not working. It giving alert Error Message which defined in
error: function (textStatus) {alert("ERROR");} in above ajax call.
I tried this functionality using $.get(), $("#divMyMarkup").load(serviceUrl, callback).
I also tried this by changing the datatype as json, jsonp, html .
Still I am not getting the exact solution.
Any Expert here?
In another app's using Jquery
In my experience, IE won't respect the cross-domain policy and let you do the call, not a reference...
The only way to find out is to have your html page/JQuery script calling your WCF service from http://localhost:1676/ICallWcfServicesWithJQuery.html on Firefox.
Possible solutions:
[JSONP] how to avoid cross domain policy in jquery ajax for consuming wcf service?
[flXHR][php-proxy] jQuery “getJSON” from an external domain that doesn't support JSON-P output
[JSONP] Accessing web Service from jQuery - cross domain
[.net-proxy] aspnet-proxy-page-cross-domain-requests-from-ajax-and-javascript
Test on multiple browsers, add 1oz of gin, a can of tonic and you'll be good!