Vue中axios调用本地后端接口跨域问题 No 'Access-Control-Allow-Origin' header is present on the requested resource

最新推荐文章于 2025-03-29 01:11:55 发布
最新推荐文章于 2025-03-29 01:11:55 发布
阅读量5.4k 收藏 2
点赞数 1
分类专栏： Vue 文章标签： Vue axios 前端跨域
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/L_WalkingPig/article/details/89090584
版权

报错： No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9999' is therefore not allowed access

本地前端框架 Vue、vue-cli、webpack

先找到前端 /config/index.js 配置文件中的proxyTable:{ }

修改如下：

 

最后回到调用接口的 .vue 文件中 ：

这时候重启前端服务：npm run dev 即可

 

 

VUE axios 跨域问题 No ‘Access-Control-Allow-Origin‘ header is present on the requested resource.
lelesidai的博客
07-07 6632
开发环境中，使用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” 打
axios跨域问题 No ‘Access-Control-Allow-Origin‘ header is present on the requested resource.
qq_40240053的博客
09-23 1951
axios跨域问题 问题描述： 在使用vue+axios开发进行post请求，然后出现以下图片中的跨域问题； 解决方法： 在网上看了一些相关资料，最后找到了解决方法 module.exports = { dev: { //... proxyTable: { '/api': { port: 3000, target: 'http://127.0.0.1:8081/', chunkOrigins: true
vue axios请求出错No 'Access-Control-Allow-Origin' header is present on the requested resource
weixin_40679578的博客
07-30 1万+
在向服务器请求数据的时候，经常报这个错 No ‘Access-Control-Allow-Origin’ header is present on the requested resource 解决方法： 在config/index.js中proxyTable添加 proxyTable: { '/api': { // 要代理...
Vue：跨域问题The ‘Access-Control-Allow-Origin‘ header has a value ‘http://manage.kingbal.com‘ that is not
最新发布
一些平时在开发过程中遇到的常见问题，分享给大家
03-29 201
Access to XMLHttpRequest at 'http://testapi.kingbal.com/system/sys/randomImage/1743177847298?_t=1743177847' from origin 'http://test.kingbal.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The 'Acc
Vue项目axios解决跨域问题No 'Access-Control-Allow-Origin' header is present on the requested resource
YiQ137的博客
04-25 1万+
在vue项目中发请求时报了No ‘Access-Control-Allow-Origin’ header is present on the requested resource这个错误，这个错误就是典型的跨域问题 之所以会引发跨域问题，是因为 不同协议的网站不能相互访问 https://baidu.com 不能访问 http.baidu.com ，因为他们一个是http协议，一个是https协...
Vue项目中遇到No ‘Access-Control-Allow-Origin‘ header is present on the requested resource. 跨域问题的解决方法
不会有人真的学前端吧
08-02 2619
这是我在公司实习中遇到的问题,提供一下解决办法,可能解决的不是太好。公司有自己的框架..我还看不懂 解决办法: 1.配置反向代理 ----->反向代理传送门 在vue.config.js文件中添加反向代理 devServer: { port: port,//自己的接口 open: true, overlay: { warnings: false, errors: true }, ...
解决No ‘Access-Control-Allow-Origin‘ header is present on the requested resource.跨域问题（后台(java)解决方法）
年少不知曲中意,再听已是曲终人
06-02 4050
解决No 'Access-Control-Allow-Origin' header is present on the requested resource.跨域问题（后台(java)解决方法）
Quasar Vue Springboot 跨域问题 No 'Access-Control-Allow-Origin' header is present on the requested
Sail__的专栏
01-01 5582
困扰了近半个月的跨域问题解决了。 服务端是Springboot，前端是Vue 服务端地址是：http://localhost:8066 前端地址是：http://localhost:6006 前端发送请求使用的是axios，之前设置的baseURL是 process.env.BASE_API， 这个baseURL我在别的地方没有指定，因此是空，后来发现静态图片一直加载不上，我把baseUR...
vue axios 遇到“No 'Access-Control-Allow-Origin' header is present on the requested resource.”的问题
qq_19306197的博客
08-08 1万+
在使用axios时候遇到“No 'Access-Control-Allow-Origin' header is present on the requested resource.”的问题。 原因：跨域访问失败 解决方法：在php中增加 “ php header('Access-Control-Allow-Origin: *'); ?> ”
springcloud 微服务跨域问题
weixin_41630573的博客
12-24 453
方法一、如下图在网关zuul里增加CorsFilter过滤器 @SpringBootApplication @EnableZuulProxy public class DemoZuulApplication { public static void main(String[] args) { SpringApplication.run(DemoZuulApplicat...
ajax 设置Access-Control-Allow-Origin实现跨域访问
06-06
ajax跨域访问是一个老问题了，解决方法很多，比较常用的是JSONP方法，JSONP方法是一种非官方方法，而且这种方法只支持GET方式，不如POST方式安全。 即使使用jquery的jsonp方法，type设为POST，也会自动变为GET。如果跨域使用POST方式，可以使用创建一个隐藏的iframe来实现，与ajax上传图片原理一样，但这样会比较麻烦。因此，通过设置Access-Control-Allow-Origin来实现跨域访问比较简单。
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null'
qq_43147121的博客
02-13 630
今天学习vue和axios时进行前后端结合出现了这个错误 No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘null’ 当使用ajax访问远程服务器时，请求失败，浏览器报如上错误。这是出于安全的考虑，默认禁止跨域访问导致的。 一、什么是跨域访问 举个栗子：在A网站中，我们希望...
No 'Access-Control-Allow-Origin' header is present on the requested resource
cqs_2012
06-17 712
1.问题性质这是一个跨域问题2.解决办法1.服务端修改 在请求里增加权限如下，本人用的filter方式，define/** * Created by cqs on 16-6-17. */ public class CORSFilter extends GenericFilterBean { @Override public void doFilter(ServletReques
Vue在java项目中的应用——Vue3.0使用axios实现前后分离，解决No 'Access-Control-Allow-Origin' header is present on the req
Jack__iT的博客
03-24 1575
axios是基于promise（诺言）用于浏览器和node.js，是http客户端。 axios的作用是什么呢：axios主要是用于向后台发起请求的，还有在请求中做更多是可控功能。 特点：支持浏览器和node.js 支持promise 能拦截请求和响应 能转换请求和响应数据 能取消请求 ...
解决axios跨域请求报错No 'Access-Control-Allow-Origin' header is present on the requested resource.（学习记录）
liangxiaoywc的博客
08-18 7043
原因是请求头中缺少设置 一个有效的解决办法是在后台写一个过滤器， 不要忘了在web.xml中配置这个过滤器 import javax.servlet.*; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; /...
No 'Access-Control-Allow-Origin' header is present on the requested resource.
soindy
04-14 2083
报错: XMLHttpRequest cannot load ** .No ‘Access-Control-Allow-Origin’ header is present on the requested resource. 资源跨域问题,使用CORS即可. 服务器端添加以下代码即可: /** * Created by soindy on 2017/4/11. */ @Component
No ‘Access-Control-Allow-Origin‘ header is present on the requested resource关于vue跨域问题
qq_42212557的博客
12-06 2万+
No 'Access-Control-Allow-Origin' header is present on the requested resource关于vue跨域问题
No 'Access-Control-Allow-Origin' header is present on the requested resource.'Ajax跨域访问解决方案
热门推荐
M_Jack的博客
05-29 22万+
一、什么是跨域访问 举个栗子：在A网站中，我们希望使用Ajax来获得B网站中的特定内容。如果A网站与B网站不在同一个域中，那么就出现了跨域访问问题。你可以理解为两个域名之间不能跨过域名来发送请求或者请求数据，否则就是不安全的。跨域访问违反了同源策略，同源策略的详细信息可以点击如下链接：Same-origin_policy；  总而言之，同源策略规定，浏览器的ajax只能访问跟它的HTML页面同源...
oauth 服务跨域 No 'Access-Control-Allow-Origin' header is present on the requested resource
03-08
### 解决OAuth服务跨域请求中的CORS错误 当遇到`No 'Access-Control-Allow-Origin' header is present on the requested resource.`这类错误时，表明浏览器的安全机制——即同源策略(Same-Origin Policy)，正在阻止当前页面向另一个源发送请求[^3]。 对于基于Spring Security OAuth2实现的前后端分离应用，在Vue前端通过Axios发起带有凭证(Credentials)的请求(`withCredentials=true`)到后端API时，如果未正确设置CORS响应头，则会触发上述错误。为了使此类跨域请求成功执行，需要满足以下几个条件： - **精确匹配Origin**: 如果前端设置了`withCredentials=true`,那么后端不能简单地将`Access-Control-Allow-Origin`设为通配符`*`，而应该将其设定为目标站点的具体URL。 - **启用凭证支持**: 需要在响应头部加入`Access-Control-Allow-Credentials: true`以允许携带身份验证信息(如Cookies)[^4]。 - **自定义请求头处理**: 若前端请求包含了特定的HTTP头部字段，比如Authorization或其他自定义头部，这些也应在预检请求(PREFLIGHT REQUEST)中被声明，并由服务器端在`Access-Control-Allow-Headers`中予以确认。 针对Java Spring Boot框架下的解决方案可以如下所示配置全局CORS过滤器: ```java @Bean public CorsFilter corsFilter() { UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(); CorsConfiguration config = new CorsConfiguration(); // 设置可信任的客户端域名列表 List<String> allowedOrigins = Arrays.asList("http://example.com"); config.setAllowedOrigins(allowedOrigins); // 允许所有的HTTP方法(GET, POST, PUT, DELETE...) config.addAllowedMethod("*"); // 支持带cookie等认证信息的跨域调用 config.setAllowCredentials(true); // 对于预检请求，允许哪些header可以通过 config.setAllowedHeaders(Arrays.asList( "Content-Type", "X-Requested-With", "accept", "origin", "authorization" )); source.registerCorsConfiguration("/api/**", config); // 应用于/api路径下的所有接口 return new CorsFilter(source); } ``` 以上代码片段展示了如何创建并注册一个适用于整个应用程序API接口的CORS过滤器实例。请注意替换`"http://example.com"`为你实际使用的前端地址以及调整其他参数适应具体的业务场景需求。 #### 关键点总结 - 浏览器实施严格的同源政策来保护用户免受潜在攻击； - 跨域资源共享(CORS)提供了一种安全的方式让不同源之间互相通信； - 在涉及敏感操作（如登录状态保持）的情况下，必须显式指明可信的来源并且开启凭证共享选项； - 后端应当根据实际情况灵活调整CORS策略，既保障安全性又不影响正常功能使用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值