美文网首页
ajax、fetch 跨域携带cookie

ajax、fetch 跨域携带cookie

作者: 钱学敏 | 来源:发表于2018-06-22 16:14 被阅读0次

    一、ajax 跨域携带cookie

    原生ajax请求方式:

    var xhr = new XMLHttpRequest();  
    xhr.open("POST", "http://xxxx.com/demo/b/index.php", true);  
    xhr.withCredentials = true; //支持跨域发送cookies
    xhr.send();
    

    jquery的post方法请求:

     $.ajax({
        type: "POST",
        url: "http://xxx.com/api/test",
        dataType: 'jsonp',
        xhrFields: {withCredentials: true},
        crossDomain: true,
    })
    

    服务器端设置:

    header("Access-Control-Allow-Credentials: true");
    header("Access-Control-Allow-Origin: http://www.xxx.com");
    

    二、 fetch 带cookie跨域访问

    前后端分离,用nginx做请求跨域处理。用了fetch来替代ajax,访问正常,但是请求时没带cookie,就加了credentials: "include"

    var myHeaders = new Headers();
    fetch(url, {
                  method: 'GET',
                  headers: myHeaders,
                  credentials: "include"
                })
    

    在后台配置

    response.setHeader("Access-Control-Allow-Credentials","true");
    

    三、前后端分离联调 setCookie出现问题的解决办法

    1、问题原因:cookie的作用域是domain本身以及domain下的所有子域名。
    后端PHP用setcookie 来设置网站的cookie,该函数的用法如下:

    bool setcookie ( string $name [, string $value [, int$expire = 0 [, string$path [, string $domain [, bool$secure = false [, bool$httponly = false ]]]]]] )
    

    它的第五个参数$domain决定了cookie的作用域。作用域的限制使得setCookie失败

    2、解决办法
    前端电脑绑定host

    // vim /etc/hosts
    # host绑定
    127.0.0.1 dev.bb.aa.ke.com
    

    webpack代理设置如下

    proxy: {
                '/api/**': {
                    target:'http://develop.bb.aa.ke.com',
                    secure: false,
                    changeOrigin: true, // 第一种方式 代理服务器会在请求头中加入相应Host首部
                   // 第二种方式 手动写首部host
                    /*headers: {
                        host: 'develop.bb.aa.ke.com'
                    }*/
                }
            }
    

    开发时,浏览器访问 http://dev.bb.aa.ke.com:6666/

    相关文章

      网友评论

          本文标题:ajax、fetch 跨域携带cookie

          本文链接:https://www.haomeiwen.com/subject/unjhyftx.html