VUE：-Error- vue开发模式正常，部署后提示fetch跨域

最新推荐文章于 2025-06-21 06:52:39 发布
最新推荐文章于 2025-06-21 06:52:39 发布
阅读量1.8k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： VUE Vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/u011374582/article/details/82862760
本文探讨了在Vue项目中遇到的跨域问题，特别是在部署后使用fetch请求数据时出现的错误。通过调整baseUrl的设置，从'//xxxx.com'更改为'//www.xxxxx.com'，解决了因主域名与子域名不一致导致的跨域访问限制。
vue开发fetch正常，部署后报错如下

Failed to load http://guozhaoip.com/good/front/classList: Response to
preflight request doesn’t pass access control check: No
‘Access-Control-Allow-Origin’ header is present on the requested
resource. Origin ‘http://www.guozhaoip.com’ is therefore not allowed
access. If an opaque response serves your needs, set the request’s
mode to ‘no-cors’ to fetch the resource with CORS disabled.

解决办法

  • 将env.js中
  • baseUrl = '//xxxx.com';
  • 改为
  • baseUrl = '//www.xxxx.com';
  • 原因为xxxx.com 与 www.xxxx.com不再同一个域。
Vue-cli解决跨域问题--配置代理服务器
linmuqi0928的博客
04-18 1508
前置知识 常用发送ajax请求方式 1.xhr ：new XMLHttpRequest() 真正开发中不常用，一般都是对xhr进行二次封装 2.jQuery（对xhr的封装） 核心是对DOM操作，在Vue中引入不合适（Vue的核心就是减少DOM操作） 3.axios（对xhr的封装） 最推荐！！！ 是promise风格 支持请求拦截器 和响应拦截器 体积小 大约是jQuery的1/4 4.fetch 和xhr是平级的，是js里面内置的方法，可以直接new fetch 但是fetch.
Vue开发环境跨域访问问题
10-15
然而，随着前后端分离的开发模式普及，跨域需求日益增加，因此诞生了CORS机制，允许服务器指定哪些源可以访问其资源。 在Vue.js的开发环境中，我们通常使用`webpack-dev-server`作为开发服务器，它本身并不支持跨域...
vue中 fetch跨域请求
miaomiao博客
06-22 6609
fetch 是原生javaScript提供的，它可以当作全局变量使用，挂载在window对象身上的 fetch的get请求方法 简单基本的fetch请求（get） <div id="app"> <button @click="getData">get请求</button> </div> <script> 是原生javaScr...
vue php跨域,Vue 项目中遇到的跨域问题及解决方法(后台php)_咋地 _前端开发者
weixin_42356162的博客
03-10 347
问题描述前端header("Access-Control-Allow-Origin: *");加了之后报这个错：The value of the ‘Access-Control-Allow-Origin’ header in the response must not be the wildcard ‘*’ when the request’s credentials mode is ‘inclu...
前端开发问题：TypeError: Failed to fetch dynamically imported module
最新发布
weixin_52173250的博客
06-21 499
前端开发问题：TypeError: Failed to fetch dynamically imported module
set the request's mode to 'no-cors' to fetch the resource with CORS disa
热门推荐
我的博客
03-01 2万+
使用Vue的fetch掉接口时，浏览器的控制台输出了如下的错误 set the request's mode to 'no-cors' to fetch the resource with CORS disa 最开始找的解决办法是加上如下的配置： mode: "no-cors", 不晓得是我加错位置了，还是这根本没用，后来想到，之前用fetch调别的数据接口时没出现这问题，可能是我自己写的接口...
VUE：vue开发模式跨域报错
Schon_zh的博客
10-08 2058
一、报错内容如下： Failed to load http://192.168.1.111:8888/console/good/front/classList: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on...
JavaScript报错（一）：获取class报错undefined
Jiunn-Nan的博客
01-22 4554
var checkClass = document.getElementsByClassName('active'); alert(checkClass.textContent); 这原本很简单的一个获取class的方法，但是它就是要报一个undefined的错误。可我明明就有这个class，为什么会报这个错误 ？ 因为啊！document.getElementsByC...
Vue2.0 vue-source jsonp 跨域请求
10-19
然而，在Vue2.0中，vue-resource已经不再维护，取而代之的是axios和官方推荐的Composition API下的fetch API。不过，由于这篇文章是关于vue-resource的，我们仍将按照文章内容进行说明。 在介绍Vue2.0使用vue-...
Vue项目中跨域问题解决方案
08-27
在开发Vue项目时，我们经常会遇到跨域问题，这主要是由于浏览器的安全策略限制了不同源之间的请求。跨域问题可以通过多种方式解决，本文主要讲解在使用vue-cli搭建的项目中，如何通过更改Header和使用...
SSE示例代码，对原生EventSource和@microsoft/fetch-event-source进行对比
01-25
这个库的出现，主要是为了解决原生EventSource的一些限制，例如在处理跨域请求时，原生的EventSource并不支持CORS，而@microsoft/fetch-event-source则通过fetch API提供了更多的灵活性。此外，@microsoft/fetch-...
corsyusha:简单快速的代理，可在针对现有API进行原型设计时绕过CORS问题，而不必担心CORS
04-30
Corsyusha-本地CORS代理 描述 简单，快速（在代理的基础上构建，可以在针对现有API进行原型设计时绕过问题，而不必担心CORS 构建该模块是为了解决出现以下错误的问题： ... has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. 安装 npm install -g corsyusha # or yarn global add corsyusha 测验 yarn test:j
Spring boot 和Vue开发中CORS跨域问题解决
12-11
跨域资源共享CORS（Cross-origin Resource Sharing），是W3C的一个标准，允许浏览器向跨源的服务器发起XMLHttpRequest请求，克服ajax请求只能同源使用的限制。关于CORS的详细解读，可参考阮一峰大神的博客：跨域资源共享CORS详解。 1. 遇到的问题： 我用spring-boot 做Rest服务，Vue做前端框架，用了element-admin-ui这个框架做后台管理。在调试的过程中遇到了如下错误: Preflight response is not successful 2. 分析问题 这个问题是典型的CORS跨域问题。 所谓跨域： 跨域
ArcGIS Server 报错 set the request‘s mode to ‘no-cors‘ to fetch the resource with CORS disabled.
qq_51165365的博客
05-27 2639
ArcGIS Server 报错 同一电脑同一请求同一服务数据，关掉一个数据服务请求（前端或其他），F12，长按鼠标右键，清除缓存即可。
nginx跨域访问设置
weixin_44133605的博客
05-08 3962
1、ngxin跨域访问错误提示 Access to fetch at 'http://ip:端口/' from origin 'http://域名' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no
vue用fetch发送请求解决跨域问题(CORS)
Hello_word_2
07-16 4641
1.设置代理路径 ，找到config/index.js文件里面的proxyTable dev: { env: require('./dev.env'), port: 8081, assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: { '/api': {//前端路由匹配模式 target: 'http://localhost:8089', //后端请求服务域
【JavaScript】解决跨域访问文件的问题
winrh的博客
12-29 4708
背景 如果js用ajax等常见方法，访问网络文件，尝试获取网页内容，会报错： Failed to load https://example.com/: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘https://anfo.pl' is therefore not allowed access. If an opaque response serves your nee
前端 | CORS 跨域问题解决
weixin_42479421的博客
03-09 1307
注： 注意顺序，press和cors的顺序。，判断是用require还是import。头部没有配置，导致请求被浏览器拦截。
JS跨域问题：response响应码200但response.ok=false或者是mode:no-cors出bug
weixin_46685211的博客
04-11 2408
用js实现一个前端向后端进行网络通信的代码时遇到的跨域问题，造成前端无法获取后院响应内容。
掌握Vue三种数据请求方式：vue-resource、axios与fetch-jsonp
本文将详细介绍Vue.js中请求数据的三种常见方式，分别是官方推荐的vue-resource插件、流行的axios库以及fetch-jsonp。首先，我们将关注vue-resource，它是由Vue团队官方提供的一个轻量级的HTTP客户端，用于简化前端...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值