从Angular项目发送POST或GET请求到Python服务器

如何解决从Angular项目发送POST或GET请求到Python服务器

我用http.server python库制作了一个小型服务器。

import http.server
import socketserver

class  SimpleHTTPRequestHandler(http.server.SimpleHTTPRequestHandler):
    def do_GET(self):
        print("get")

    def do_POST(self):
        print("post")
        content_length = int(self.headers['Content-Length'])
        msg = self.rfile.read(content_length).decode('utf-8')
        print(msg)

if __name__ == '__main__':
    PORT = 8080
    Handler = SimpleHTTPRequestHandler
    with socketserver.TCPServer(("",PORT),Handler) as httpd:
        print("serving at port",PORT)
        try:
            httpd.serve_forever()
        except KeyboardInterrupt:
            print("-- stop --")
            exit()

我用一个简单的python脚本进行了测试

import socket

def mypost():
    s = socket.socket(socket.AF_INET,socket.SOCK_STREAM)
    s.connect(("localhost",8080))
    txt = "1234"
    post = "POST /test.txt HTTP/1.0\nContent-Length: " + str(len(txt)) + "\nContent-Type: plain/text\n\n" + txt
    s.send(post.encode())

def myget():
    s = socket.socket(socket.AF_INET,8080))
    post = "GET HTTP/1.0"
    s.send(post.encode())

获取和发布都由服务器接收。 然后，我想用我的角度项目发送请求。

import { Component,OnInit } from '@angular/core';

import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'srp-send-request',template: `
  <button  (click)="postMsg()">RUN</button >
  `,styles: [
  ]
})
export class SendRequestComponent implements OnInit {

  constructor(private http: HttpClient) {
  }

  ngOnInit(): void {}

  public postMsg() {
    var url = 'http://localhost:8080';
    var msg = "1234";
    var option = {'Content-Length' : msg.length,'Content-Type': 'plain/text','body' : msg};
    var ret = this.http.get<any>('localhost:8080');
    var ret = this.http.request('POST',url,option);
    console.log(ret);
  }
}

我可以单击该按钮，但是服务器什么也没收到。 我是Angular的新手，所以我现在没有做错什么。我的请求格式是否正确？

解决方法

如果我没记错的话，Angular的HttpClient get和post方法都返回一个Observable对象，您必须订阅该对象才能获取数据由服务器发送。

public postMsg() {
    var url = 'http://localhost:8080';
    var msg = "1234";
    var option = {'Content-Length' : msg.length,'Content-Type': 'plain/text','body' : msg};
    this.http.get<any>('localhost:8080').subscribe((data) => console.log(data));
    this.http.request('POST',url,option).subscribe((data) => console.log(data));
  }

Angular网站的http guide相当完整，涵盖了许多主题，包括发出GET，POST，...请求，处理响应，拦截，传入和传出查询...