配置带cookie的跨域请求

前端vue,后端服务器nginx,后端应用php

其实只要设置header("Access-Control-Allow-Origin:*");就可以让其他域下的页面访问本域名下的接口,不配置的话请求会被阻止,虽然php后台已经接收并处理了请求,浏览器也已经接收到返回数据,但是chrome浏览器接收到返回数据后并不会传递给页面,而页面会收到请求失败的返回,也就是跨域。导致页面不能正常接收跨域请求的返回。

有的时候需要传cookie,而不是以参数的形式传递,不跨域的情况下cookie会自动携带,所以需要让后台接收前端传递的跨域cookie。不然还是会向上述一样,后台接收并处理了请求,浏览器接收到了请求,但是浏览器不会把返回数据传递给页面

配置如下

前端vue,使用的axios请求


      var url = this.url

      this.axios.post(url, 
        postData, 
        {
          // 单独配置,前端不配置这个的话,跨域会失败,需要后端协助支持
          withCredentials: true
        }
      ).then(res=>{
        console.log(res.data)
      }).catch(error=>{
        console.log(error)
      })

或者在main.js中import axios后加入

axios.defaults.withCredentials = true

这样就不用给每个axios.post加参数了

 

后端php,配置header

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

如此两者配合使用,可以是跨域的请求,携带当前域和跨域可访问的cookie

a.example.com下的页面,访问b.example.com的接口,可以把cookie设置到.example.com的domain下,注意是点开始的,不要忘记了.点。这样b.example.com就允许了a.example.com的访问,并且支持cookie的携带和获取

 

nginx中可以直接允许所有origin跨域

            add_header "Access-Control-Allow-Origin" $http_origin;
            add_header "Access-Control-Allow-Credentials" "true";

但是这样可能会与代码中的header()造成冲突,

发布了278 篇原创文章 · 获赞 54 · 访问量 29万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览