I've finished the angular2 heroies tutorial https://angular.io/docs/ts/latest/tutorial/ and now I'am trying to call a ral REST api that i've made with Node, Postgresql and Express.
The angular2 code calling the API looks like this:
...
export class HeroService{
private heroesUrl = 'http://192.168.4.13:3000/api/boxes'; //URL til api
private headers = new Headers({'Content-Type': 'application/json'});
constructor(private http: Http) {}
getHeroes(): Promise<Hero[]> {
return this.http.get(this.heroesUrl)
.toPromise()
.then(response => response.json().data as Hero[])
.catch(this.handleError);
}
...
The browser console shows:
An error occurred Response {_body: Object, status: 404, ok: false, statusText: "Not Found", headers: Headers…}
EXCEPTION: Uncaught (in promise): Response with status: 404 Not Found for URL: null
Picture from REST API
And I can see that my API isen't being called.
Any ideas to what I'am missing out?
Best regards.
I figurd out that I needed to remove these lines for the backend to be called:
// Imports for faking the http service - in-memory web api
import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
import { InMemoryDataService } from './in-memory-data.service';
I thought that Angular2 would ignore them when not being used, but the caused the new backend API not to being called.
Related
I'm new to web development and am currently stucked at a problem I can't solve easily. I'm using Django3.2.6, django restframework (DRF) 3.14, vue3.0 and axios (to make API calls). I wrote an APIView to lock a model while editing an it's instance:
class LockCmAPI(APIView):
def post(self, request, **kwargs):
obj = get_object_or_404(CM, id=self.kwargs['pk'])
obj.lock()
print('locking object')
return HttpResponse(status=status.HTTP_200_OK)
For the frontend I created a Vue app that calls periodically my LockCmAPI to lock the instance and prevent others from editing it:
let vue = Vue.createApp({
delimiters: ['[[', ']]'],
data: function(){
return{
current_cm: cm_obj,
intervall: null,
}
},
methods: {
lockCmHeartbeat(){
console.log('locking');
console.log(`${BACKEND_PATH+LOCK_PATH+this.current_cm.id}/`);
axios.post(`${BACKEND_PATH+LOCK_PATH+this.current_cm.id}/`, this.current_cm, {
xsrfCookieName: 'csrftoken',
})
.then((response) => {
console.log('lock');
console.log(response);
});
}
},
mounted() {
this.lockCmHeartbeat();
this.intervall = setInterval(function(){
this.lockCmHeartbeat();
}.bind(this), FIVE_SEC_IN_MILISEC);
},
beforeDestroy() {
clearInterval(this.interval);
}
});
vue.mount('#cm_vue_block');
After running my code I get a 403 response with the message "Request failed with status code 403". When I looked further into the response I got this "{\"detail\":\"CSRF Failed: CSRF token missing or incorrect.\"}" in my responseText.
My Question:
Why does it tell me I sent an incorrect csrftoken since it's the same csrftoken in the cookie named csrftoken?
Can someone clarify it for me?
How can I fix this problem?
THX :D
For everyone who is going to have the same problem. Since the csrftoken I provided is exactly the same as the csrftoken I saw in my cookie named csrftoken. It had to be another issue...After reading the django documentation https://docs.djangoproject.com/en/4.1/ref/settings/#std-setting-CSRF_HEADER_NAME :
Default: 'HTTP_X_CSRFTOKEN' The name of the request header used for
CSRF authentication.
As with other HTTP headers in request.META, the header name received
from the server is normalized by converting all characters to
uppercase, replacing any hyphens with underscores, and adding an
'HTTP_' prefix to the name. For example, if your client sends a
'X-XSRF-TOKEN' header, the setting should be 'HTTP_X_XSRF_TOKEN'.
I realized my csrf headername is named different to djangos default CSRF_HEADERNAME. In order to solve this problem I configured xsrfHeadername in my axios request, which looks like this:
axios.post(`${BACKEND_PATH + LOCK_PATH + this.current_cm.id}/`, this.current_cm, {
xsrfCookieName: 'csrftoken',
xsrfHeaderName: 'X-CSRFTOKEN',
})
This is a function on my front-end that makes the request.
function postNewUser(){
fetch(`http://12.0.0.1:8080/users/test`, {
method: 'POST',
body: {nome: name, email: "test#test.com.br", idade: 20}
})
}
This is my back-end code to receive the request.
router.post('/users/:id', koaBody(), ctx => {
ctx.set('Access-Control-Allow-Origin', '*');
users.push(ctx.request.body)
ctx.status = 201
ctx.body = ctx.params
console.log(users)
})
For some unknown reason I receive nothing. Not even a single error message. The "console.log()" on the back-end is also not triggered, so my theory is that the problem is on the front-end.
Edit
As sugested by gnososphere, I tested with Postman, and it worked. So now i know the problem must be on the fron-end code.
You can try your backend functionality with Postman. It's a great service for testing.
the request would look something like this
If the problem is on the frontend, double check your fetch method by posting to a website that will return data and logging that in your app.
I have written the piece of code below:
static async postSearchResult(httpContext: HttpContext, injector: Injector) {
const log = injector.get(Log);
const service = injector.get(Service);
try {
let result = await service.redirectToUI(JSON.parse(httpContext.getRequestBody()));
httpContext.ok(result, 200, {'Content-Type': 'application/json'});
} catch (e) {
httpContext.fail(e, 500);
}
}
protected redirectToUI(response: any) {
// If any post api call happened then it should open web browser and pass some field as query parameter
window.open("https://www.google.com?abc=response.abc");
return response ? response : "failed";
}
Here I am getting the following error :
Execution failed ReferenceError: Window is not defined
What am I doing wrong?
What you are trying to accomplish doesn't make much of a sense. Lambda is a back-end service. To open new browser window, you need to use front-end JavaScript, not back-end Node (on the back-end, you have no access to the front-end window object).
If you want to open a new browser window as a reaction to some back-end response, then you can send some indicator in the HTTP response (i.e shouldOpenNewWindow: true as a part of the response object), parse that response on the front-end and it the indicator is present, then you can issue window.open command. But it has to be done on front-end.
So I am making the web app on top of angular 5.
The problem is when I try to call the api endpoint from the server.
When I get an error response (400+), it seems like on Safari it always throws and breaks the app.
ERROR - TypeError: Type error
ERROR CONTEXT – DebugContext_ {view: Object, nodeIndex: 0, nodeDef: Object, …}
But on Chrome it can handle the error correctly like this.
GET https://api.xxxx.com/projectname/v1.0/validation/access-token 400 (Bad Request)
This is my source code
const baseUrl = environment.apiUrl;
const fullUrl = baseUrl + '/productname/v1.0/validation/access-token';
const headers = new HttpHeaders({
'X-Access-Token': access_token
});
this.http.get(fullUrl, {
headers: headers
}).subscribe((res: any) => {
console.log(res, 'http res');
},
(error: any) => {
console.log(error, 'http err');
});
Anyone has an idea how to fix this?
After a lots of debugging, I figured out the issue that was causing for me. In every request, I was sending the name of the mobile device and for my case it was, Shashank's iPhone.
Calling setRequestHeader with single quote in the header was failing and hence all the HTTP request broke.
I had a Flutter App using an Inapp_Webview that points to an Angular 1.X web application and was also receiving a TypeError for all XHR requests after changing my iOS device name to include an apostrophe.
(*wanted to leave a comment, but didn't have the rep yet)
I have an Angular service that has successfully posted to Firebase and to Postgres through a PHP middleware called DreamFactory. The Angular app works. The problem is in the Nestjs controller #Post() or service add() below. I want to post a json object called recordData. I'm getting an empty object instead of my json data, which is correct in the Angular service. Server console.log results:
recordData in controller: {}
req: {}
recordData in service: {}
The Angular CORS proxy server is working in the Angular dev terminal:
[HPM] POST /api/members -> http://localhost:3000
Angular is using the dev server port 4200, Nestjs is on 3000. The typical development setup.
What's wrong? The payload isn't arriving in the controller. I'm new to server coding.
Angular http.service.ts:
private api = '/api/';
...
public addRecord(dbTable: string, recordData): Observable<any> {
return this.http
.post(`${this.api}${dbTable}`, recordData);
// For this example I'm posting to localhost:3000/api/members db table.
}
My members Nest controller. #Get works, #Post doesn't.
#Controller('api/members') // /members route
export class MembersController {
constructor(private readonly membersService: MembersService) {}
#Get()
async findAll(): Promise<Members[]> {
return await this.membersService.findAll();
}
#Post()
async addItem(#Req() req, #Body() recordData: AddMemberDto) {
console.log('recordData in controller: ', recordData);
console.log('req: ', req.body);
const result: Members = await this.membersService.addItem(recordData);
if (!result)
throw new HttpException('Error adding new Member', HttpStatus.BAD_REQUEST);
return result;
}
There were several problems, some of which I eventually fixed in the edits above. However, the main problem was I needed header info as such. While I had these for other backends they didn't seem to be required for Nestjs. Wrong idea. This is my Angular http.service setup.
private headers = new HttpHeaders()
.set('content-type', 'application/json')
.set('observe', 'response');
public addRecord(dbTable: string, recordData): Observable<any> {
return this.http
.post(`${this.api}${dbTable}`, recordData, {headers: this.headers});
}
I also want to note that many implementations of Nestjs use a dto type for the data param, so recordData: AddMemberDto in the Nestjs controller. I removed it and it works fine.