WebAPI2 consume form angular2 error Not Found - web-services

I wont to consume Web Api2 async in Angular2 project, but i have some errors, when i try a request to the method.
My method is:
private baseUrl2 ='http://localhost:50348/api/Users/GetUsers'
getuser(): Observable<IUser[]>
{
console.log(this.baseUrl2);
return this.http.get(this.baseUrl2)
.map(res => res.json())
.do(data => console.log('getuser: ' + JSON.stringify(data)))
.catch(this.handleError);
}
My [HttpGet] method at WebApi is :
[HttpGet]
public IEnumerable<User> GetUsers()
{
return db.Users.ToList();
}
I have configure Microsoft.AspNetCore.Cors also and at Startup.cs i put AllowSpecificOrigin policy:
public void ConfigureServices(IServiceCollection services)
{
services.AddCors(options =>
{
options.AddPolicy("AllowSpecificOrigin",
builder => builder.WithOrigins("http://localhost:50348/"));
});
}
public void Configure(IApplicationBuilder app)
{
// Shows UseCors with named policy.
app.UseCors("AllowSpecificOrigin");
}
But when i run my angular project a call method form angular project i have an error as:
Object { _body: Object, status: 404, ok: false, statusText: "Not
Found", headers: Object, type: null, url:
"http://localhost:50348/api/Users/Ge…" }
When i try to call web api method from browser , not form angular project ,it works
[{"Country":"test","Id":1,"Name":"test","OtherInfo":"test","Surname":"test"}]
Whats wrong? Could you help me?

You can try
[HttpGet]
public IEnumerable<dynamic> Get()
{
return _context.Employee.ToList();
}

Related

Expecting to get "non_field_errors: Unable to log in with provided credentials", but not getting it

Expectation: when wrong login credentials are provided, "non_field_errors: Unable to log in with provided credentials" is returned, such as below (screenshot from a tutorial which I'm following verbatim)
Reality: instead I'm getting the error below.
This gets printed to the console:
POST http://127.0.0.1:8000/api/v1/token/login 400 (Bad Request)
Interestingly I get this same error when I try to create users with passwords that are too short. I'm not having any issues with axios or the server when I provide the right credentials for log in, or use passwords of sufficient length when creating new users. When trying to catch errors such as these that I'm failing to get the expected result.
My code for catching the error is the same as in the tutorial:
methods: {
submitForm() {
axios.defaults.headers.common['Authorization'] = ''
localStorage.removeItem('token')
const formData = {
username: this.username,
password: this.password
}
axios
.post('/api/v1/token/login', formData)
.then(response => {
const token = response.data.auth_token
this.$store.commit('setToken', token)
axios.defaults.headers.common['Authorization'] = 'Token ' + token
localStorage.setItem('token', token)
this.$router.push('/dashboard/my-account')
})
.catch(error => {
if (error.response) {
for (const property in error.response) {
this.errors.push(`${property}: ${error.response.data[property]}`)
}
} else if (error.message) {
this.errors.push('Something went wrong. Please try again!')
}
})
}
}
Is there something in the server settings that I should change?
I'm using Django, rest framework, and djoser.
Don't know if you're using a custom exception handler in Django rest framework but it looks like the issue could be from the way you're handling the error in your frontend application.
You can handle the errors like this.
methods: {
submitForm() {
axios.defaults.headers.common['Authorization'] = ''
localStorage.removeItem('token')
const formData = {
username: this.username,
password: this.password
}
axios
.post('/api/v1/token/login', formData)
.then(response => {
const token = response.data.auth_token
this.$store.commit('setToken', token)
axios.defaults.headers.common['Authorization'] = 'Token ' + token
localStorage.setItem('token', token)
this.$router.push('/dashboard/my-account')
})
.catch(error => {
if (error.response) {
// The request was made and the server responded with a status code
// that falls out of the range of 2xx
console.log(error.response.data);
console.log(error.response.status);
console.log(error.response.headers);
} else if (error.request) {
// The request was made but no response was received
// `error.request` is an instance of XMLHttpRequest in the browser and an instance of
// http.ClientRequest in node.js
console.log(error.request);
} else {
// Something happened in setting up the request that triggered an Error
console.log('Error', error.message);
}
console.log(error.config);
})
}
Can be found here

Blazor Server + Azure B2C Identity - Change Cookie Name

When creating a stock Blazor Server app (File/New) with Authentication for B2C you get a Startup.cs that looks like the following.
B2C itself is working, but I'm trying to simply change the Cookie name. By default it appears to be (.AspNetCore.AzureADB2CCookie)
How can I change it?
I've tried the following which doesn't appear to work:
1)
services.ConfigureApplicationCookie(options =>
{
options.Cookie.Name = UIConstants.WebSessionCookieName;
});
2)
.AddCookie(x =>
{
x.Cookie.Name = UIConstants.WebSessionCookieName;
});
Startup.cs
public void ConfigureServices(IServiceCollection services)
{
services.AddAuthentication(AzureADB2CDefaults.AuthenticationScheme)
.AddAzureADB2C(options => Configuration.Bind("AzureAdB2C", options));
services.AddRazorPages();
services.AddServerSideBlazor();
services.AddSingleton<WeatherForecastService>();
services.AddHttpContextAccessor();
}
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
else
{
app.UseExceptionHandler("/Error");
// The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
app.UseHsts();
}
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();
app.UseAuthentication();
app.UseAuthorization();
app.UseEndpoints(endpoints =>
{
endpoints.MapControllers();
endpoints.MapBlazorHub();
endpoints.MapFallbackToPage("/_Host");
});
}
services.Configure<CookieAuthenticationOptions>(
AzureADB2CDefaults.CookieScheme, options =>
{
options.Cookie.Name = UIConstants.WebSessionCookieName;
});

