美文网首页
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

    一、ajax 跨域携带cookie 原生ajax请求方式: jquery的post方法请求: 服务器端设置: 二、...

  • Ajax跨域

    CORS Ajax跨域不携带COOKIE PHP jQuery

  • fetch、axios的跨域配置

    fetch默认不携带cookie etch发送请求默认是不发送cookie的,不管是同域还是跨域;那么问题就来了,...

  • 跨域ajax携带cookie

    最近在使用 laravel 开发时碰到了需要在跨域ajax请求中携带cookie的需求,参考Laravel开启跨域...

  • ajax 跨域携带COOKIE

    背景:项目中用pdf.js插件打开pdf流文档 遇到问题如下:在PC浏览器中通过插件打开pdf流文件,cookie...

  • SpringBoot+Vue数据交互

    后端框架Spring Boot,前端框架vue 1. 跨域+携带cookie 跨域-携带cookie 2. 拦截器...

  • AJAX 请求网络

    一、引入jquery文件 二、请求方式 三、解决跨域访问 四、请求时携带cookie 五、AJAX跳转页面 六、跳...

  • Ajax跨域请求携带cookie问题

    在跨域的请求中,请求不会自动带上cookie,需要前后端配合设置才可以。主要是以下几点: 服务端需要设置Acces...

  • nodejs基础3-数据通信:fetch,ajax2.0和web

    数据通信: ajax、跨域 fetch jsonp Ajax2.0->FormData:直接提交表单,文件 Web...

  • cookie 跨域访问的解决方案

    资料: 理解Cookie和Session机制 Ajax跨域请求中的Cookie问题(默认不带cookie等凭证) ...

网友评论

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

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