JSONP 解决跨域问题

jsonp是跨域问题的一种解决方案，是一种常用的跨域手段，只支持JS脚本和JSON格式的数据本质是利用同源策略的漏洞

一、什么是跨域？

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域

二、引起跨域的原因

1.浏览器安全限制

2. 同源策略

3. XHR(XMLHttpRequest)请求

三、跨域错误

跨域错误提示

四、解决方案

1. 写入配置文件

在nginx文件夹下的conf文件里有个nginx.conf文件，在location后面加上设置头部的属性，如下：

    location / {
            root  html/dist;  #打包后的dist根目录
            autoindex on;       #开启nginx目录浏览功能
            autoindex_exact_size off;   #文件大小从KB开始显示
            charset utf-8;          #显示中文
            
            #解决跨域问题
            add_header 'Access-Control-Allow-Origin' '*'; #允许来自所有的访问地址
            add_header 'Access-Control-Allow-Credentials' 'true';
            add_header 'Access-Control-Allow-Methods' 'GET, PUT, POST, DELETE, OPTIONS'; #支持请求方式
            add_header 'Access-Control-Allow-Headers' 'Content-Type,*';
            add_header 'Access-Control-Allow-Headers' 'x_hztz_token,*';
    }

配置好nginx.conf文件后需要重启nginx服务器

2. jsonp解决

jsonp解决跨域问题

1. 服务端： 将服务端返回数据封装到指定函数中返回 callback({返回数据})
2. 客户端： 不管是我们的script标签的src还是img标签的src，或者说link标签的href他们没有被同源策略所限制，比如我们有可能使用一个网络上的图片，就可以请求得到；所以利用同源策略漏洞，将访问地址放在下面的标签的路径中，

   3. jquery中用jsonp解决

   直接上源码

   注意：jsonp只支持get请求，不支持post请求

   
       获取数据jsonp方式