vue跨域问题：The value of the ‘Access-Control-Allow-Credentials‘ header in the response is...

最新推荐文章于 2025-03-19 11:56:05 发布

lynachen

最新推荐文章于 2025-03-19 11:56:05 发布

阅读量7.4k

点赞数 6

分类专栏：前端框架文章标签：前端

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.youkuaiyun.com/Julylyna/article/details/123229319

版权

前端框架专栏收录该内容

1 篇文章

订阅专栏

"博客探讨了在前端使用axios进行跨域请求时遇到的问题，指出设置`withCredentials=true`会导致后端`Access-Control-Allow-Origin`不能为通配符"*"，而必须指定源地址。这是出于安全考虑，避免任意域名获取敏感的cookie信息。解决方案是精确配置后端的CORS策略，确保源地址与前端一致。"

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

跨域报错如下：

由于我在封装axios时，设置了这个：

//允许跨域携带cookie信息
axios.defaults.withCredentials = true;

这一条允许在请求头里带上cookie信息。

如果前端配置了withCredentials=true，后端设置Access-Control-Allow-Origin不能为 " * ",而必须是你的源地址。

header("Access-Control-Allow-Origin","源地址";
header("Access-Control-Allow-Credentials", "true");

后来查询得知：可能是处于安全性考虑，*是所有的域名都可以读取到数据，可能会读取到cookie等敏感数据。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

lynachen

关注关注

6
点赞
踩
13

收藏

觉得还不错? 一键收藏
3
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

【Vue-Spring跨域Bug已解决】has been blocked by CORS policy: The value of the······

一键难忘的博客

04-12

2482

这个报错提示是因为在跨域请求中，请求头中设置了 withCredentials 参数为 true，表示跨域请求需要使用凭证（如 cookies、HTTP 认证等）。而在响应头中，Access-Control-Allow-Origin 的值不能是通配符 *，必须是具体的域名。另外，如果你在发送跨域请求时需要携带 cookies 或其他凭证，还需要在请求头中设置 withCredentials 参数为 true。如果需要全局配置跨域支持，应该使用上一条回答中提到的方式，在配置类中设置。

跨域通配符*与include报错，The value of the 'Access-Control-Allow-Origin' header '*'

海贼8023的博客

11-08

3万+

网上的答案，有道理，但不太对， response.headers['Access-Control-Allow-Credentials'] = 'true' response.headers['Access-Control-Allow-Origin'] = '*' response.headers['Access-Control-Allow-Methods'] = 'POST' response...

3 条评论您还未登录，请先登录后发表或查看评论

The value of the ‘Access-Control-Allow-Origin‘ header in the response 关于后端配置允许跨域后前端请求依然失败得不到响应的问题

2301_79108772的博客

06-02

1610

作者在进行联系session分布式登录的时候，遇到了一个问题，就是明明我的后端进行配置了允许跨域，但是前端依然请求失败，无法收到请求，并报出如下错误。

后端层面解决跨域问题【@CrossOrigin注解的使用】踩坑

多学、多想、多做

03-19

1039

@CrossOrigin注解使用踩坑

The value of the ‘Access-Control-Allow-Credentials‘ header in the response is ‘‘ which must be ‘true

m0_46365130的博客

10-10

2074

node的app.js设置下请求头为具体域名，Credentials设为true。

Access-Control-Allow-Credentials‘ header in the response is 关于跨域问题的个人记录【各种解决】

weixin_42212401的博客

01-14

3220

然后后端一般都是加上这个 response.setHeader("Access-Control-Allow-Origin", "*"); response.setHeader("Access-Control-Allow-Methods", "POST, GET, PUT, DELETE"); response.setHeader("Access-Control-Allow-Credentials", "true"); response.setHeader("Access-Control-Max-Age",.

‘Access-Control-Allow-Credentials‘ header in the response is ‘true‘ ...‘include‘

liuxin_1991的博客

03-26

682

解决办法： crossDomain: true, xhrFields: {withCredentials: true}

Access to XMLHttpRequest athas been blocked by CORS policy: The value of the 'Access-Control-Allow-C

飞翔的熊blabla

01-09

2360

Access to XMLHttpRequest athas been blocked by CORS policy: The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode i...

accesscontrolallowcredentials php,php – 带有allowcredentials的通配符CORS

weixin_35703673的博客

03-13

299

我有一个项目,我正在使用像user.mysite.com这样的通配符子域,其中username是通配符.在我的服务器(PHP)中,我设置了以下标头：header('Access-Control-Allow-Origin: *');header('Access-Control-Allow-Credentials: true');这允许我从前端进行ajax调用,因为我不知道域将是什么.但是我还需要将我...

php允许多个域名跨域问题

Icebreaker

08-05

681

php开发中跨域报错问题 The value of the ‘Access-Control-Allow-Credentials’ header in the response is ‘’ which must be ‘true’ when the request’s credentials mode is ‘include’. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withC

前后端分离常见跨域问题及解决方法

NQ31

04-25

5731

常见的跨域问题对应的处理方法

vue, node和nginx配合做前端开发，并且调用后台服务，解决CORS（Access-Control-Allow-Origin）错

weixin_45357522的博客

04-02

997

Vue整合nginx：（1）开发环境npm run dev下，通过nginx解决前后端分离造成的跨域问题假设vue的dev server端口是8380, 后台REST服务端口是8081, nginx的配置如下： server { listen 80; server_name dev1.fintechp.cn; index index_en.html index.html; proxy_cookie_domain dev1

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

stone_ui的博客

04-03

2127

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

解决Spring Cloud Zuul跨域时出现重复Access-Control-Allow-Origin或者Access-Control-Allow-Credentials

yang_yzl11的博客

10-31

4264

前端报错： XMLHttpRequest cannot load http://localhost:8080/serviceA/api/serviceA/1337?cacheBuster=1470925389167. The Access-Control-Allow-Origin header contains multiple values 'http://localhost:3000, http://localhost:3000', but only one is allowed. Origin

浏览器报`The value of the ‘Access-Control-Allow-Origin‘ header in the response must not be the wildcard

墨抒颖

11-16

1894

欢迎访问moshuying.top查看更多信息详细错误信息 Access to XMLHttpRequest at 'http://localhost:7894/Login' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-

Vue 项目中遇到的跨域问题（后台 PHP）

Amy的博客

03-27

1万+

问题描述前端 vue 框架，后台 php，百度跨域问题后台加这段代码 header("Access-Control-Allow-Origin: *"); 加了之后报这个错： The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the ...

Ajax跨域、Json跨域、Socket跨域和Canvas跨域等同源策略限制的解决方法

最新发布

04-02

### 解决CORS策略阻止请求的问题当遇到`Access-Control-Allow-Origin`头部设置为通配符`*`而无法满足凭证模式为`include`的情况时，可以通过调整服务器端配置以及客户端行为来解决问题。 #### 1. 修改服务器端响应头为了支持带有凭证的跨域请求（即`withCredentials=true`），服务器必须显式指定允许的源地址而非使用通配符`*`。具体做法如下： - **修改`Access-Control-Allow-Origin`** 将其值替换为具体的域名或IP地址，而不是通用的`*`。例如： ```bash Access-Control-Allow-Origin: http://localhost:8081 ``` - **启用`Access-Control-Allow-Credentials`** 设置此头部以允许携带凭证的请求通过。例如： ```bash Access-Control-Allow-Credentials: true ``` 上述两步操作可以确保浏览器能够接受来自特定源的信任连接[^2]。 #### 2. 配置Nginx反向代理处理CORS 如果前端运行于不同的主机上，则可通过Nginx作为中间层实现跨域资源共享。以下是典型的Nginx配置片段： ```nginx server { listen 80; server_name localhost; location /api/ { add_header 'Access-Control-Allow-Origin' 'http://localhost:8081'; add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; add_header 'Access-Control-Allow-Headers' 'Authorization, Content-Type'; add_header 'Access-Control-Allow-Credentials' 'true'; proxy_pass http://backend_server/; if ($request_method = OPTIONS) { return 204; } } } ``` 这段代码定义了一个API路径映射到后端服务的同时设置了必要的CORS相关HTTP头部信息[^1]。 #### 3. 调整Vue Axios默认选项对于基于Axios库发起网络调用的应用程序来说，需注意以下几点设定： - 如果启用了`withCredentials`属性，则目标URL所在的资源应当返回精确匹配当前页面来源的信息给定字段； - 同样地，在开发阶段可能还需要额外关注预检请求(`OPTIONS`)是否被正确回应并放行实际业务逻辑执行流程。示例代码展示如何全局应用这些参数至所有实例化对象之上： ```javascript import axios from 'axios' const instance = axios.create({ baseURL: 'http://192.168.0.103:8080', timeout: 5000, withCredentials: true // Enable cookies etc. }); // Add a request interceptor instance.interceptors.request.use(config => { config.headers['Content-Type'] = 'application/json;charset=UTF-8' return config; }, error => Promise.reject(error)); export default instance; ``` 以上脚本创建了一个新的HTTP client，并强制开启随附身份验证机制的功能开关[^3]。 --- ### 总结综上所述，要彻底消除因CORS政策引发的错误提示消息——“Access-Control-Allow-Origin header must not be the wildcard”，就需要从以下几个方面入手改进现有架构设计思路：一是更改web service所提供的回复报文中关于origin的部分；二是借助流行的web servers比如Apache或者NGINX来做进一步优化工作；最后一点就是针对前端框架内部组件做出相应的适配改动措施。