配置带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()造成冲突，