跨域的九种解决⽅案
前⾔
前后端数据交互经常会碰到请求跨域，什么是跨域，以及有哪⼏种跨域⽅式，这是本⽂要探讨的内容。
⼀、什么是跨域？
1.什么是同源策略及其限制内容？
同源策略是⼀种约定，它是浏览器最核⼼也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSRF等攻击。所谓同源是指"协议+域名+端⼝"三者相同，即便两个不同的域名指向同⼀个ip地址，也⾮同源。
同源策略限制内容有：
Cookie、LocalStorage、IndexedDB 等存储性内容
DOM 节点
AJAX 请求发送后，结果被浏览器拦截了
但是有三个标签是允许跨域加载资源：
<img src=XXX>
<link href=XXX>
<script src=XXX>
2.常见跨域场景
当协议、⼦域名、主域名、端⼝号中任意⼀个不相同时，都算作不同域。不同域之间相互请求资源，就算作“跨域”。常见跨域场景如下图所⽰：
特别说明两点：
第⼀：如果是协议和端⼝造成的跨域问题“前台”是⽆能为⼒的。
第⼆：在跨域问题上，仅仅是通过“URL的⾸部”来识别⽽不会根据域名对应的IP地址是否相同来判断。“URL的⾸部”可以理解为“协议, 域名和端⼝必须匹配”。
这⾥你或许有个疑问：请求跨域了，那么请求到底发出去没有？
跨域并不是请求发不出去，请求能发出去，服务端能收到请求并正常返回结果，只是结果被浏览器拦截了。
你可能会疑问明明通过表单的⽅式可以发起跨域请求，为什么 Ajax 就不会?因为归根结底，跨域是为了阻⽌⽤户读取到另⼀个域名下的内容，Ajax 可以获取响应，浏览器认为这不安全，所以拦截了响应。但是表单并不会获取新的内容，所以可以发起跨域请求。同时也说明了跨域并不能完全阻⽌ CSRF，因为请求毕竟是发出去了。
⼆、跨域解决⽅案
1.jsonp
1) JSONP原理
利⽤ <script> 标签没有跨域限制的漏洞，⽹页可以得到从其他来源动态产⽣的 JSON 数据。JSONP请求⼀定需要对⽅的服务器做⽀持才可以。
2) JSONP和AJAX对⽐
JSONP和AJAX相同，都是客户端向服务器端发送请求，从服务器端获取数据的⽅式。但AJAX属于同源策略，JSONP属于⾮同源策略（跨域请求）
3) JSONP优缺点
JSONP优点是简单兼容性好，可⽤于解决主流浏览器的跨域数据访问的问题。缺点是仅⽀持get⽅法具有局限性，不安全可能会遭受XSS攻击。
4) JSONP的实现流程
声明⼀个回调函数，其函数名(如show)当做参数值，要传递给跨域请求数据的服务器，函数形参为要获取⽬标数据(服务器返回的data)。
创建⼀个<script>标签，把那个跨域的API数据接⼝地址，赋值给script的src，还要在这个地址中向服务器传递该函数名（可以通过问号传参:?callback=show）。
服务器接收到请求后，需要进⾏特殊的处理：把传递进来的函数名和它需要给你的数据拼接成⼀个字符串，例如：传递进去的函数名是show，它准备好的数据是show('我不爱你')。
最后服务器把准备的数据通过HTTP协议返回给客户端，客户端再调⽤执⾏之前声明的回调函数（show），对返回的数据进⾏操作。在开发中可能会遇到多个 JSONP 请求的回调函数名是相同的，这时候就需要⾃⼰封装⼀个 JSONP函数。
// index.html
function jsonp({ url, params, callback }){
return new Promise((resolve, reject)=>{
let script = ateElement('script')
window[callback]=function(data){
resolve(data)
veChild(script)
}
params ={...params, callback }// wd=b&callback=show
let arrs =[]
for(let key in params){
arrs.push(`${key}=${params[key]}`)
}
script.src =`${url}?${arrs.join('&')}`
document.body.appendChild(script)
})
}
jsonp({
url:'localhost:3000/say',
params:{ wd:'Iloveyou'},
callback:'show'
}).then(data =>{
console.log(data)
})
// server.js
let express =require('express')
let app =express()
<('/say',function(req, res){
let{ wd, callback }= req.query
console.log(wd)// Iloveyou
console.log(callback)// show
})
app.listen(3000)
5) jQuery的jsonp形式
JSONP都是GET和异步请求的，不存在其他的请求⽅式和同步请求，且jQuery默认就会给JSONP的请求清除缓存。
$.ajax({
url:"crossdomain/jsonServerResponse",
dataType:"jsonp",
type:"get",//可以省略
jsonpCallback:"show",//->⾃定义传递给服务器的函数名，⽽不是使⽤jQuery⾃动⽣成的，可省略
jsonp:"callback",//->把传递函数名的那个形参callback，可省略
success:function(data){
console.log(data);}
});
CORS 需要浏览器和后端同时⽀持。IE 8 和 9 需要通过 XDomainRequest 来实现。
浏览器会⾃动进⾏ CORS 通信，实现 CORS 通信的关键是后端。只要后端实现了 CORS，就实现了跨域。
服务端设置 Access-Control-Allow-Origin 就可以开启 CORS。 该属性表⽰哪些域名可以访问资源，如果设置通配符则表⽰所有⽹站都可以访问资源。
虽然设置 CORS 和前端没什么关系，但是通过这种⽅式解决跨域问题的话，会在发送请求时出现两种情况，分别为简单请求和复杂请求。
1) 简单请求
只要同时满⾜以下两⼤条件，就属于简单请求
条件1：使⽤下列⽅法之⼀：
GET
HEAD
POST
条件2：Content-Type 的值仅限于下列三者之⼀：
text/plain
multipart/form-data
application/x-www-form-urlencoded
请求中的任意 XMLHttpRequestUpload 对象均没有注册任何事件； XMLHttpRequestUpload 对象可以使⽤XMLHttpRequest.upload 属性访问。
2) 复杂请求
不符合以上条件的请求就肯定是复杂请求了。 复杂请求的CORS请求，会在正式通信之前，增加⼀次HTTP查询请求，称为"预检"请求，该请求是 option ⽅法的，通过该请求来知道服务端是否允许跨域请求。
我们⽤PUT向后台请求时，属于复杂请求，后台需做如下配置：
// 允许哪个⽅法访问我
res.setHeader('Access-Control-Allow-Methods','PUT')
// 预检的存活时间
res.setHeader('Access-Control-Max-Age',6)
// OPTIONS请求不做任何处理
hod ==='OPTIONS'){
}
// 定义后台返回的内容
app.put('/getData',function(req, res){
console.log(req.headers)
})
接下来我们看下⼀个完整复杂请求的例⼦，并且介绍下CORS请求相关的字段
// index.html
let xhr =new XMLHttpRequest()
xhr.withCredentials =true// 前端设置是否带cookie
xhr.open('PUT','localhost:4000/getData',true)
xhr.setRequestHeader('name','xiamen')
adyState ===4){
if((xhr.status >=200&& xhr.status <300)|| xhr.status ===304){      console.sponse)
//得到响应头，后台需设置Access-Control-Expose-Headers
console.ResponseHeader('name'))
}
}
}
xhr.send()
//server1.js
let express =require('express');
let app =express();
app.use(express.static(__dirname));
app.listen(3000);
复制代码
//server2.js
let express =require('express')
let app =express()
let whitList =['localhost:3000']//设置⽩名单
app.use(function(req, res, next){
let origin = igin
if(whitList.includes(origin)){
// 设置哪个源可以访问我
res.setHeader('Access-Control-Allow-Origin', origin)
// 允许携带哪个头访问我
res.setHeader('Access-Control-Allow-Headers','name')
// 允许哪个⽅法访问我
res.setHeader('Access-Control-Allow-Methods','PUT')
// 允许携带cookie
res.setHeader('Access-Control-Allow-Credentials',true)
// 预检的存活时间
res.setHeader('Access-Control-Max-Age',6)
/
/ 允许返回的头
res.setHeader('Access-Control-Expose-Headers','name')
hod ==='OPTIONS'){
}
}
next()jquery ajax例子
})
app.put('/getData',function(req, res){
console.log(req.headers)
res.setHeader('name','jw')//返回⼀个响应头，后台需设置
})
<('/getData',function(req, res){
console.log(req.headers)
})
app.use(express.static(__dirname))
app.listen(4000)

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。