跨域三种常用解决方案

一、什么是跨域请求？
所谓跨域请求，就是指当前发起请求的域与该请求指向的资源所在的域不一致。

二、什么是同源策略？
同源策略是浏览器的核心基础安全策略。如果少了同源策略，浏览器很容易受到XSS，CSFR等攻击。所谓同源是指协议，域名和端口号均相同，任何一个不同都是跨域。

三、解决方案

1.JSONP
原理是Ajax存在跨域问题，但是script标签不存在这类问题，所以利用script标签可解决跨域问题。注意，JSONP只支持get方式，有一定的局限性和安全问题。实例代码如下：
这是html页面，由于localhost:8080与localhost:3000端口号不同，属于跨域请求，这时我们可以创建一个回调函数，然后在远程服务上调用这个函数并且将数据作为参数传递，完成回调。

<h1>hello</h1>
<script>
// 定义一个函数
localFunction = function (data) {
    console.log(data);
}
</script>
// 调用远程服务，并将函数作为参数传递
<script src="http://localhost:3000?callback=localFunction" type="text/javascript"></script>

这里是service，将数据作为参数传递，完成回调

const express = require('express')

let app = express()

app.get('/',function (req, res) {
	// 获取回调函数的名字,就是localFunction
    let funcname = req.query.callback;
    // 输出数据，括号里的代码相当于执行localFunction('jsonp')
    res.send(funcname+"('jsonp')")
})
app.listen(3000)

2、 cors：添加响应头，允许跨域，实例如下
这是html页面，当用fetch请求localhost:3000时，显然是跨域请求，如果远程服务不设置授权跨域，则会出现错误。

<h1>CORS</h1>
<script>
fetch("http://localhost:3000/").then(res=>res.text()).then(data=>{console.log(data);})
</script>

设置请求头Access-Control-Allow-Origin，设为*，授权跨域。

const express = require('express')

let app = express()
// 添加请求头，设置为*
app.get('/',function (req, res) {
    res.header('Access-Control-Allow-Origin','*')
    res.send('cors')
})
app.listen(3000)

3、使用window.name+iframe来进行跨域
原理：当在浏览器中打开一个页面，或在页面添加一个iframe时会创建一个对应的window对象，当页面加载另一个新的页面时，window的name属性是不会变的。这样就可以利用在页面动态添加一个iframe然后src加载数据页面，在数据页面将需要的数据赋值给window.name。然而此时承载iframe的parent页面还是不能直接访问，不在同一域下iframe的name属性，这时只需要将iframe再加载一个与承载页面同域的空白页面，即可对window.name进行数据读取。实例如下：
这里是data.html

<script>
	window.name="这里是data.html的数据"
</script>

这里是index.html页面，在页面使用一个隐藏的iframe来充当中间角色，由iframe取获取data.html的数据，然后再得到iframe中的数据。

<h1>window.name+iframe</h1>
<iframe src="data.html" id="iframe" frameborder="0" onload="getData()"></iframe>
<script>
function getData() {
    //iframe载入data.html页面会执行此函数
    let iframe = document.getElementById('iframe')
    iframe.onload=function () {
        //iframe和index.html处于同一源，可以互相访问
        let data = iframe.contentWindow.name
        //获取iframe中的window.name，也就是data.html中给它设置的数据
        console.log(data);
    }
    //这里的index1.html为随便一个页面，只要与index.html同源就行，目的是让index.html能够访问到iframe中的东西，否则访问不到
    iframe.src='index1.html'
}
</script>