axios跨域问题

最新推荐文章于 2024-07-12 04:23:29 发布
最新推荐文章于 2024-07-12 04:23:29 发布
阅读量750 收藏 2
点赞数
分类专栏： 仿网易云音乐项目 文章标签： 前端 ajax chrome devtools
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/soundofsnow/article/details/127346833
版权
在网易云音乐项目中遇到302重定向错误，实际是跨域问题导致前端无法获取cookie。通过分析发现，即使之前登录过，由于axios默认不携带cookie，设置`withCredentials: true`才能在跨域请求时带上cookie，从而解决数据获取失败的问题。
摘要由CSDN通过智能技术生成

问题描述

这里网易云音乐项目要获取推荐歌单，但是获取失败，原因是code：302。
error

原因如图所示：请求成功，返回200，但是并没有返回我想要的数据，而是告诉我302错误，什么都没有。

问题分析

开始我认为请求失败，错误代码302。

302是重定向错误，表示请求的资源被暂时转移到由该响应头location所指定的rul上了。

我对此表示疑问，在网上对该问题进行搜索，无意间看到了可能是axios导致的，这可能是一个跨域问题。

于是我修改了代码，输出一下http状态码：
1
第一行才是http响应码，200表明成功请求，但是并没有获取到数据，这时我想到可能是没有登录的原因，但是并不确定,因为我使

用浏览器直接访问地址localhost:3000/recommend/resource可以得到数据。

为了确认这个问题，我通过浏览器把网站数据清除，包括cookie
在这里插入图片描述

