Vue 加入 withCredentials 后无法进行跨域请求

Posted wcn123456

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue 加入 withCredentials 后无法进行跨域请求相关的知识,希望对你有一定的参考价值。

Vue和django的前后端分离项目,之前通过在django中允许跨域访问实现了跨域请求,但为了使每个请求带上session信息,我设置了withCredentials ,即:

axios.defaults.withCredentials = true

然后跨域请求时会出现如下问题:

Response to preflight request doesn‘t pass access control check: The value of the ‘Access-Control-Allow-Origin‘ header in the response must not be the wildcard ‘*‘ when the request‘s credentials mode is ‘include‘. Origin ‘http://localhost:8080‘ is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

解决方案

 

  1. Access-Control-Allow-Origin 字段必须指定域名,不能为*

  2. Access-Control-Allow-Credentialstrue

main.js中添加拦截器

Vue.http.interceptors.push((request, next) => {

     request.credentials = true;

        next(); 
}); 

2.CORS

同域安全策略CORS(Cross-Origin Resource Sharing) 
它要求请求的服务器在响应的报头(Response Header)添加 Access-Control-Allow-Origin标签,从而允许此标签所对应域访问此服务器的资源,调用此服务器的接口。 
缺陷:

  • 默认情况下,跨源请求不提供凭据(cookie、HTTP认证及客户端SSL证明等),通过将withCredentials属性设置为true,可以指定某个请求应该发送凭据。如果服务器接收带凭据的请求,会用下面的HTTP头部来响应:
Access-Control-Allow-Credentials: true
  • 1

如果发送的是带凭据的请求,但服务器的相应中没有包含这个头部,那么浏览器就不会把相应交给javascript,请求就无法得到结果的数据(浏览器得到了,但是我们请求的方法得不到,因为被浏览器拦截了),因此在需要传Cookie等时,服务端的Access-Control-Allow-Origin必须配置具体的具体的域名。并且还需要设置其他的请求头:

  1.  
    Access-Control-Allow-Origin; //request.getHeader("Origin")||www.xxx.com
  2.  
    Access-Control-Allow-Methods; //POST, GET, OPTIONS, DELETE
  3.  
    Access-Control-Allow-Credentials;//是否支持cookie跨域
  4.  
    Access-Control-Allow-Headers;//x-requested-with,content-type
add_header Access-Control-Allow-Credentials true; add_header Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept";add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";

 

 
proxy_set_header
              作用:允许重新定义或者添加发往后端服务器的请求头。value可以包含文本、变量或者它们的组合。 当且仅当当前配置级别中没有定义proxy_set_header指令时,会从上面的级别继承配置。 默认情况下,只有两个请求头会被重新定义:
               用法:
     proxy_set_header Host $proxy_host;
 
      proxy_set_header Connection close;
       在实际应用中,我们可能需要获取用户的ip地址,比如做异地登陆的判断,或者统计ip访问次数等,通常情况下我们使用                request.getRemoteAddr()就可以获取到客户端ip,但是当我们使用了nginx作为反向代理后,使用request.getRemoteAddr()获取到的就一直是nginx服务器的ip的地址,那这时应该怎么办?
   解决办法:   nginx是可以获得用户的真实ip的,也就是说nginx使用$remote_addr变量时获得的是用户的真实ip?
      用法:proxy_set_header            X-real-ip $remote_addr;    #在界面中使用 request.getAttribute("X-real-ip")

 

 

part2:原理介绍

这里我们将nginx里的相关变量解释一下,通常我们会看到有这样一些配置

