跨域请求的方式即实现

Posted 2021-06-04 Jmytea

跨域请求的三种方式

解决方法

1. 前后端配合; jsonp;
2. CORS – 跨域资源共享php
3. 服务器代理

跨域请求的方式即实现

• 浏览器从一个域名的网页去请求另一个域名的资源时，域名、端口、协议任一不同，都是跨域
• 当发送方地址 和 接受放地址传输协议 域名 端口号 有任意一个不一样就是触发了 同源策略
• ajax核心目标是什么 : // 发起请求 ， 接收响应;

解决方法

一. 前后端配合; jsonp;

• 原理 http 默认端口是 80; https 默认端口是443;

• 浏览器的哪些请求不受同源策略的影响。
  i. 没有对图片进行限制;
  ii. script 的src请求数据没有限制;
  iii. link面的href也不受限制;

问. 可不可以让以上几个不受同源策略限制的标签代替 xhr 发起请求那?
答：绝对可以 让其不受同源策略影响的标签帮我发送http请求，这样的请求发起方式我们称之为jsonp

如何实现

1. 创建一个script标签，script标签里面写好请求目标路径，让script标签发起请求;script标签特性 : src请求

具体实现

<button id="btn">发送请求</button>
    <script>
        // 向ajax使用靠拢;

        // 现在版本的 jsonp 不能够按照你希望的顺序进行数据加载;
        // 执行顺序;
        function callback( res ){
            console.log(res);
        }
        // 可不可以创建一个script标签 ?  可以;
        document.getElementById("btn").onclick = function(){
            var script_ele = document.createElement("script");
            script_ele.src = "http://localhost/php/day25/06_data.php";
            // console.log(script_ele);
            // 如果想要让script标签可以发起请求那么我们必须要把标签放在页面之中;
            document.body.appendChild(script_ele);
            // 使用完了就删除;
            script_ele.onload = function(){
                script_ele.remove();
            }
        }
  </script>

为了使用起来更加便捷，我们对其进行了封装

 <script>
        function isObject( data ){
            return (typeof data === "object" && data !== null && data.constructor && data.constructor === Object)
        }
        function assign(){
            var target = arguments[0];
            for(var i = 1 ; i < arguments.length ; i ++){
                // console.log(arguments[i]);
                for(var attr in arguments[i]){
                    target[attr] = arguments[i][attr];
                }
            }
            return target;
        }
        //1 . jsonp封装;
        function toUrlData( obj , url , method){
            if( isObject(obj) ){
                var str = "";
                for(var attr in obj){
                    str += "&" + attr + "=" + obj[attr]
                }
                str = str.slice(1);
                // 如果数据发送方式是POST，那么直接返回str就可以了;
                method = method || "";
                if( method.toUpperCase() === "POST"){
                    return str;
                }
                url += "?" + str;
                return url;
            }
            return url;
        }
        function jsonp( url , callback , file_name , data ){
            var _default = {}
            _default[ file_name || "callback" ] = "global_fn_name";
            // 防止data为空;
            data = data || {};
            // console.log(_default);
            data = assign(_default , data);
            // 1. 全局函数; 在局部作用域之中声明全局函数;
            window["global_fn_name"]  = function( res ){
                callback(res);
            }
            // 2. 创建script标签 ;
            var script_ele = document.createElement("script");
            // 3. 放入url链接;
            script_ele.src = toUrlData( data , url );
            document.body.appendChild(script_ele);
            script_ele.onload = function(){
                script_ele.remove();
            }
        }
        jsonp( "http://localhost/php/day25/08_jsonp.php" , function(res){
            console.log(res);
        } , "cb")
        
    </script>

二.CORS – 跨域资源共享Php

CORS是W3C颁布的一个浏览器技术规范，其全称为“跨域资源共享”（Cross-origin resource sharing），它的意义在于，它是由W3C官方推广的允许通过AJAX技术跨域获取资源的规范 ，因此相较于JSONP而言，功能更加强大，使用起来也没有了hack的味道。

方法：在后端设置请求头

  header("Access-Control-Allow-Origin:*");
    header("Access-Control-Request-Methods:GET, POST, PUT, DELETE, OPTIONS");
    header('Access-Control-Allow-Headers:x-requested-with,content-type,test-token,test-sessid');

三. 服务器代理

服务器之间跨域是可以的，所以我们可以通过代理服务器向目标服务器发送请求。
找到nginx服务器配置文件;
进行代理配置;
这样我们就可以通过ajax跨域请求