[问答]

请问如何解决Vue加入withCredentials后无法进行跨域请求?

问答对人有帮助，内容完整，我也想知道答案 0 Vue加入withCredentials后无法进行跨域请求 0
2020-11-6 06:39:42　　评论淘帖0 邀请回答您可以邀请以下用户，快速回答问题 × 陈该类别下有 5 个回答。邀请回答 jf_71236567 该类别下有 3 个回答。邀请回答 nvwwerwr 该类别下有 2 个回答。邀请回答 mu0543 该类别下有 2 个回答。邀请回答 60user28 该类别下有 2 个回答。邀请回答 To7ny 该类别下有 2 个回答。邀请回答 yhsales 该类别下有 2 个回答。邀请回答 puzhang549 该类别下有 2 个回答。邀请回答 ZONEK 该类别下有 2 个回答。邀请回答 tijing忽忽该类别下有 2 个回答。邀请回答 HELLOKITTYNEW 该类别下有 2 个回答。邀请回答 dlksmad 该类别下有 2 个回答。邀请回答 yuyin110 该类别下有 1 个回答。邀请回答 testd011 该类别下有 1 个回答。邀请回答 xianshi6320 该类别下有 1 个回答。邀请回答 mashiquan123 该类别下有 1 个回答。邀请回答 Emily1225 该类别下有 1 个回答。邀请回答 ruobi168 该类别下有 1 个回答。邀请回答看得开就会开该类别下有 1 个回答。邀请回答世界无限大该类别下有 1 个回答。邀请回答举报王玲相关推荐 • 如何处理好跨时钟域间的数据呢 1346 • MDO4000系列混合域分析仪应用之跨域分析介绍 1194 • 请问鸿蒙里面怎样实现类似vue中v-html这一功能呢？ 2103 • vue-cli-----vue实例中template:'<App/>是什么意思？ 2949 • quartus仿真双口RAM 实现跨时钟域通信 4064 • 一文解析Vue代码层面的优化 1785 • 关于cdc跨时钟域处理的知识点，不看肯定后悔 1869 • MDO4000系列混合域分析仪应用基本功能总结 947 • 请问vue$route监听()怎么引用？ 12187 • XP退域后怎么才能加回以前的域 2337 1个回答

答案对人有帮助，有参考价值 0 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. 解决方案 Access-Control-Allow-Origin 字段必须指定域名，不能为 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必须配置具体的具体的域名。并且还需要设置其他的请求头： Access-Control-Allow-Origin; //request.getHeader("Origin")\|\|www.xxx.com Access-Control-Allow-Methods; //POST, GET, OPTIONS, DELETE Access-Control-Allow-Credentials;//是否支持cookie跨域 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/

2020-11-6 11:34:34 评论举报李耀鑫