前端访问接口 自动携带Cookie (axios)

在跨域请求中,浏览器默认情况下不会自动携带跨域请求的 cookie。这是由于浏览器的同源策略(Same-Origin Policy)所导致的安全性限制。然而,可以通过设置一些选项来允许浏览器发送跨域请求时携带 cookie。

在 Axios 中,你可以通过在请求配置中设置 withCredentials 选项为 true 来实现自动携带 cookie。

const axios = require('axios');

axios.get('https://example.com/api/*', {
  withCredentials: true
})
  .then(response => {
    // 处理响应
    console.log(response.data);
  })
  .catch(error => {
    console.error('请求失败', error);
  });

withCredentials: true 将告诉浏览器在跨域请求中携带 cookie。但请注意,服务器也需要配置以允许跨域请求携带 cookie。

Access-Control-Allow-Credentials: true

### 使用原生 JavaScript 解决 Axios 接口跨域问题 当遇到跨域资源共享(CORS)问题时,可以通过配置服务器端来允许特定域名的访问。对于客户端而言,在不依赖框架的情况下,可以利用 `fetch` 或者 `XMLHttpRequest` 来发送带有适当头部信息的请求。 #### 方法一:通过代理服务器转发请求 如果无法修改目标API所在的远程服务器设置,则可以在本地搭建一个简单的HTTP服务器作为中间件。这个中间件接收来自前端应用的请求并将其转交给实际的目标地址;之后再把接收到的数据返回给最初发出请求的应用程序[^2]。 #### 方法二:调整服务器端响应头 为了让浏览器接受不同源之间的通信,需要确保服务器返回合适的CORS响应头。例如: ```javascript app.use((req, res, next) => { res.header("Access-Control-Allow-Origin", "*"); res.header( "Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept" ); next(); }); ``` 这段代码片段展示了如何在Express.js环境中全局启用CORS支持。当然也可以针对具体的路由路径单独处理[^1]。 #### 方法三:使用JSONP技术(仅限GET请求) 尽管现代Web开发中较少见到这种方法,但在某些情况下仍然适用。它的工作原理是在页面上动态创建 `<script>` 标签,并指向外部资源URL加上回调函数名参数。然而需要注意的是,这种方式只适用于GET类型的请求。 #### 客户端实现示例 下面是一个基于 Fetch API 发送带凭证的 POST 请求的例子,同时指定了额外的初始化选项以适应 CORS 场景下的需求: ```javascript const url = 'https://example.com/api'; const data = { key: value }; fetch(url, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data), mode: 'cors', // 明确指定模式为 cors,默认即为此值 credentials: 'include' // 如果需要携带 cookie 等认证信息则开启此选项 }) .then(response => response.json()) .catch(error => console.error('Error:', error)); ``` 上述代码中的 `mode:'cors'` 和 `credentials:'include'` 参数是专门为了解决跨站请求而设计的关键字。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值