Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >JSONP、CORS解决跨域问题

JSONP、CORS解决跨域问题

作者头像
用户1214487
发布于 2022-03-26 06:23:29
发布于 2022-03-26 06:23:29
1.7K00
代码可运行
举报
文章被收录于专栏:PythonPython
运行总次数:0
代码可运行

一、为什么会有跨域问题?

是因为浏览器的同源策略是对ajax请求进行阻拦了,但是不是所有的请求都给做跨域,对href属性都不拦截。

二、解决跨域问题的两种方式

三、JSONP

先简单来说一下JSONP,具体详细详见上面JSONP

JSONP是json用来跨域的一个东西。原理是通过script标签的跨域特性来绕过同源策略。(创建一个回调函数,然后在远程服务上调用这个函数并且将json数据形式作为参数传递,完成回调)。

四、CORS跨域

随着技术的发展,现在的浏览器可以主动支持设置从而允许跨域请求,即:跨域资源共享(CORS,Cross-Origin Resource Sharing),其本质是设置响应头,使得浏览器允许跨域请求。

1、简单请求和复杂请求

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
条件:
    1、请求方式:HEADGETPOST
    2、请求头信息:
        Accept
        Accept-Language
        Content-Language
        Last-Event-ID
        Content-Type 对应的值是以下三个中的任意一个
                                application/x-www-form-urlencoded
                                multipart/form-data
                                text/plain
 
注意:同时满足以上两个条件时,则是简单请求,否则为复杂请求

2、简单请求和复杂请求的区别

简单请求:一次请求

非简单请求:两次请求,在发送数据之前会先发第一次请求做‘预检’,只有‘预检’通过后才再发送一次请求用于数据传输。

3、关于预检

在发送真正的请求之前,会默认发送一个options请求,做预检,预检成功后才发送真正的请求

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
- 请求方式:OPTIONS
- “预检”其实做检查,检查如果通过则允许传输数据,检查不通过则不再发送真正想要发送的消息
- 如何“预检”
     => 如果复杂请求是PUT等请求,则服务端需要设置允许某请求,否则“预检”不通过
        Access-Control-Request-Method
     => 如果复杂请求设置了请求头,则服务端需要设置允许某请求头,否则“预检”不通过
        Access-Control-Request-Headers

4、CORS的优缺点

  • CORS的优点:可以发任意请求
  • CORS的缺点:上是复杂请求的时候得先做个预检,再发真实的请求。发了两次请求会有性能上的损耗

五、JSONP和CORS的区别

JSONP:服务端不用修改,需要改前端。发jsonp请求

JSONP:只能发GET请求

CORS:前端的代码不用修改,服务端的代码需要修改。如果是简单请求的话在服务端加上一个响应头。

CORS:可以发任意请求

六、基于CORS实现ajax请求

1、支持跨域,简单请求

服务器设置响应头:Access-Control-Allow-Origin = '域名' 或 '*'

客户端

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6     <meta name="viewport" content="width=device-width">
 7     <title>Title</title>
 8 </head>
 9 <body>
10 <div>
11     <h1>欢迎来到我的主页</h1>
12     <button onclick="getData()">获取用户数据</button>
13 </div>
14 <script src="/static/jquery-1.12.4.min.js"></script>
15 <script>
16     function getData() {
17         $.ajax({
18             url:'http://127.0.0.1:8080/index/',
19             type:"GET",
20             success:function (data) {
21                 console.log(data)
22             }
23 
24         })
25     }
26 </script>
27 </body>
28 </html>

服务端

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
 1 from django.shortcuts import render
 2 from django.http import JsonResponse
 3 from rest_framework.views import APIView
 4 
 5 # Create your views here.
 6 class IndexView(APIView):
 7     def get(self,request,*args,**kwargs):
 8         ret = {
 9             'code': 111,
10             'data': '你好吗?'
11         }
12         response = JsonResponse(ret)
13         response['Access-Control-Allow-Origin'] = "*"
14         return response

2、支持跨域,复杂请求

如果是复杂请求在你真正的发请求之前,会先偷偷的发一个OPTION请求,先预检一下,我

允许你来你才来

如果想预检通过就得写个option请求

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6     <meta name="viewport" content="width=device-width">
 7     <title>Title</title>
 8 </head>
 9 <body>
