跨域的几种方式 （jsonp）

跨域（跨源）：越过、超出，某个区域，某个范围。

　　不同源就叫跨域

源（协议、域名、端口）

同源策略：是一种约定，它是浏览器最核心也最基本的安全功能。

　　同域名、同端口、同协议。就叫同源

只要控制台出现 Access-Control-Allow-Origin 就是跨域了。

解决跨域问题的几种方案：

　　1.设置（Access-Control-Allow-Origin）请求头，服务器得同意。  <高版本才能用>

　　　　CORS：是一个W3C标准，全称是“跨域资源共享”（Cross-origin resource sharing）

　　　　浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加请求，但用户不会有感觉，因此，实现CORS通信的关键是*服务器*。

　　　　只要服务器实现了CORS接口，就可以跨源通信。高版本的XMLHttpRequest + 服务器权限解决跨域问题

　　2.服务器代理

　　　　通过服务器的文件能访问第三方数据。这个服务器文件又和当前请求的页面同源。这个时候，当前请求的页面去访问服务器文件，就等同于直接请求第三方资源。

 

　　　　在Vue、React中：（课件、视频：2019-02-18）

　　　　　　react-create-app  跨域    通过 porxy 去跨域：

　　　　　　　　1）找到DevServer 文件 —>start.js

　　　　　　　　2）里面引入 setupProxy.js （跨域的中间件）

　　　　　　　　　　require('../src/setupProxy')(devServer);

 

　　　　　　　　　　setupProxy文件中有：　　　　　　　

const proxy = require("http-proxy-middleware");
module.exports = function(app) {
　　app.use(()=>{
　　　　proxy("/api",{ 
　　　　　　target:'跨域的地址',
　　　　　　changeOrigin:true
　　　　});
　　})
}

　　　　　　　　3）可以用 axios ，也可以用 fatch， .....　　　　　　　　

axios.get('/api?json=true')
.then(e=>{
　　console.log(e);
});

 

　　　　　

　　3.jsonp (json+padding) 把数据内填充起来。其实就是函数调用。 （长得像这样：fn（{......}））  <所有浏览器都兼容>

　　　　<link href = " "> 会尽可能解析css代码     <img src = " " >

　　　　<script src = " "> 会尽可能解析javaScript代码（引入的文件，和后缀名关系不大，和里面的代码关系才大。比如可以引入txt / ese...都是可以读的）

 

　　　　script 标签中的 src 能够直接跨域访问资源，并且尽量解析 js 代码。

　　　jsonp 必须具备以下条件：

　　　　　1.保证全局有个函数

　　　　　2.数据必须是这个函数的调用格式  

　　　　　3.当要请求数据的时候，创建一个script标签，把src等于请求的接口

　　　　　　再把script标签插入到页面，这个时候就做到了按需请求。

例子：

        function fn2(data) {
            console.log(data);
        };
        //window.onload = function () {
            document.onclick = function () {
                let oS = document.createElement('script');
                oS.src = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=小燕子&cb=fn2';
                //oS.src = 'http://localhost/jsonp?callback=fn2';
                document.getElementsByTagName('head')[0].appendChild(oS);
                oS.remove();
            }
        //}