server {

        listen       88;

        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location /{

            root   html;

            index  index.html index.htm;

                            proxy_pass                  http://backend; 

           proxy_redirect              off;

           proxy_set_header            Host $host;

           proxy_set_header            X-real-ip $remote_addr;

           proxy_set_header            X-Forwarded-For $proxy_add_x_forwarded_for;

                     # proxy_set_header            X-Forwarded-For $http_x_forwarded_for;

        }

我们来一条条的看

1. proxy_set_header    X-real-ip $remote_addr;

这句话之前已经解释过,有了这句就可以在web服务器端获得用户的真实ip

但是,实际上要获得用户的真实ip,不是只有这一个方法,下面我们继续看。

2.  proxy_set_header            X-Forwarded-For $proxy_add_x_forwarded_for;

我们先看看这里有个X-Forwarded-For变量,这是一个squid开发的,用于识别通过HTTP代理或负载平衡器原始IP一个连接到Web服务器的客户机地址的非rfc标准,如果有做X-Forwarded-For设置的话,每次经过proxy转发都会有记录,格式就是client1, proxy1, proxy2,以逗号隔开各个地址,由于他是非rfc标准,所以默认是没有的,需要强制添加,在默认情况下经过proxy转发的请求,在后端看来远程地址都是proxy端的ip 。也就是说在默认情况下我们使用request.getAttribute("X-Forwarded-For")获取不到用户的ip,如果我们想要通过这个变量获得用户的ip,我们需要自己在nginx添加如下配置:

proxy_set_header            X-Forwarded-For $proxy_add_x_forwarded_for;

意思是增加一个$proxy_add_x_forwarded_for到X-Forwarded-For里去,注意是增加,而不是覆盖,当然由于默认的X-Forwarded-For值是空的,所以我们总感觉X-Forwarded-For的值就等于$proxy_add_x_forwarded_for的值,实际上当你搭建两台nginx在不同的ip上,并且都使用了这段配置,那你会发现在web服务器端通过request.getAttribute("X-Forwarded-For")获得的将会是客户端ip和第一台nginx的ip。

那么$proxy_add_x_forwarded_for又是什么?

$proxy_add_x_forwarded_for变量包含客户端请求头中的"X-Forwarded-For",与$remote_addr两部分,他们之间用逗号分开。

举个例子,有一个web应用,在它之前通过了两个nginx转发,www.linuxidc.com 即用户访问该web通过两台nginx。

在第一台nginx中,使用

proxy_set_header            X-Forwarded-For $proxy_add_x_forwarded_for;

现在的$proxy_add_x_forwarded_for变量的"X-Forwarded-For"部分是空的,所以只有$remote_addr,而$remote_addr的值是用户的ip,于是赋值以后,X-Forwarded-For变量的值就是用户的真实的ip地址了。

到了第二台nginx,使用

proxy_set_header            X-Forwarded-For $proxy_add_x_forwarded_for;

现在的$proxy_add_x_forwarded_for变量,X-Forwarded-For部分包含的是用户的真实ip,$remote_addr部分的值是上一台nginx的ip地址,于是通过这个赋值以后现在的X-Forwarded-For的值就变成了“用户的真实ip,第一台nginx的ip”,这样就清楚了吧。

最后我们看到还有一个$http_x_forwarded_for变量,这个变量就是X-Forwarded-For,由于之前我们说了,默认的这个X-Forwarded-For是为空的,所以当我们直接使用proxy_set_header            X-Forwarded-For $http_x_forwarded_for时会发现,web服务器端使用request.getAttribute("X-Forwarded-For")获得的值是null。如果想要通过request.getAttribute("X-Forwarded-For")获得用户ip,就必须先使用proxy_set_header            X-Forwarded-For $proxy_add_x_forwarded_for;这样就可以获得用户真实ip。

 

proxy_redirect [ default|off|redirect replacement ]
默认值:proxy_redirect default
使用字段:http, server, location
如果需要修改从被代理服务器传来的应答头中的"Location"和"Refresh"字段,可以用这个指令设置。
假设被代理服务器返回Location字段为: http://localhost:8000/two/some/uri/








以上是关于Vue 加入 withCredentials 后无法进行跨域请求的主要内容,如果未能解决你的问题,请参考以下文章

vue axios封装

vue--http请求的封装--session

使用vue时,发送请求不带cookie

如何将 withCredentials 选项传递给 Request?

vue中的axios封装

Internet Explorer 10 忽略 XMLHttpRequest 'xhr.withCredentials = true'