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

Posted 2020-12-20 wcn123456

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-Credentials为true

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'