如何解决跨域问题

 CORS:同源策略

                同源：协议、端口、域名完全相同

                不同源地址之间请求我们称之为：跨域请求

请求源(客户端)：

                file:///E:/ftp/ajax/source/14.%E8%B7%A8%E5%9F%9F.html

                目标(服务器)：http://localhost:3000

如何解决跨域：

1. 在服务器端添加允许跨域
2. jsop技术
3. 中转服务器   
4. 利用第三方api

（一）、在服务器端添加允许跨域：

允许跨域：

response.setHeader('Access-control-Allow-Origin',               )

(二)、利用jsonp访问服务器：

    var url = "http://cache.video.iqiyi.com/jp/avlist/202861101/1/?callback=jsonp9";
    var JSONP = document.createElement('script');//创建script标签
    JSONP.src = url;
    document.body.appendChild(JSONP);


    function  jsonp9(data){

            console.log(data);
        }

（三）、中转服务器：

<button>请求数据</button>
    <script>
        document.querySelector('button').onclick = function () {
            //目标地址
            var disURL = "http://apis.juhe.cn/cook/query?key=a4edfe4b6c01ede019e25ebce28c05ef&menu=麻婆豆腐&rn=10&pn=1";
            //中转服务器地址
            var url="http://localhost:8088?myUrl="+disURL;
            // console.log(url);
            ajax("GET",url,function(data){
                console.log(data);
            });
        }
    </script>

（四）、其他第三方的API:

向远程服务器发起的请求：

fetch(url,parms)     参数说明：URL（服务器地址）；parms(查询参数   请求类型，头信息)

说明：fetch方法会返回一个promise对象

            then( fn ):当接收到服务器响应时，会执行then方法。（返回promise对象）。

 <button onclick="getData()">请求数据</button>
    <script>
        var url = 'http://localhost:3000';

        function getData() {
            fetch(url).then(function (response) { //向服务器发起请求; 接受到服务器响应时，执行
                //说明：text() 按照字符串格式接收  json()将字符串解析为对象
                // return response.json();
                return response.text();
            }).then(function (data) {
                console.log(data);
            });
        }
    </script>

fetch与post方法：

 <button onclick="getData()">获取数据</button>
    <script>
        var adm='username=admin&password=123';
        function getData(){
            var url='http://localhost:5000';
            fetch(url,{
                method:'post',
                body:adm
            }).then(function(resp){
                return resp.json();
            }).then(function(data){
                console.log(data);
            });
        }

    </script>

axios:

post、get无参：

        axios({
                method:'post/get',
                url:'http://localhost:5000'
            }).then(function(resp){
                console.log(resp.data);
            });

        get有参：

        axios({
                method:'get',
                url:'http://localhost:4000',
                data:'name=java'
            }).then(function(res){
                console.log(res.data.data);
            });

      post有参：

           axios({
                method:'post',
                url:'http://localhost:5000',
                data:'username=admin&password=123'
            }).then(function(res){
                console.log(res.data);
            });