10 <input type="button" value="获取用户数据" onclick="getUser()">
11 <script src="/static/jquery-1.12.4.min.js"></script>
12 <script>
13     function getUser() {
14         $.ajax({
15             url:'http://127.0.0.1:8080/user/',
16             type:'POST',
17             data:{'k1':'v1'},
18             headers:{
19                 'h1':'sdfdgfdg'
20             },
21             success:function (ret) {
22                 console.log(ret)
23             }
24         })
25     }
26 </script>
27 </body>
28 </html>
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
 1 from django.shortcuts import render,HttpResponse
 2 from django.http import JsonResponse
 3 from rest_framework.views import APIView
 4 
 5 class UserIndex(APIView):
 6     def get(self,request,*args,**kwargs):
 7         ret = {
 8             'code': 111,
 9             'data': '你好吗?'
10         }
11         response = JsonResponse(ret)
12         response['Access-Control-Allow-Origin'] = "*"
13         return response
14 
15     def post(self,request,*args,**kwargs):
16         print(request.POST.get('k1'))
17         ret = {
18             'code':1000,
19             'data':'过年啦',
20         }
21         response = JsonResponse(ret)
22         response['Access-Control-Allow-Origin'] = "*"
23         return response
24 
25     def options(self, request, *args, **kwargs):
26         # self.set_header('Access-Control-Allow-Origin', "http://www.xxx.com")
27         # self.set_header('Access-Control-Allow-Headers', "k1,k2")
28         # self.set_header('Access-Control-Allow-Methods', "PUT,DELETE")
29         # self.set_header('Access-Control-Max-Age', 10)
30 
31         response = HttpResponse()
32         response['Access-Control-Allow-Origin'] = '*'
33         response['Access-Control-Allow-Headers'] = 'h1'
34         # response['Access-Control-Allow-Methods'] = 'PUT'
35         return response

由于复杂请求时,首先会发送“预检”请求,如果“预检”成功,则发送真实数据。

  • “预检”请求时,允许请求方式则需服务器设置响应头:Access-Control-Request-Method
  • “预检”请求时,允许请求头则需服务器设置响应头:Access-Control-Request-Headers
  • “预检”缓存时间,服务器设置响应头:Access-Control-Max-Age

3、跨域获取响应头

默认获取到的所有响应头只有基本信息,如果想要获取自定义的响应头,则需要再服务器端设置Access-Control-Expose-Headers。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8 
 9     <p>
10         <input type="submit" onclick="XmlSendRequest();" />
11     </p>
12 
13     <p>
14         <input type="submit" onclick="JqSendRequest();" />
15     </p>
16 
17     <script type="text/javascript" src="jquery-1.12.4.js"></script>
18     <script>
19         function XmlSendRequest(){
20             var xhr = new XMLHttpRequest();
21             xhr.onreadystatechange = function(){
22                 if(xhr.readyState == 4) {
23                     var result = xhr.responseText;
24                     console.log(result);
25                     // 获取响应头
26                     console.log(xhr.getAllResponseHeaders());
27                 }
28             };
29             xhr.open('PUT', "http://c2.com:8000/test/", true);
30             xhr.setRequestHeader('k1', 'v1');
31             xhr.send();
32         }
33 
34         function JqSendRequest(){
35             $.ajax({
36                 url: "http://c2.com:8000/test/",
37                 type: 'PUT',
38                 dataType: 'text',
39                 headers: {'k1': 'v1'},
40                 success: function(data, statusText, xmlHttpRequest){
41                     console.log(data);
42                     // 获取响应头
43                     console.log(xmlHttpRequest.getAllResponseHeaders());
44                 }
45             })
46         }
47 
48 
49     </script>
50 </body>
51 </html>
52 
53 HTML
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
 1 class MainHandler(tornado.web.RequestHandler):
 2     
 3     def put(self):
 4         self.set_header('Access-Control-Allow-Origin', "http://www.xxx.com")
 5 
 6         self.set_header('xxoo', "seven")
 7         self.set_header('bili', "daobidao")
 8 
 9         self.set_header('Access-Control-Expose-Headers', "xxoo,bili")