最低0.47元/天 解锁文章
soundofsnow
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
axios 重定向问题解决_axios 处理 302 状态码的解决方法
weixin_39822728的博客
12-22 3407
比如说浏览器打开了一个单页面(SPA)应用，过了一段时间token(或者session)过期了，这个时候页面上发起 Ajax请求之后，后端返回302状态码跳转到login页面。 我这是使用的是 Vue + axios ，发现 axios 无法拦截到 302请求，下面是处理的过程。思考google axios 302 handle 看到 axios github 上的两个讨论得到的结论就是：浏览器发...
Vue解决Axios跨域问题
webjxy的博客
03-30 2100
提前声明：本文只针对使用vue-cli创建的vue项目，范围仅限于vue2 跨域 跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器施加的安全限制 解决跨域 话不多说，直接上代码： 在项目根目录创建 vue.config.js 文件，该文件与 src 同级 在 vue.config.js 文件中写下以下代码： module.exports = { devServer: { proxy: { '/api': { targe.
Vue+axios状态返回200，但是没有数据，提示Access-Control-Allow-Origin的问题
qq_37881606的博客
07-11 7286
解决Vue中axios请求接口返回200但是无数据的问题-0711记准备工作代码 准备工作 1、安装axios 2、在src文件夹建一个util的文件夹，文件夹下新建api.js 代码 第一步：在config文件夹下的index.js中找到dev，在dev中配置proxyTable内容 proxyTable: { '/api': { target: '接口域名，http...
axios无法302自动跳转
最新发布
weixin_36987724的博客
07-12 113
解决axios无法302自动跳转的问题 在进行网络请求时，我们通常会使用axios这样的库来发送请求和处理响应。然而，有时候我们会遇到一个问题，就是当服务器返回302重定向状态码时，axios并不能自动跳转到新的地址，而是直接返回302状态码的响应。这就导致了我们无法正确获取到重定向后的数据，造成了一定的困扰。 问题分析 ...
Vue使用axios跨域出错解决方案
我家有只小金毛的博客
10-06 1813
Vue使用axios跨域出错解决方案        在 Vue+SpringBoot 的前后端分离项目中，经常使用 axios 来解决跨域问题。但有时候配置错误，经常会出现问题，做登录模块时在下就遭了道！ 前端 Vue 配置如下： 在config文件夹中的 index.js 文件中找到proxyTable属性，添加如下代码 proxyTable: { // 跨域支持 '/api': {
前端解决axios跨域问题
DemoD_的博客
10-16 637
前端解决axios跨域问题 step1. // The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './router' import ElementUI fr
解决vue axios跨域请求
qq_33153761的博客
10-12 845
 在项目开发的时候，接口联调的时候一般都是同域名下，且不存在跨域的情况下进行接口联调，但是当我们现在使用vue-cli进行项目打包的时候，我们在本地启动服务器后，比如本地开发服务下是 http://localhost:8080 这样的访问页面，但是我们的接口地址是 http://xxxx.com/save/index 这样的接口地址，我们这样直接使用会存在跨域的请求，导致接口请求不成功，因此我们需...
解决Nuxt使用axios跨域问题
01-19
本文将介绍如何通过设置代理解决 Nuxt 与 axios 集成的跨域问题。 解决跨域 Nuxt 使用 axios 为避免出现前端页面跨域问题，需要安装 @nuxtjs/axios 和 @nuxtjs/proxy 两个模块。 用 yarn 安装： yarn add axios @...
完美解决axios跨域请求出错的问题
08-28
"完美解决axios跨域请求出错的问题" 一、什么是跨域请求？ ------------------ 跨域请求是指在浏览器中，由于同源策略的限制，无法直接向不同域名或端口下的服务器发送请求，从而导致ajax请求失败。例如，在...
图文并茂教你模拟302接口，实现js中axios,fetch遇到302状态码后跳转的多种方案axios,fetch成功响应拦截302
tangdou369098655的博客
12-03 3553
下面我将会手把手教你实现： - 如何使用多种方案实现前端代码+302后端接口实现页面跳转？ - fetch 发送GET 或者 POST请求如何处理 302？或者是说fetch 怎么才能拦截302? - Axios 响应拦截 302 状态码的方案有哪些？如何实现？
axios 处理 302 状态码的解决方法
08-27
主要介绍了axios 处理 302 状态码的解决方法,非常不错，具有参考借鉴价值，需要的朋友可以参考下
axios的封装以及前端跨域的解决方案
weixin_58443365的博客
10-18 330
axios的封装及前端跨域问题的解决
vue 使用axios 出现跨域请求
xueshenghu的专栏
11-05 261
配置地方： 1.项目文件目录的conf文件夹下的index.js build /dev 的都可设置为一致 dev: { env: require('./dev.env'), port: 80, assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: { '/apis': { target: 'http://localhost:15/',// ...
Axios解决跨域问题（Vue2版）
热门推荐
weixin_43565079的博客
09-13 6万+
什么是跨域 首先需要了解到浏览器的同源策略，同源策略是最核心也是最基本的安全功能，缺少同源策略浏览器的正常功能可能会受到影响。同源策略会阻止一个域的javascript脚本和另外一个域的能容进行交互。同源（即指在同一个域）就是两个页面具有相同的协议（protocol）、主机（host）和端口号（port）。 当一个请求url的协议、域名、端口三个之间任意一个与当前页面url不同即为跨域。 Vue中用Axios解决跨域问题 配置代理可解决使用Axios不能直接进行跨域...
后端控制器使用重定向页面没有自动跳转&&axios 处理 302 状态码的解决方法
huang_hai_an的博客
11-26 1170
/ 判断响应是否为重定向。
记录ajax请求302跨域的解决方案——formdata
邢思北的博客
05-17 7170
前两天后端同事遇到了一个问题，就是写的前端页面在发送ajax请求后，后端会给前端报302，然后让前端重定向到指定的url，但是页面一直报错。 上手看了代码后，看到他的前端ajax请求代码类似于下方代码： $.ajax({ type: "POST", url:"/requestUrl/xxx", data: JSON.stringify(data), dataType: "json", contentType: "application/json;charset=utf-8", success:f
axios 处理 302 状态码
qq_40878061的博客
09-04 2392
今天在项目中第一次遇到了服务端返回了302状态码的问题。搜罗了各种方法，记录一下。 浏览器端, axios 增加拦截器 axios.interceptors.response.use((response) => { return response; }, function (error) { if (401 === error.response.status) { ...
axios + spring security的问题
weixin_34392843的博客
05-28 1985
2019独角兽企业重金招聘Python工程师标准>>> ...
axios 跨域问题
09-29
在Vue中使用Axios解决跨域问题可以通过设置代理来实现。在Nuxt中使用Axios解决跨域问题需要安装 @nuxtjs/axios 和 @nuxtjs/proxy 两个模块，并进行相应的配置。同时，可以通过简单发起一个请求来验证跨域问题是否...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值