一次失败的 CORS 请求所引发的

最新推荐文章于 2024-08-19 12:00:47 发布
最新推荐文章于 2024-08-19 12:00:47 发布
阅读量8.8k 收藏 1
点赞数
分类专栏： web 浏览器 文章标签： api 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/adrianzqt/article/details/77801687
版权
本文讲述了作者在处理一个API迁移过程中遇到的CORS请求失败问题，通过设置'hifetch'库的'disableCORS'属性尝试解决，但最终发现需要在服务端处理跨域请求。在探索解决方案的过程中，提到了使用Chrome插件规避CORS限制的临时方法，但意识到这不是长久之计。最后，作者选择将跨域请求操作放在服务端，以实现客户端的CORS请求。文章强调CORS是浏览器层面的机制，服务端并无跨域概念，适合前端开发者学习参考。
摘要由CSDN通过智能技术生成

最近，在负责公司一个老版本 API 的迁移工作，其中就涉及到 CORS 请求。

然而，就在我利用新的 API 发起一个 CORS 请求时，却报出了下面这个错误：

这里写图片描述

原来是由于响应头中不包含 ‘Access-control-allow-origin’ 这个字段，所以也就拒绝了我的跨域资源共享请求。。这 API 设计得。。

不过，身为一名前端小白，该踩的坑自然还是要踩的，错误信息下面不是都说了吗，如果我想要一个 opaque 服务，那么可以把请求模式设置为 ‘no-cors’，bingo!!!

我们公司前端发网络请求都是用的技术大大 @dexteryy 写的一个库 — hifetch ，我自然也就看了一下它的文档，里面果然有关于 ‘no-cors’ 的东西，只需要设置一行属性：’disableCORS: true’ 即可。

然而，设置了之后，得到的结果仍然是和之前一模一样的错误。。。

这个。。。难道是 hifetch 这个库的问题？？？

带着疑惑，我看了看 hifetch 的源码，果然，发现了这么一段代码：


                

                
                
        

        

    

  


        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  adrianzqt
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
关于前端的跨域请求

				
			

			

				

					faithadam的博客
				

				

					02-15
					
					767
					
				

			

		

		

			
				
后端给我一个测试接口，我用fetch API 去POST，一开始发现被CORS所屏蔽，在报错的指示中得到提示：使用mode:"no cors”，这样POST确实成功了，可以对服务器的JSON进行改写，此时我还没发现问题。

接着我开始测试GET请求的功能，没有多想我依旧使用no cors设置，但是这次返回的响应，url是空的，status显示为0.总之请求是不成功的。

经过查阅资料，我了解到，使用no cors返回的是opaque即不透明响应，是不能满足需要的，这时候我回头在控制台打印POST的响应，发现

			
		

	



                

              
                



	

		

			

				
					
fetch各种报跨域错误,数据无法获取的解决方案

				
			

			

				

					小结巴巴的博客
				

				

					09-05
					
					5694
					
				

			

		

		

			
				

			1、介绍
    fetch 提供了一个获取资源的接口 (包括跨域)。
    fetch 的核心主要包括：Request , Response , Header , Body
    利用了请求的异步特性 --- 它是基于 promise 的
 
2、用法