10 
11 
12         self.write('{"status": true, "data": "seven"}')
13 
14     def options(self, *args, **kwargs):
15         self.set_header('Access-Control-Allow-Origin', "http://www.xxx.com")
16         self.set_header('Access-Control-Allow-Headers', "k1,k2")
17         self.set_header('Access-Control-Allow-Methods', "PUT,DELETE")
18         self.set_header('Access-Control-Max-Age', 10)
19 
20 Tornado

4、跨域传输cookie

在跨域请求中,默认情况下,HTTP Authentication信息,Cookie头以及用户的SSL证书无论在预检请求中或是在实际请求都是不会被发送。

如果想要发送:

  • 浏览器端:XMLHttpRequest的withCredentials为true
  • 服务器端:Access-Control-Allow-Credentials为true
  • 注意:服务器端响应的 Access-Control-Allow-Origin 不能是通配符 *
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8 
 9     <p>
10         <input type="submit" onclick="XmlSendRequest();" />
11     </p>
12 
13     <p>
14         <input type="submit" onclick="JqSendRequest();" />
15     </p>
16 
17     <script type="text/javascript" src="jquery-1.12.4.js"></script>
18     <script>
19         function XmlSendRequest(){
20             var xhr = new XMLHttpRequest();
21             xhr.onreadystatechange = function(){
22                 if(xhr.readyState == 4) {
23                     var result = xhr.responseText;
24                     console.log(result);
25                 }
26             };
27 
28             xhr.withCredentials = true;
29 
30             xhr.open('PUT', "http://c2.com:8000/test/", true);
31             xhr.setRequestHeader('k1', 'v1');
32             xhr.send();
33         }
34 
35         function JqSendRequest(){
36             $.ajax({
37                 url: "http://c2.com:8000/test/",
38                 type: 'PUT',
39                 dataType: 'text',
40                 headers: {'k1': 'v1'},
41                 xhrFields:{withCredentials: true},
42                 success: function(data, statusText, xmlHttpRequest){
43                     console.log(data);
44                 }
45             })
46         }
47 
48 
49     </script>
50 </body>
51 </html>
52 
53 HTML
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
 1 class MainHandler(tornado.web.RequestHandler):
 2     
 3     def put(self):
 4         self.set_header('Access-Control-Allow-Origin', "http://www.xxx.com")
 5         self.set_header('Access-Control-Allow-Credentials', "true")
 6         
 7         self.set_header('xxoo', "seven")
 8         self.set_header('bili', "daobidao")
 9         self.set_header('Access-Control-Expose-Headers', "xxoo,bili")
10 
11         self.set_cookie('kkkkk', 'vvvvv');
12 
13         self.write('{"status": true, "data": "seven"}')
14 
15     def options(self, *args, **kwargs):
16         self.set_header('Access-Control-Allow-Origin', "http://www.xxx.com")
17         self.set_header('Access-Control-Allow-Headers', "k1,k2")
18         self.set_header('Access-Control-Allow-Methods', "PUT,DELETE")
19         self.set_header('Access-Control-Max-Age', 10)
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018-02-25 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
同源策略和跨域解决方案
下表给出了相对http://a.xyz.com/dir/page.html同源检测的示例: 
py3study
2020/01/19
1.6K0
同源策略和跨域解决方案
AJAX全套
对于WEB应用程序:用户浏览器发送请求,服务器接收并处理请求,然后返回结果,往往返回就是字符串(HTML),浏览器将字符串(HTML)渲染并显示浏览器上。
用户1214487
2022/03/26
1.7K0
史上最全的AJAX
对于web应用程序:用户浏览器发送请求.服务器接收并处理请求,然后返回结果,往往返回就是字符串(HTML),浏览器将字符串(HTML),渲染并显示浏览器上·
Wyc
2018/09/11
4.5K0
ajax全套
对于WEB应用程序:用户浏览器发送请求,服务器接收并处理请求,然后返回结果,往往返回就是字符串(HTML),浏览器将字符串(HTML)渲染并显示浏览器上。
菲宇
2019/06/13
3.2K0
ajax全套
跨域和CORS
  同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。    
