Vue-cli--jquery.ajax调用接口跨域问题（ No ‘Access-Control-Allow-Origin‘ ）

最新推荐文章于 2024-07-26 11:35:20 发布
最新推荐文章于 2024-07-26 11:35:20 发布
阅读量1.3k 收藏
点赞数
分类专栏： VUE 文章标签： vue.js ajax jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42221321/article/details/121907114
版权

Vue-cli--jquery.ajax调用接口跨域问题（ No 'Access-Control-Allow-Origin' ），接口无法加载响应数据


本人小白一个，在调用后台给的接口时，频频报错，特此记录一下
项目是vue-cli搭建，分正式测试环境，接口使用jquery.ajax调用
调用过程中出现以下两个错误
一个是No 'Access-Control-Allow-Origin，在网上找了相关文章为跨域问题，因为我本地和接口所在地址不是同源，这个后面采用了代理处理

在这里插入图片描述
另一个是failed to load response data :No data found for resource with given identifier
无法加载响应数据：没有找到具有给定标识符的资源的数据
在控制台里显示以下信息，想不出为什么，于是到浏览器的Network查看接口调用过程， 发现有个一闪而过的提示信息为CORB(跨源读取阻止)，于是用浏览器直接打开接口地址发现正常，证明还是我的代码问题
在这里插入图片描述
解决方法

在config.js中，建立代理
target为访问接口的域名或ip地址
changeOrigin:true 代表跨域
例如域名为http://www.abc.com,接口地址为http://www.abc.com/getInfo,
那么将target会替代”http://www.abc.com“这段域名变为/abc给接口调用，接口写为/abc/getInfo,实际地址就是http://www.abc.com/getInfo
因为实际接口里没有代理的这个字段，所以使用pathRewrite替换为空
具体可以参考解决vue-cli项目跨域问题
在这里插入图片描述
在接口里，直接使用代理完善接口地址
在这里插入图片描述
在组件中调用接口，调用成功
在这里插入图片描述
在这里插入图片描述