var request = new Request('/users.json', {
    method: '...

			
		

	



                


  
              

                


	

		

			

				
					
CORS跨域问题全解：原理、问题与解决方案

					
最新发布

				
			

			

				

					weixin_44976692的博客
				

				

					08-19
					
					6617
					
				

			

		

		

			
				
在现代Web开发中，浏览器的同源策略（Same-Origin Policy）是一种重要的安全策略。它限制了从一个源（协议、域名和端口）加载的文档或脚本，与来自不同源的资源进行交互。这种限制防止了恶意网站在未经用户同意的情况下访问敏感数据。CORS是W3C标准之一，用于绕过同源策略的限制。在CORS机制下，服务器通过设置适当的HTTP头，告知浏览器允许哪些源访问其资源。CORS请求分为两类：简单请求（Simple Requests）和预检请求（Preflight Requests）。问题描述。

			
		

	





	

		

			

				
					
Chrome 重大更新，CORS 增加了两个新的请求头？

				
			

			

				

					Benxiaohai_311的博客
				

				

					08-26
					
					2101
					
				

			

		

		

			
				
这个版本，对私有网络的限制正式生效啦，主要目的是保护用户免受针对私有网络上的路由器和其他设备的。地址比发起请求的网址更私密，私有网络的预检请求也会针对同源请求发送。能问出这俩问题，一定没好好看我的公众号，其实之前在多篇文章里都提到过相关的策略解读，注意：无论请求方法和模式如何，都会为所有私有网络请求发送预检请求。同源请求的预检请求还可防止。开始，如上面我们介绍的预检请求失败，请求依然会成功，但会在。，也是可以请求成功的，不过这个风险较大，不建议设置。）会限制网站向私有网络上的服务器发送请求的能力。...

			
		

	



		

			
		



	

		

			

				
					
CORS 完全手册之 CORS 详解

				
			

			

				

					LuckyWinty的博客
				

				

					04-11
					
					693
					
				

			

		

		

			
				
在 CORS 完全手册之如何解决CORS 问题？里面我们提到了常见的CORS 错误解法，以及大多数状况下应该要选择的解法：「请后端加上response header」。但其实「跨来源请求」...

			
		

	





	

		

			

				
					
项目中的图片跨域问题解决方式

				
			

			

				

					G294992891的博客
				

				

					11-16
					
					1万+
					
				

			

		

		

			
				
现象
首先，在生产环境中，由于进行编辑图片时，将图片回显到ReactCrop组件中进行可裁剪编辑，然而回显时，需要将图片转化为base64的格式或者blob对象, 此时需要将图片次绘制成canvas进行裁剪，但是，就会出现图片的跨域问题，图片不在一个域下的话，使用 canvas 会污染画布，所以就不行啦！！！！
不过这个其实是需要后端在服务端进行配置就好了，但是前端要硬抗的话，那只能含着泪解决吧！
图示


解决方案一

因为在本地进行图片回显的时候就已经跨域了，所以为了保证在同一域的环境进行处理图片显示的

			
		

	





	

		

			

				
					
前后端分离项目 解决跨域请求请求接口报cors错误

				
			

			

				

					小尧没有了的博客
				

				

					05-28
					
					1700
					
				

			

		

		

			
				
前后端分离项目 解决请求接口报cors错误

			
		

	





	

		

			

				
					
一个前后端分离项目上线因OPTIONS请求403引发的思考

				
			

			

				

					前端攻坚战
				

				

					03-21
					
					9559
					
				

			

		

		

			
				
最近在上线Vue+Vue Router(history模式)的前后端分离项目时，发现所有的 预检请求（preflight request）都403报错。然而后端反馈已经添加注解允许跨域（具体如何操作，本文暂不描述，可以去自行搜索）。于是排查是否是nginx不支持options请求，并成功定位问题。

于是思考如何避免这个问题：

1. 不使用跨域

2. 不发送options预检请求

最后商量决...

			
		

	





	

		

			

				
					
跨域资源引用（CORS Preflight请求）的处理方法

				
			

			

				

					
				

			

		

		

			
				
跨域资源引用是指从一个域向另一个域发起网络请求的过程。在Web开发中，由于浏览器实施同源策略的安全机制，当网页JavaScript试图获取非同源资源时，将会触发跨域问题。这种跨域请求可能是跨域AJAX请求、跨域资源...

			
		

	





	

		

			

				
					
CDN加速WordPress触发CORS导致跨域加载失败

				
			

			

				

					青年IT男
				

				

					04-09
					
					1948
					
				

			

		

		

			
				

这两天折腾CDN加速来提升自己博客的访问速度，用的阿里云CDN加速方案；使用的时候发现一个问题，部分资源CDN加速失败,原因是触发了CORS，因为CDN加速网址与博客网址不一致引发的跨域请求不成功；

从报错中发现Off与Tff字体加载报错：
(index):1 Access to Font at 'http://cdn.5yun.org/wp-content/themes/yusi1....

			
		

	





	

		

			

				
					
【Django】后端CORS配置方法 前端fetch出错 无法获取数据

				
			

			

				

					Hull Qin
				

				

					06-07
					
					4370
					
				

			

		

		

			
				
问题描述
开发前后端分离项目，并且前后端服务器需要跨域来交互，直接用fetch会出问题，提示让使用mode: 'no-corss'，但是使用该mode后，虽然不再报错，但是后端Django无法获取数据。
配置方法
前端fetch使用mode: 'cors'
后端Django，安装django-cors-headers
在settings.py中设置：
INSTALLED_APPS = [
    'corsheaders',
]

MIDDLEWARE = [
    'corsheaders.middle

			
		

	





	

		

			

				
					
使用fetch轻松解决JS跨域请求问题——无需CORS,jsonp

				
			

			

				

					sunk的专栏
				

				

					04-15
					
					6万+
					
				

			

		

		

			
				
fetch(url, {
        method: "POST",
  mode: "no-cors",
  headers: {
    "Content-Type": "application/x-www-form-urlencoded"
  },
  body: "请求参数"
        }).then(function(res) {
 console.log("R

			
		

	





	

		

			

				
					
SpringMVC + Cors 解决跨域问题

				
			

			

				

					No_be_IT_movers的博客
				

				

					07-11
					
					2996
					
				

			

		

		

			
				
1、首先在web.xml配置拦截器：2、定义一个类实现Filter接口：设置响应头信息，其中：Access-Control-Allow-Origin：允许访问该资源的路径Access-Control-Allow-Methods：访问该资源允许使用的方法Access-Control-Max-Age：缓存cors配置Access-Control-Allow-Headers：允许使用的响应头Access...

			
		

	





	

		

			

				
					
response设置响应头，解决跨域请求问题，No 'Access-Control-Allow-Origin' header is present on the requested resource

					
热门推荐

				
			

			

				

					益添的博客
				

				

					05-15
					
					25万+
					
				

			

		

		

			
				
今天被跨域请求的问题困扰了很久，跨域一句话的理解就是：服务端和请求端的地址不一样。跨域的详细介绍可以参考：浏览器和服务器实现跨域(CORS)判定的原理，这里不多赘述。我出现的问题，主要就是客户端向发送了服务端请求，服务器已经能返回数据，但是浏览器不接收。Failed to load http://localhost:8080/XXXX: No 'Access-Control-Allow-Origi...

			
		

	





	

		

			

				
					
跨域请求 CORS解决

				
			

			

				

					d124939312的博客
				

				

					07-23
					
					535
					
				

			

		

		

			
				
 

错误提示：

http状态返回200， 但是客户端报以下错误。

index.html:1 Failed to load http://ip:端口/请求地址: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed ...

			
		

	





	

		

			

				
					
解决CORS : No ‘Access-Control-Allow-Origin’ header is present on the requested resource访问跨域问题

				
			

			

				

					哈哈哈
				

				

					08-26
					
					6468
					
				

			

		

		

			
				
一. 抛出问题
今天在使用写前端代码的时候，在HBuilder中用JQuery异步请求eclipse中的项目
报出了下面的错误

问题copy下来就是：

Access to XMLHttpRequest at ‘http://localhost:6230/all/allexams?accId=1’ from origin ‘http://127.0.0.1:8848’ has been blocked by CORS  : No ‘Access-Control-Allow-Origin’ header i

			
		

	





	

		

			

				
					
跨域问题解决方法: chrome浏览器关闭CORS策略

				
			

			

				

					skysys的研究小屋
				

				

					02-03
					
					2万+
					
				

			

		

		

			
				
在Chrome的快捷方式后面加：--args --disable-web-security --user-data-dir
然后打开这个快捷方式



			
		

	





	

		

			

				
					
CORS跨域-Nginx使用方法（Access-Control-Allow-Origin错误提示）

				
			

			

				

					weixin_30918415的博客
				

				

					11-26
					
					1758
					
				

			

		

		

			
				
问题说明
当出现上图这个的时候，是访问请求外域URL无法访问，浏览器认为访问外域URL不安全，导致访问不了简称跨域问题。而这上面出现一句很重要的话“NO Access-Control-Allow-Origin”，这个是什么？是不是只要添加“Access-Control-Allow-Origin”头就能访问呢？如何添加？会不会有其他问题？
Access-Control-Allow-Or...

			
		

	





	

		

			

				
					
cors 请求未能成功

				
			

			

				

					06-03
				

			

		

		

			
				
在浏览器中，JavaScript 发起跨域请求时会先发送一个 OPTIONS 请求，如果服务器返回了 CORS 相关的响应头，那么浏览器才会发送真正的请求。如果服务器没有设置正确的 CORS 响应头，那么浏览器就会拒绝这个请求，导致...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 2

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值