【采坑之路】 axios 的跨域问题

最新推荐文章于 2024-05-10 17:15:26 发布
最新推荐文章于 2024-05-10 17:15:26 发布
阅读量1w 收藏 3
点赞数
分类专栏： 前端项目实践 Vue JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014322206/article/details/84964444
版权

最近学了一下vue，尝试做一个管理网站，使用axios请求后台接口数据时，又难免掉进了跨域坑中，报错如下403：

根据报错提示“XMLHttpRequest has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.”，可以得知需要配置响应头“Access-Control-Allow-Origin”。

解决该方法，前后端分别检查，前端在config中是否进行了跨域配置，后台是否设置了响应头“Access-Control-Allow-Origin”：

 

总结一下，axios跨域问题：

1. 服务端不支持跨域，比如下面两种情况：

1. XMLHttpRequest has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is presen
最低0.47元/天 解锁文章
FloraCat_染小白
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue页面使用axios报跨域错误（全）
走向CTO的路上...
04-30 963
跨域错误是由浏览器的同源策略引起的安全限制。如果 Vue 页面中的 Axios 请求的目标服务器与页面的原始服务器不在同一个域下（协议、域名、端口号任意一个不同），浏览器就会拦截该请求并报跨域错误。在 Vue 页面中使用 Axios 可以方便地进行数据的获取和发送，但有时会出现跨域错误。Vue 页面使用 Axios 进行跨域请求时，可能会遇到浏览器的跨域错误。在未来，随着 Web 技术的发展，可能会出现更多解决跨域问题的方法和工具。解决跨域问题有多种方法，常用的方法是在后端服务器设置允许跨域访问的响应头。
axios基本使用及跨域问题详解
AnnGreen的博客
07-31 1万+
前端请求自然也发展迅速，从原生的XHR到jqueryajax，再到现在的axios和fetch。//www.axios-js.com/zh-cn/）是Vue推荐的http库，这个还是要了解一点的。
Vue + Vite + Axios 项目多环境以及部署前后端跨域
最新发布
2302_79789602的博客
05-10 801
最近在前端多环境和部署服务器之后出现的跨域的问题。
VUE2：关于axios的跨域问题（No ‘Access-Control-Allow-Origin‘ ）以及解决方案（亲测有用，全流程配图文版，建议收藏）
jialuosi的博客
10-07 8572
其原理大致就是我刚刚添加了Axios.defaults.baseURL = '/api'，其每次发送请求都会加一个/api的前缀，这里拦截器拦截api前缀后将其替换为 target。今天在开发中新写了一个前端的项目作为集成，公司是保密项目所以公司代码肯定是不能粘贴了，回家之后还是觉得记录一下比较好，所以自己模拟了一个来给大家解决一下。接下来再看vue.config.js文件，没有就自己创建一个，但是一般都会有，名字不能错。
解决axios跨域请求报错No 'Access-Control-Allow-Origin' header is present on the requested resource.（学习记录）
liangxiaoywc的博客
08-18 6856
原因是请求头中缺少设置 一个有效的解决办法是在后台写一个过滤器， 不要忘了在web.xml中配置这个过滤器 import javax.servlet.*; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; /...
关于跨域问题与axios的封装
takobee5411的博客
06-08 623
跨域与axios封装
Access-Control-Allow-Origin跨域问题
u010790621的博客
12-17 2048
Access-Control-Allow-Origin跨域问题故障解决方案 开发模式上想前后端分离，但是在使用axios交换数据的时候，提示Access-Control-Allow-Origin跨域问题，解决方案跟客户端没关系，修改的是服务端，使用cors filter，下面详细介绍调试过程。 故障 请求异常，报错Access-Control-Allow-Origin，属于跨域问题。 解决方案 ...
解决Nuxt使用axios跨域问题
01-19
本文将介绍如何通过设置代理解决 Nuxt 与 axios 集成的跨域问题。 解决跨域 Nuxt 使用 axios 为避免出现前端页面跨域问题，需要安装 @nuxtjs/axios 和 @nuxtjs/proxy 两个模块。 用 yarn 安装： yarn add axios @...
完美解决axios跨域请求出错的问题
08-28
"完美解决axios跨域请求出错的问题" 一、什么是跨域请求？ ------------------ 跨域请求是指在浏览器中，由于同源策略的限制，无法直接向不同域名或端口下的服务器发送请求，从而导致ajax请求失败。例如，在...
react axios 跨域访问一个或多个域名问题
08-19
React Axios 跨域访问一个或多个域名问题是前端开发中的一种常见问题，该问题的解决方法有多种，本文将详细介绍 React Axios 跨域访问一个或多个域名问题的解决方法。 React Axios 跨域访问一个域名 首先，我们...
vue使用axios跨域请求数据问题详解
08-29
Vue 使用 Axios 跨域请求数据问题详解 Axios 跨域请求数据问题 Axios 是一个基于 Promise 的 HTTP 客户端，广泛应用于前端开发中。但是，在使用 Axios 时，我们经常会遇到跨域请求的问题。跨域请求是指从一个域名...
vue的axios请求跨域处理
qq_35040085的博客
06-02 532
vue.config.js中。
跨域(CORS)请求问题[No 'Access-Control-Allow-Origin' header is present on the requested resource]常见解决方案
无限迭代中......
02-26 1万+
基本概念 跨域(CORS)请求：同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。 浏览器和服务器实现跨域(CORS)判定的原理 问题描述 ...
解决前端跨域：has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header...
热门推荐
qq_40088443的博客
09-16 42万+
在前端工作中，有时候会碰到跨域的问题，就是请求的接口地址和本身的服务器不属于一个域内，此时浏览器会报错： XXXXX（请求的跨域url）has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested 网上有很多的解决办法，可以用jsonp来请求等等。 这里...
XMLHttpRequest at from origin has been blocked by CORS policy No Access-Control-Allow-Origin header
Hong8278556的博客
06-07 1098
记录一个报错内容和实际的问题不符的状况 上传视频的时候浏览器F12的console报错如下： Access to XMLHttpRequest at ‘http://localhost:9001/eduvod/video/uploadVideo’ from origin ‘http://localhost:9528’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the reque
如何解决NO ‘Access-Control-Allow-Origin’ header is present on the requested resource
xgysimida的博客
08-18 369
在使用axios进行前后端通信的时候，报出了跨域问题，详细看下面图片 解决方式如下： 在相应的接口控制类及方法上添加注解 @CrossOrigin 再进行测试时，直接获得了想要获取的数据 ...
VUE axios 跨域问题 No ‘Access-Control-Allow-Origin‘ header is present on the requested resource.
lelesidai的博客
07-07 6336
开发环境中，使用axios调用接口时，出现跨域的时候会被浏览器拦截，故而造成请求失败，并且在控制台中显示 No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:8081’ is therefore not allowed access.** 第一步：看看你的项目根部有没有vue.config.js这个文件； 如果没有那你要用“终端”输入“vue ui” 打
如何解决'Redirect has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header'?
cyh_90的博客
11-17 5万+
在用谷歌浏览器导入自定义字体时发生上述的错误，后来安装了一个Google的插件就完美解决，地址如下：  https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi   参考网站：https://stackoverflow.com/questions/4...
解决axios跨域请求出错的问题
遛狗的代码的博客
08-11 2万+
错误信息： Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9000' is therefore not al
axios 跨域问题
09-29
跨域问题是指当一个请求的协议、域名、端口与当前页面的URL不同，就会发生跨域。在Vue中使用Axios解决跨域问题可以通过设置代理来实现。在Nuxt中使用Axios解决跨域问题需要安装 @nuxtjs/axios 和 @nuxtjs/proxy 两个模块，并进行相应的配置。同时，可以通过简单发起一个请求来验证跨域问题是否解决。 下面是解决跨域问题的步骤： 1. 在Vue中使用Axios解决跨域问题： - 引入Axios库：首先，需要在项目中引入Axios库。 - 配置代理：在项目的配置文件中设置代理，将请求转发到目标服务器，以解决跨域问题。 2. 在Nuxt中使用Axios解决跨域问题： - 安装依赖：使用命令行工具安装 @nuxtjs/axios 和 @nuxtjs/proxy 两个模块。 - 配置代理：在Nuxt的配置文件中设置代理，将请求转发到目标服务器，以解决跨域问题。 3. 简单发起一个请求：在代码中使用Axios发起一个请求，可以使用高德地图提供的天气接口来测试跨域是否解决。 请注意，以上是解决跨域问题的一般步骤，具体的实现方式可能会因项目环境的不同而有所差异。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值