changxin7
2019/12/19
1.2K0
HTTP的同源策略与跨域资源共享(CORS)机制
准确的说,同源策略是指,浏览器内部在发起如下请求时,该来源必须是当前同源的HTTP资源:
用户7657330
2020/08/14
1.5K0
HTTP的同源策略与跨域资源共享(CORS)机制
浏览器同源策略与如何解决跨域问题总结
下表给出了与 URL http://store.company.com/dir/page.html 的源进⾏对⽐的示例:
henu_Newxc03
2022/05/05
2K0
浏览器同源策略与如何解决跨域问题总结
CORS解决跨域问题
浏览器中,网站A的网络请求访问网站A的资源(图片,HTTP请求)是很顺畅的,而想访问网站B的资源,就要面对跨域资源访问的问题了。面对跨域问题,有很多的解决方案,本文讨论使用 CORS 来解决的方案。
张云飞Vir
2020/03/27
2.1K0
跨域问题及CORS解决跨域问题方法
跨域不一定会有跨域问题。因为跨域问题是浏览器对于ajax请求的一种安全限制:一个页面发起的ajax请求,只能是于当前页同域名的路径,这能有效的阻止跨站攻击。
Java架构师必看
2021/03/22
13K0
跨域问题及解决方案
在前后端分离项目中,跨域问题是一定会遇到的。跨域问题的出现,会导致css、js或者ajax对后端请求等资源无法访问的情况。
半月无霜
2023/03/03
1.2K0
跨域问题详解
做过 web 开发的同学,应该都遇到过跨域的问题,当我们从一个域名向另一个域名发送 Ajax 请求的时候,打开浏览器控制台就会看到跨域错误,今天我们就来聊聊跨域的问题。
奥特曼打小怪兽2222555
2018/12/04
2.9K0
跨域问题详解
跨域问题总结
跨域问题其实就是浏览器的同源策略所导致的。同源策略是一个重要的安全策略,它用于限制一个 origin 的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档,减少可能被攻击的媒介。
Se7en258
2021/07/23
2.8K0
跨域问题总结
AngularJS跨域问题 ajax 跨域
从网上下载了一个AngularJS项目,配置启动后发现数据发送不到自己的后台中去,总是提示跨域问题。
战神伽罗
2019/07/24
4.1K0
AngularJS跨域问题 ajax 跨域
jsonp-反向代理-CORS解决JS跨域问题的个人总结(更新 v2.0)
各个方法都有各自的优缺点,但是目前前端开发方面比较常用的是 jsonp,反向代理,CORS:
前端正义联盟
2018/08/14
1.6K0
jsonp-反向代理-CORS解决JS跨域问题的个人总结(更新 v2.0)
跨域共享CORS详解及Gin配置跨域
跨域简介 当两个域具有相同的协议(如http), 相同的端口(如80),相同的host,那么我们就可以认为它们是相同的域(协议,域名,端口都必须相同)。 跨域就指着协议,域名,端口不一致,出于安全考虑,跨域的资源之间是无法交互的(例如一般情况跨域的JavaScript无法交互,当然有很多解决跨域的方案) 解决跨域几种方案 /* CORS 普通跨域请求:只服务端设置Access-Control-Allow-Origin即可, 前端无须设置,若要带cookie请求:前后端都需要设置。
iginkgo18
2020/12/01
1.8K0
跨域(CORS)产生原因分析与解决方案,这一次彻底搞懂它
Cross-origin Resource Sharing 中文名称 “跨域资源共享” 简称 “CORS”,它突破了一个请求在浏览器发出只能在同源的情况下向服务器获取数据的限制。
五月君
2020/08/12
15.2K0
跨域(CORS)产生原因分析与解决方案,这一次彻底搞懂它
CORS原理及@koa/cors源码解析
这是浏览器的同源策略所造成的,同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。
木子星兮
2020/07/16
1.3K0
解决 用 Nginx 处理 跨域问题
当你遇到跨域问题,不要立刻就选择复制去尝试。请详细看完这篇文章再处理 。我相信它能帮到你。
猫头虎
2024/04/08
1.9K1
解决 用 Nginx 处理 跨域问题
10 种CORS跨域解决方案
这是一个老生常谈的话题,以前我觉得这种基础文章没有什么好写的,最近为了线上问题深入了解底层,确实有点东西,下面汇总成10种方案。
sunsky
2022/09/09
7.2K0
10 种CORS跨域解决方案
CORS
CORS(https://links.jianshu.com/go?to=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh- CN%2Fdocs%2FGlossary%
ruochen
2021/12/04
3.1K0
相关推荐
同源策略和跨域解决方案
更多 >
LV.0
这个人很懒,什么都没有留下~
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验