JSONP原理和CORS跨域

最新推荐文章于 2021-11-15 20:52:18 发布

天落枫

最新推荐文章于 2021-11-15 20:52:18 发布

阅读量171

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/xiapi3/article/details/113731718

版权

JavaScript 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

1 JSONP

JSON with padding：填充式的JSON
由于ajax如果不设置dataType只能请求同源地址，无法跨域，所以需要使用其他跨域方式，已知三种跨域标签，可以引用别的地方的内容：img、link、script，而只有script引入的为js代码，可以作为js代码去解析，所以使用script标签进行跨域

2 script跨域

搭建简单的服务器：为保证引入的script代码能被浏览器正确解析，所以返回的内容必须为可解析的js代码
方案一：服务端拼接固定js语句，网页直接引入

const http = require('http')

http.createServer((req,res)=>{
    let time = new Date()
    let s =time.toString()
    res.writeHead(200,{"Content-Type":"text/plain;charset=utf-8;"})
    res.write(`document.write("当前时间："+"${s}")`)
    res.end()
}).listen(3000)

script跨域：在index.html中设置标签如下，在加载完标签并解析后，页面会显示结果

<script src="http://localhost:3000"></script>

但是，如果在服务端写死返回代码，则不利于后续页面的处理，灵活性降低

方案二：服务端拼接函数，网页实现函数

res.write(`show("当前时间："+"${s}")`)

网页：

<script>function show(x){document.write(x)}</script>
<script src="http://localhost:3000"></script>

但是，函数需要协商保持一致，如果不相同则无法成功，本该定义到页面的函数，却在服务端写死了

方案三：url中传递callback参数，参数名指定需要回调的js函数
服务端：

const http = require('http')
const url = require('url')

http.createServer((req,res)=>{
    let time = new Date()
    let s =time.toString()
    let callback = url.parse(req.url,true).query.callback
    // console.log(url.parse(req.url))
    res.writeHead(200,{"Content-Type":"text/plain;charset=utf-8;"})
    res.write(`${callback}("当前时间："+"${s}")`)
    res.end()
}).listen(3000)

网页：

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    <script>function show(x){document.write(x)}</script>
    
    <script src="http://localhost:3000?callback=show"></script>
</body>
</html>

但是，由于在script标签中，只会在页面加载的时候执行一次，如果想多次执行，则必须动态生成script标签！！
方案四：每次动态创建script元素，请求完毕删除元素，这样可以多次发送请求

<script>
$('button').click(function(){
	var script = document.createElement('script')
	script.src = "http://localhost:3000?callback=show"
	document.body.appendChild(script)
})
<script>function show(x){document.write(x);$('body>script:last').remove()}</script>
</script>

3 ajax跨域

ajax封装了方案四：

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
    <button>button</button>
    <script>
        $('button').click(function () {
            $.ajax({
                    url: 'http://localhost:3000',
                    type: 'GET',
                    dataType: 'jsonp'
                })
                .done(res => console.log(res))
                .fail(err => console.log(err))
        })
    </script>
</body>
</html>

特别注意：ajax只是简化了前端的跨域方法，对于后端服务器，依然需要按照方案三进行跨域支持！！

4 CORS跨域

CORS跨域全称跨域资源共享，允许浏览器发送跨域请求，通过判断服务器返回消息来判定当前服务器是否允许跨域请求

4.1 简单请求

简单请求类型为：

GET
POST
HEAD

且content-Type类型为：

application/x-www-form-urlencoded
multipart/form-data
text/plain

请求流程比较简单，直接发送请求，如果服务端不支持则直接报错

4.2 非简单请求

除了简单请求都是非简单请求，非简单请求会先发送一个预检请求preflight方位为OPTIONS，如果浏览器返回正确则后续流程和简单请求相同

4.3 CORS相关头域

4.3.1 Access-Control-Allow-Origin（必选）

这个值为跨域允许的域名：只能填*或者单域名
比如，www.a.com访问b.a.com，请求发出去后响应结果的该字段里为www.a.com则允许跨域，或者*也可以

4.4 预检请求preflight

该请求使用的方法是OPTIONS，用于询问，头信息里有几个主要字段：

Origin：请求源
Access-Control-Request-Method：必须，用来列出CORS会用到的HTTP方法
Access-Control-Request-Headers：非简单请求中的额外的请求头字段
Access-Control-Allow-Methods：必须，允许的http方法（POST、GET、OPTIONS、PUT、DELETE），GET和POST默认允许