Im trying to mock a function from a service but Jest keeps calling the actual function instead of the mock function

I'm using Jest to test a function from a service that uses axios to make some api calls. The problem is that Jest keeps calling the actual services function instead of the mocked service function. Here is all of the code:
The tests:
// __tests__/NotificationService.spec.js
const mockService = require('../NotificationService').default;
beforeEach(() => {
jest.mock('../NotificationService');
});
describe('NotificationService.js', () => {
it('returns the bell property', async () => {
expect.assertions(1);
const data = await mockService.fetchNotifications();
console.log(data);
expect(data).toHaveProperty('data.bell');
});
});
The mock:
// __mocks__/NotificationService.js
const notifData = {
bell: false,
rollups: [
{
id: 'hidden',
modifiedAt: 123,
read: true,
type: 'PLAYLIST_SUBSCRIBED',
visited: false,
muted: false,
count: 3,
user: {
id: 'hidden',
name: 'hidden'
},
reference: {
id: 'hidden',
title: 'hidden',
url: ''
}
}
],
system: [],
total: 1
};
export default function fetchNotifications(isResolved) {
return new Promise((resolve, reject) => {
process.nextTick(() =>
isResolved ? resolve(notifData) : reject({ error: 'It threw an error' })
);
});
}
The service:
import axios from 'axios';
// hardcoded user guid
export const userId = 'hidden';
// axios instance with hardcoded url and auth header
export const instance = axios.create({
baseURL: 'hidden',
headers: {
Authorization:
'JWT ey'
}
});
/**
* Notification Service
* Call these methods from the Notification Vuex Module
*/
export default class NotificationService {
/**
* #GET Gets a list of Notifications for a User
* #returns {AxiosPromise<any>}
* #param query
*/
static async fetchNotifications(query) {
try {
const res = await instance.get(`/rollups/user/${userId}`, {
query: query
});
return res;
} catch (error) {
console.error(error);
}
}
}
I've tried a couple of variations of using require instead of importing the NotificationService, but it gave some other cryptic errors...
I feel like I'm missing something simple.
Help me please :)
The problem is that Jest keeps calling the actual services function instead of the mocked service function.
babel-jest hoists jest.mock calls so that they run before everything else (even import calls), but the hoisting is local to the code block as described in issue 2582.
I feel like I'm missing something simple.
Move your jest.mock call outside the beforeEach and it will be hoisted to the top of your entire test so your mock is returned by require:
const mockService = require('../NotificationService').default; // mockService is your mock...
jest.mock('../NotificationService'); // ...because this runs first
describe('NotificationService.js', () => {
it('returns the bell property', async () => {
...
});
});

Ionic2 proxies not working with ionic run but working with ionic serve?

