axios跨域问题, 这种情况下 withCredentials 不能为true

已于 2023-12-15 00:05:07 修改
阅读量748 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： axios 跨域
于 2023-12-14 15:44:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/bigcarp/article/details/134996715

前端报错信息如下：

Access to XMLHttpRequest at 'http://127.0.0.1:8000/XXX' from origin 'http://127.0.0.1:8080' has been blocked by CORS policy: 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'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

写了一个最简单的前端测试页面跨域访问后端，访问正常，确定后端是允许跨域的。

认真研读后，才明白：

当服务器端的Access-Control-Allow-Origin值设置为任意网站[*] 时，axios的 withCredentials 不能 = true 。

若需要跨域携带cookies，则以下3点都要做：1、服务器端的Access-Control-Allow-Origin值设置为指定网站(白名单)，2、服务器端要设置Access-Control-Allow-Credentials   3、浏览器端的 withCredentials 必须 = true

当服务器端的Access-Control-Allow-Origin 没有设置时，无论浏览器端的 withCredentials 为true 还是 false 都不能跨域

之前查看资料，一直错误理解为：服务器端要设置Access-Control-Allow-Origin 且 浏览器端要 withCredentials=true 才能跨域。-->这个理解是错的！

bigcarp
关注
XMLHttpRequest.withCredentials 解决跨域请求头无Cookie的问题
Justicky
01-07 4481
XMLHttpRequest.withCredentials  属性是一个Boolean类型，它指示了是否该使用类似cookies,authorization headers(头部授权)或者TLS客户端证书这一类资格证书来创建一个跨站点访问控制（cross-site Access-Control）请求。在同一个站点下使用withCredentials属性是无效的。 此外，这个指示也会被用做响应中...
axios设置withCredentials导致“跨域”的解决方案
HermitSun的博客
09-13 4万+
前两天调接口的时候，出现了一个从来没遇到过的问题。从报错来看，像是跨域： Access to XMLHttpRequest at 'https://wensun.top/api/market/all?pageNum=0&pageSize=5' from origin 'http://localhost:8888' has been blocked by CORS policy: The v...
ajax中的withCredentials使用效果
热门推荐
江木
05-16 4万+
XMLHttpRequest.withCredentials 有什么用? 跨域请求是否提供凭据信息(cookie、HTTP认证及客户端SSL证明等) 也可以简单的理解为，当前请求为跨域类型时是否在请求中协带cookie。 XMLHttpRequest.withCredentials 怎么用? withCredentials属于XMLHttpRequest对象下的属性，可以对其进行查看或配置。 ...
axios 中配置withCredentials
deary
07-26 3万+
withCredentials 有什么用? 跨域请求是否提供凭据信息(cookie、HTTP认证及客户端SSL证明等)，也可以简单的理解为，当前请求为跨域类型时是否在请求中协带cookie。 配置withCredentials: const service = axios.create({ baseURL: process.env.VUE_APP_BASE_API, // 环境变量base接口地址 url = base url + request url withCredentials: .
axios.defaults.withCredentials跨域携带cookie
m0_59975180的博客
11-21 1617
withCredentials:默认情况下，跨源请求不提供凭据(cookie、HTTP认证及客户端SSL证明等)。前端通过将withCredentials属性设置为true指定某个请求应该发送凭据。
完美解决axios跨域请求出错的问题
08-28
"完美解决axios跨域请求出错的问题" 一、什么是跨域请求？ ------------------ 跨域请求是指在浏览器中，由于同源策略的限制，无法直接向不同域名或端口下的服务器发送请求，从而导致ajax请求失败。例如，在...
Vue axios 跨域请求无法带上cookie的解决
10-14
总之，解决Vue axios跨域请求无法携带cookie的问题，需要前端设置`axios.defaults.withCredentials = true`，后端设置`Access-Control-Allow-Credentials: true`，并且`Access-Control-Allow-Origin`要正确指向前端...
基于axios 解决跨域cookie丢失的问题
10-17
1. 在客户端设置axios的withCredentials属性为true，使其在跨域请求中携带cookies。 2. 服务器端设置Access-Control-Allow-Credentials响应头为true，并指定允许跨域请求的源（Access-Control-Allow-Origin）。 ...
axios.defaults.withCredentials
qq_44342031的博客
01-10 1790
axios.defaults.withCredentials
CORS-接口跨域问题withCredentials
z69183787的专栏
06-23 882
我发现，换个后端开发人员，很可能就会遇到一次跨域问题。然后后端同学就会拿出postman. 说接口可以请求通的，让我们自己解决（跨域是浏览器做的限制，postman又没做限制）。最后的最后还是发现是要他们解决一下。 记录一下，很多时候大多数后端同学根据网上配置后 仍然存在跨域的原因。是前端请求的时候需要让我们带上用户信息，所有我们有加上这个时候后端同学配置的 就不行了需要配置，访问的是什么就设置为什么后端 前端 参考： https://blog.youkuaiyun.com/cckevincyh/article
axios中的withCredentials
吴冬雪的博客
07-01 2222
”跨域请求时是否需要使用凭证“ 开启withCredentials后，服务器才能拿到你的cookie，当然后端服务器也要设置允许你获取你开启了才有用
axios放开鉴权withCredentials
最新发布
weixin_34403976的博客
03-25 400
withCredentials:默认情况下，跨源请求不提供凭据(cookie、HTTP认证及客户端SSL证明等)。前端通过将withCredentials属性设置为true指定某个请求应该发送凭据。如果局部想关闭鉴权可在业务局部设置 withCredentials为false。如果全局设置为true会触发鉴权，导致鉴权未通过的跨域问题。withCredentials默认 false。
最近遇到了前端跨域之withCredentials
飞奔的小土豆@1024
07-12 9166
问题描述：vue 本地开发环境是通过axios直接请求后台，生产环境采用nginx代理；今天本地开发被跨域请求的问题困扰了很久， 问题现象： 这次后台项目采用springcloudaliba gateway微服务。如果是html直接访问这个微服务，可以访问。但是如果通过网关微服务，来路由转发就不能访问。但是浏览器和Postman通过网关微服务都能访问，就是html不能通过网关访问 网上一大堆跨域，gateway vue axios跨域，自己也病急乱投医，各种试错，当看到https://segmen
关于withCredentials不生效的问题
weixin_63549044的博客
09-25 1755
为了实现的登录，获取用户信息这一个功能，我是采用cookie获取用户的相关信息，没有采用JWT令牌校验用户。然而出现前端请求未携带cookie，导致后端无法识别，从而无法获取用户的相关信息。，并告诉你这两者基于安全，是不能同时这样设置的（别问，我也不清楚为什么[苦笑]）。设置成所有的域名都可以访问，就就是设置成“*”，如果你这么做了的话，
axios里设置了withCredentials跨域报错
黄哈哈的博客
09-06 1424
报错： Access to XMLHttpRequest at ‘…’ from origin ‘…’ has been blocked by CORS policy: 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’. The credentials mode .
Axios -- withCredentials属性导致跨域
这里是迷阵的博客耶
02-28 1046
解决方法1： 删除withCredentials，使用其他方式引用多ip（这个方法暂时没找到） 解决方法2： 参考这个文章 解决方法3： Access-Control-Allow-Origin 字段必须指定域名，不能为* Access-Control-Allow-Credentials为true main.js中添加拦截器 Vue.http.interceptors.push((request...
关于axios的坑 sessionid不一致 不携带cookie，设置withCredentials 无效
qq_39909614的博客
08-26 5362
无法携带cookie sessionid不一致 一般情况下设置axios.defaults.withCredentials = true就好了但是今天我这个情况比较奇葩，设置withCredentials无效。解决方案把 mock移除就好了、
axios跨域问题
03-21
### Axios 跨域请求解决方案 在处理 Axios 的跨域问题时，通常需要通过后端配置 CORS（Cross-Origin Resource Sharing）来解决问题。以下是针对不同后端框架的具体实现方式。 #### 1. 后端配置 CORS 解决跨域问题 CORS 是一种浏览器安全机制，用于控制哪些外部域名可以访问当前资源。如果服务端未正确设置 `Access-Control-Allow-Origin` 等头部字段，则会触发跨域错误[^2]。 ##### Node.js 和 Express 配置 CORS 对于基于 Node.js 和 Express 的项目，可以通过安装并使用 `cors` 中间件来快速解决跨域问题： ```javascript const express = require('express'); const cors = require('cors'); // 安装 npm i cors const app = express(); // 全局启用 CORS 支持 app.use(cors()); // 或者指定允许的源地址 app.use(cors({ origin: 'http://localhost:8889', credentials: true, })); app.post('/cert/certCompany/list2', (req, res) => { res.json({ message: 'Success!' }); }); app.listen(8888, () => { console.log('Server running on port 8888'); }); ``` 上述代码中，`origin` 参数指定了前端应用所在的 URL 地址，而 `credentials` 设置为 `true` 表示支持带 Cookie 的跨域请求[^1]。 --- #### 2. Flask 配置 CORS 如果是 Python 基于 Flask 开发的服务端程序，可按照如下方式进行 CORS 配置： ```python from flask import Flask, request, make_response from flask_cors import CORS app = Flask(__name__) # 使用 Flask-CORS 插件全局开启 CORS 支持 CORS(app, supports_credentials=True) @app.route('/cert/certCompany/list2', methods=['POST']) def cert_company_list(): data = request.get_json() response_data = {'message': 'Success!'} return make_response(response_data) if __name__ == '__main__': app.run(port=8888) ``` 或者手动设置响应头的方式也可以达到相同效果[^4]: ```python @app.after_request def after_request(resp): resp = make_response(resp) resp.headers['Access-Control-Allow-Origin'] = 'http://localhost:8889' resp.headers['Access-Control-Allow-Methods'] = 'GET, POST' resp.headers['Access-Control-Allow-Headers'] = 'Content-Type' return resp ``` --- #### 3. 修改 Axios 请求参数 除了后端配置外，在某些情况下还可以调整 Axios 请求的行为以适应跨域需求。例如，确保发送正确的 Content-Type 并携带必要的认证信息： ```javascript axios.post( 'http://localhost:8888/cert/certCompany/list2', JSON.stringify(this.searchParam), { headers: { 'Content-Type': 'application/json;charset=UTF-8', }, withCredentials: true, // 如果需要传递 Cookies } ).then((response) => { console.log(response.data); }).catch((error) => { console.error(error.message || error.toString()); }); ``` 注意：当启用了 `withCredentials` 属性时，服务端也需要显式声明支持凭证传输（即设置 `supports_credentials=true`），否则可能会引发预检失败等问题[^3]。 --- ### 总结 要彻底解决 Axios 的跨域问题，建议优先从 **后端** 进行 CORS 配置，因为这是最根本的原因所在。无论是采用 Node.js/Express、Python/Flask 还是其他技术栈，都需要确保返回给客户端的 HTTP 响应包含了合法有效的 CORS 头部信息。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值