卷毛崽
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
web前端笔试题-完善版
JackieDYH的博客
08-08 1万+
web面试题 1、定位有哪几种？分别简述其特点。 static：默认值，没有定位，元素出现在正常的文档流中 relative：生成相对定位的元素，不脱离文档流，相对于自身位置进行定位 absolute：生成绝对定位的元素，脱离文档流，相对于最近一级的定位，而不是static的父元素来进行定位 fixed：生成绝对定位元素（老IE不支持），脱离文档流，相对于浏览器窗口进行定位 2、请描述一下网页从开始请求到最终显示的完整过程 1.1在浏览器中输入地址 1.2发送到DNS服务器，解析获取域名对应的web服务器
JQuery跨域请求报错，原因：CORS头缺少‘Access-Control-Allow-Origin‘
qq_36033484的博客
07-18 3292
字面意思就是需要添加一个叫'Access-Control-Allow-Origin'的头，但是这里需要注意的是，不是在具体的调用方法里加这个头信息（网上很多文章存在误导），这样是不会生效的，我们需要写一个过滤器/拦截器统一设置。我这里通过过滤器来实现，大家可以根据自己的需要选择。其实，如果你用的Spring版本是4.2以上，有一种更简单直接的方法实现跨源访问，那就是直接在C控制器添加注解@CrossOrigin，表示该Controller下的方法都允许跨源访问。...
jquery ajax xmlhttprequest cannot load,XMLHttpRequest cannot load. No 'Access-Control-Allow-Origin' ...
weixin_36410567的博客
08-06 232
This seems to be a pretty common question on here, and I've through a couple dozen threads on the topic. However, none of the responses have worked for me so far. Basically I have a page with a jQuery...
无法加载响应数据：no data found for resource with given identifier
最新发布
喜欢原味奶茶的博客
07-26 402
问题发现的场景： 国产通信系统上传了pdf文件到业务系统中，该pdf应该是国产系统特有的文件头编码，window系统识别不了。然后在window系统下面下载该文件，由于下载流中返回的是pdf流，但是客户端根本识别不了这个pdf文件。后来跑到用户国产系统上面去下载，确实可以下载下来，window就是下载不了的情况。也就是说，我下载的时候指定的是下载pdf文件，但是返回的是不是一个可以识别的pdf文件。例如是文件损坏了，识别不了就会报这个错。这个就好排除是业务系统的问题，告诉用户这个是操作系统上的问题。
jquery ajax No 'Access-Control-Allow-Origin' header is present on the requested resource
zhuchunyan_aijia的博客
02-14 3943
No 'Access-Control-Allow-Origin' header is present on the requested resource. 没有访问控制允许源头是目前对请求的资源 ——跨域问题引起。 Access-Control-Allow-Origin与跨域： 问题 在某域名下使用Ajax向另一个域名下的页面请求数据，会遇到跨域问题。另一个域名必须在respon
AJAX 跨域请求 No ‘Access-Control-Allow-Origin’
sucre_smile的博客
01-03 5319
最近在项目中用到 AJAX 跨域请求，故整理了一下方法， 需要注意的是Response Headers 信息，不同的 Headers 信息有可能获取方式有所不一样，大家可以尝试一下。 经常出现的错误： ** No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘null’ i
JQuery跨域访问问题：Access-Control-Allow-Origin
reggergdsg的博客
05-14 6360
今天在项目测试时遇到的问题，拿出来和大家分享一下。 谷歌报错如下：XMLHttpRequest cannot load http://v.xxx.com. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:63342' is theref
简单实现ajax获取跨域数据
10-18
当服务器支持CORS时，会在响应头中包含"Access-Control-Allow-Origin"字段，来指示哪些域是允许访问资源的。前端代码在发送请求前，浏览器会先发送一个预检请求（OPTIONS），询问服务器是否允许跨域请求，一旦服务器...
跨域问题
hhhh
05-02 447
跨域问题 MDN Web Docs 中定义跨域，当一个资源从与该资源本身所在的服务器不同的域或端口不同的域或不同的端口请求一个资源时，资源会发起一个跨域 HTTP 请求。 即访问了一个网站，然后在这个网站返回的资源里面，请求了B网站/端口的资源。 跨域这个情况只会出现在浏览器页面里，因为实际上是浏览器由于安全原因限制了这些请求的访问。 CSRF攻击，如果前端可以跨域，那: 用户访问A,生成cookie存储在本地，点击弹窗广告进入地址B,B网站可以在自己的页面中获取A的cookie,然后模拟用户登录 同源
Vue | Vue中的Ajax【vue脚手架配置代理服务器 + github案例 + slot插槽 】
不爱吃菜的菜菜的博客
07-21 723
说明文档https//cli.vuejs.org/zh/config/#devserver-proxy。前后端交互通常需要跨域，常用的跨域方法有cors、jsonp、代理服务器。当你请求的资源8081本身就有，他就不会把请求转发给5000。然后再把原先请求的地址改一下，就可以请求到跨域的数据了。注意不能灵活的控制请求是否走代理。然后把脚手架给停掉，然后重新启动。vue脚手架可以通过。步骤一开启代理服务器。............
前端vue 高新企业必备面试真题（60道）---带答案 （20220414）
weixin_59519449的博客
04-14 3630
目录 1、Vue 的最大的优势是什么？（必会） Vue 的优势： 2、Vue 和 jQuery 两者之间的区别是什么？（必会） 1、jQuery 介绍： 2、vue 介绍： 3、vue 和 jQuery 区别： 1.2）MVC 基本定义 2、使用场景 3、两者之间的区别 4、Vue 数据双向绑定的原理是什么?（必会） Object.defineProperty 和 Proxy 的区别如下: 6、Vue 生命周期总共分为几个阶段？（必会） 7、第一次加载页面会触发哪几个钩子函数？（必
jQuery 跨域访问的三种方式 No 'Access-Control-Allow-Origin' header is present on the reque
阳光暖暖
08-11 1380
$(function($){ var url = 'http://v.juhe.cn/weather/index'; $.ajax(url, { data: { 'cityname': '襄阳', 'dtype': 'jsonp', 'key': 'xxxx', '_': new
【异常】 AJAX 跨域请求报：No ‘Access-Control-Allow-Origin‘ header is present on the requested resource
weixin_48618536的博客
01-15 607
本地环境下，直接打开html文件，用AJAX 方法`jQuery load() `加载**txt文件**时，报错如下：
ajax报错No Access-Control-Allow-Origin header is present on the requested resource
wh456413的博客
06-01 835
ajax报错Access to XMLHttpRequest at ‘xxx’ from origin ‘xxx’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource 原先以为是跨域设置有问题，检查@CrossOrigin和配置类没问题后，终于发现了问题所在： jsp页面使用localhost进行ajax操作，跨域时jsp页面就会出现这种报
后端java(SpringBoot)，前端vue,jQuery跨域请求问题解决方案
main方法
05-28 568
跨域问题： 首先聊聊为什么会出现跨域问题？跨域是什么？ 域(Domain)是Windows网络中独立运行的单位，域之间相互访问则需要建立信任关系(即Trust Relation)。信任关系是连接在域与域之间的桥梁。当一个域与其他域建立了信任关系后，2个域之间不但可以按需要相互进行管理，还可以跨网分配文件和打印机等设备资源，使不同的域之间实现网络资源的共享与管理。 有一种简明的说法来解释广域跨域：跨域访问，简单来说就是 A 网站的 javascript 代码试图访问 B 网站，包括提交内容和获取内容。由于安全
6.9 跨域的问题 Access-Control-Allow-Origin
web
06-09 265
跨域什么是跨域？三种解决方法jsonp（前后端都需要设置）通过jquery通过原生jscors （后端设置）proxy(代理 前后端任意一个都行) 什么是跨域？ 由一个网址另外一个网址发送请求，出于安全考虑，浏览器存在同源政策，只要协议，域名，端口中的任意一个不同，不会导致跨域 Access-Control-Allow-Origin 三种解决方法 jsonp（前后端都需要设置） 原理：script标签不受同源政策的影响，所以不存在跨域问题 客户端传一个回调函数给服务器端，然后服务器端，通过函数返回数据（作为
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值