angular——http请求及跨域解决方案(cors和jsonp)

一.http请求：get和post

1.app.module.ts 中引入HttpClientModule 并注入

// 引入跟服务器交互的模块，进行get和post请求
// 第二个是使用jsonp解决跨域问题
import { HttpClientModule,HttpClientJsonpModule } from '@angular/common/http';

  imports: [
    HttpClientModule,    // 注入
    HttpClientJsonpModule,
  ],

2.在组件中引入HttpClient 并在构造函数中声明 news.components.ts

// 第二个模块：使用post请求时需要设置请求头
import { HttpClient,HttpHeaders } from '@angular/common/http';

constructor(public http:HttpClient) { }

3.get请求函数

  public data:any;

  getData(){
    let api='http://127.0.0.1:8000/api/getData/'
    // HttpClient模块底层使用的是Rxjs，所以使用subscribe获取数据
    this.http.get(api).subscribe((resp)=>{
      console.log(resp);
      // 将返回的json数据赋值给data，即可通过双向数据绑定动态的修改页面数据
      this.data=resp;
    })
  }

4.post请求

  postData(){
    let api='http://127.0.0.1:8000/api/postData/'
    let data={username: 'kzzf', age: 20};
    // post请求时需要额外设置请求头
    const httpOptions = {
      headers: new HttpHeaders({ 'Content-Type': 'application/json' })
      };
    // 默认接收json的返回值，返回字符串时报错
    this.http.post(api, data, httpOptions).subscribe(resp=>{
      console.log(resp);
    })
  }

二.后端解决跨域问题——cors

上述两种请求返回的都是json数据，会造成跨域问题，可通过CORS解决
django的配置部分参考：
https://blog.csdn.net/weixin_43667990/article/details/100716858

1.get视图

def get_data(request):
    data = [
        {"id": 1, "title": "西红柿"},
        {"id": 2, "title": "番茄"},
        {"id": 3, "title": "土豆"},
    ]
    # django 2.2.4 版本，非字典格式的json数据需要设置safe属性
    return JsonResponse(data, safe=False)

2.post视图

def post_data(request):
    # 前后端分离后，前端提交的json数据存在request.body中
    data = json.loads(request.body)
    username = data.get('username')
    age = data.get('age')
    print('username=%s, age=%s' % (username, age))
    return JsonResponse({'status': 'ok'})

三.axios请求

angular中除了使用HttpClientModule，还可使用第三方模块axios请求数据
简单示例
1.安装axios
项目根目录中执行

# --save会把axios加到package.json文件中
cnpm install axios --save

2.组件中引入axios

import axios from 'axios';

3.get请求示例

  getDataAxios(){
    let api='http://127.0.0.1:8000/api/getData/'
    axios.get(api).then(function(resp){
      // 正常响应后执行
      console.log(resp);
      console.log(resp.data)  // data属性为后端返回的数据
    }).catch(function(error){
      // 异常响应后执行
      console.log(error)
    }).finally(function(){
      // 都会执行
      console.log("finnally")
    })
  }

四.jsonp解决跨域问题

无需修改django的配置，但需要修改对应的视图函数
1.请求函数

  getDataJsonp(){
    // 这个get请求也会有跨域问题
    let api='http://127.0.0.1:8000/api/getData/'
    // 第二个参数需要跟后端对应上，会作为参数拼接在url后面，后端根据callback字段获取函数名，函数名是自动生成的
    // 示例：http://127.0.0.1:8000/api/getData/?callback=ng_jsonp_callback_0
    this.http.jsonp(api,'callback').subscribe(resp=>{
      console.log(resp);
    })  
  }

2.后端处理

def get_data(request):
    # jsonp时获取前端传递的回调函数名，字段名需前后端统一
    func = request.GET.get("callback")
    data = [
        {"id": 1, "title": "西红柿"},
        {"id": 2, "title": "番茄"},
        {"id": 3, "title": "土豆"},
    ]
    # jsonp解决跨域问题时的返回值
    return HttpResponse("%s(%s)" % (func, json.dumps(data)))

参考：https://www.bilibili.com/video/av59049211?from=search&seid=485997827014437418