<meta charset="utf-8">

本地json获取

1.将json文件放在assets目录下

image

2.修改配置

image

3.在component.ts中读取

getRequest() {
    return this.http.get("assets/json/report.json")
      .subscribe((res: Response) => {
        this.result = res.json()
      });
  }

JSONP

JSONP原理

ajax请求受同源策略影响，不允许进行跨域请求，而script标签src属性中的链接却可以访问跨域的js脚本，利用这个特性，服务端不再返回JSON格式的数据，而是返回一段调用某个函数的js代码，在src中进行了调用，这样实现了跨域。

引入jsonp

import jsonp from '../assets/js/jsonp'

JSONP优缺点:

jsonp优点:

完美解决在测试或者开发中获取不同域下的数据,用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，
这样客户端就可以随意定制自己的函数来自动处理返回数据了。简单来说数据的格式没有发生很大变化

jsonp缺点:

1.jsonp只支持get请求而不支持post请求
2.jsonp存在安全性问题

请求头跨域

要求后端返回给前端的响应，响应头有

Access-Control-Allow-Origin:*

php代码写

header("Access-Control-Allow-Origin:*")