这篇文章记录一下跨域的一些解决方案。
一.概述
1.1 同源策略
同源策略是浏览器的安全机制，防止xss，csrf攻击。
同源策略指协议 域名 端口都相同的地址，有一个不相同都是不同源。
当浏览器抛出跨域异常的时候，请求已经发生出去了，并且浏览器收到响应信息，只是浏览器把响应的数据拦截了。
1.2 受限制的内容
XMLHttpRequest,DOM,BOM
cookie,localStorage
1.3 不受影响的标签
script img link iframe
二.跨域方案
1.1 jsonp
利用script标签不受同源策略的影响，动态创建script标签
1.1.1 流程
＊ 提前申明一个回调函数
＊ 动态创建script标签，通过url传递参数
＊ 服务器解析参数，处理数据，返回带有响应数据的回调方法
＊ 客户端触发回调函数
1.1.2 demo
客户端
**
* @params url 请求地址
* @params params 请求参数
* @params callback 回调函数
**
function jsonp({url,params,callback}){
return new Promise((res,rej)=>{
// 动态创建script标签
let script = document.createElement("script");
// 提前申明回调函数
window[callback] = function(data){
res(data)
document.body.removeChild(script);
}
// 处理参数
let arr = []
let str = ''
params = {...params,callback}
for(let key in params){
arr.push(key + "=" + params[key])
}
str = arr.join("&")
script.src = url + "?" + str
document.body.appendChild(script);
})
}
jsonp({
url:"http:localhost:3001/buy",
params:{
name:"banana",
value:250
},
callback:"Buy"
})
服务端
let express = require('express')
let app = express()
app.get('/Buy', function(req, res) {
let { name,value, callback } = req.query
console.log(callback) // buy
res.end(`${callback}('冇香蕉了')`)
})
app.listen(3001)
1.2 node中间件
中间件做代理服务器的作用，利用服务器之间没有跨域限制
- 客户端发送请求
- 代理服务器接受客户端请求
- 代理服务器发送请求到目标服务器
- 目标服务器接受请求并响应请求给代理服务器
- 代理服务器接受请求
- 代理服务器响应数据给客户端
1.3 CORS
CORS：CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。
服务端设置 Access-Control-Allow-Origin 就可以开启 CORS。 该属性表示哪些域名可以访问资源，如果设置通配符则表示所有网站都可以访问资源。
cors的设置关键在于后端
1.4 nginx代理
nginx代理是搭建一个中转服务器，跟node中间件类似
server {
listen 8080;
server_name www.banana.com;
location / {
proxy_pass www.true.banana.com; #反向代理
index index.html index.htm;
add_header Access-Control-Allow-Origin *
}
}