For my ionic.config.json I have:
{
"name": "TSICMobile",
"app_id": "6e4680fa",
"typescript": true,
"v2": true,
"proxies": [
{
"path": "/api",
"proxyUrl": "http://192.168.0.105:8081/api"
}
]
}
In my provider (user-data.ts, based on Ionic2 conference app) I have for example:
login(credentials) {
return new Promise((resolve, reject) => {
this.http.post(
'/api/Login',
JSON.stringify(credentials),
{ headers: this.contentHeader }
).subscribe(res => {
console.log('api/Login return');
this.data = res.json();
if (this.data.authenticated === true) {
this.storage.set('TSIC_USER_PROFILE', JSON.stringify(this.data.tsiC_USER_PROFILE));
this.storage.set('TSIC_USER_ROLES', JSON.stringify(this.data.listRoles));
this.storage.set('tsic_id_token', this.data.token);
this.events.publish('user:login');
resolve(true);
} else {
reject('not authenticated');
}
}, error => {
console.log('api/Login failed');
reject(error);
});
});
}
when running:
ionic serve --lab -c
the proxy works perfectly and posts to http://192.168.0.105:8081/api/Login
when running
ionic run android -c
the post url is file://api/Login, and obviously fails.
Need assistance in understanding why (seemingly), the proxy is not in effect when running on device, and what I may be doing wrong or not understanding.
You don't need a proxy when you are on your device because ionic can handle the cors there. You need the proxy on serve because the browser is trying to handle the CORS and its more strict with it.
What I suggest you do is check if window.cordova exists and if it does use the normal url and otherwise the proxy url.
Like this:
login(credentials) {
return new Promise((resolve, reject) => {
this.http.post(
window.cordova?:'http://192.168.0.105:8081/api/Login':'/api/Login':,
JSON.stringify(credentials),
{ headers: this.contentHeader }
).subscribe(res => {
console.log('api/Login return');
this.data = res.json();
if (this.data.authenticated === true) {
this.storage.set('TSIC_USER_PROFILE', JSON.stringify(this.data.tsiC_USER_PROFILE));
this.storage.set('TSIC_USER_ROLES', JSON.stringify(this.data.listRoles));
this.storage.set('tsic_id_token', this.data.token);
this.events.publish('user:login');
resolve(true);
} else {
reject('not authenticated');
}
}, error => {
console.log('api/Login failed');
reject(error);
});
});
}
Short answer is the proxy is really only useful for ionic serve. For ionic run you need to use cordova-plugin-whitelist
https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-whitelist/
What this means for you though is, you'll have to swap your URIs during build. So instead of just /api/myAwesomeService you'll actually have http://192.168.0.105:8081/api as your URI when running on a real device.
this official article exactly shows you how to deal with this situation.
http://blog.ionic.io/handling-cors-issues-in-ionic/
an easier way is defining a Constant just like this:
.constant('SERVER', {
// when not using proxy
//url: 'https://myextsite.com/api/public/index.php/v1'
// when using proxy
url: 'v1'
})
ref: https://forum.ionicframework.com/t/solved-ionicview-app-http-request-to-external-api/18696/3

Angular 2 observable error testing with jasmine

I want to test this function:
register(): void {
let user: User = new User();
user.username = this.username.value;
user.email = this.email.value;
user.password = this.password.value;
this._authService.register(user)
.map(rsp => rsp.json())
.subscribe((response) => { //
this._router.parent.navigate(["Login"]); //
}, (error) => {
this.responseError = JSON.parse(error._body).message;
}, () => {
this._authService.login(user)
.map(rsp => rsp.json())
.subscribe((data: any) => { //
this._authService.handleSuccessLogin(data, user);
this._router.parent.navigate(["../Game"]);
});
});
}
My _authService using http but I want to fake that call. I have tried to call through in it and mocking the http, but even if my response was 4xx it ran on the success part. Is it possible to test the error part somehow?
To simulate an error, you need to use the mockError method of the MockConnection. It accepts an Error object as parameter not a Response one. To be able to provide hints like status code, you could extend the Error class like that:
class ResponseError extends Error {
status: number;
(...)
}
and use it this way:
it('Should return something', inject([XHRBackend, HttpService, Injector], (mockBackend, httpService, injector) => {
mockBackend.connections.subscribe(
(connection: MockConnection) => {
if (connection.request.url === 'file1.json') {
var err = new ResponseError();
err.status = 404;
connection.mockError(err);
(...)
In this case, an error is thrown in your data flow and gotten for example into the second callback specified in the subcribe method.