本文节选自我的博客:解决跨域问题的 5 种办法
跨域问题一直是前后端交互过程中遇见频率最高的问题,本文带来五种解决跨域问题的办法,总有一种适合你。
什么是跨域?
为什么要有跨域?
跨域请求的过程?
preflight
,请求方法为OPTIONS
表示预检请求。下面来展开聊其中的几个具体实现
在nginx服务器中配置,为响应头添加跨域字段
location ^~ /api/ {
add_header 'Access-Control-Allow-Origin' $http_origin; # 任何域名都支持跨域
add_header 'Access-Control-Allow-Credentials' 'true'; # 允许前端带上cookie
add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
add_header Access-Control-Allow-Headers '*';
if ($request_method = 'OPTIONS') { # 如果是预检请求也要支持跨域
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Origin' $http_orig in;
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
add_header 'Access-Control-Max-Age' 1728000;
add_header 'Content-Type' 'text/plain; charset=utf-8';
add_header 'Content-Length' 0;
return 204;
}
}
JSONP利用了script标签不受浏览器同源策略的影响,可以通过src属性,请求非同源的js脚本。除了script标签,img、link标签也支持跨域。但是img只能跨域图片(其实也可以获取图片二进制再使用JS解析也能拿到数据,但没必要怎么做)、link只能跨域css。
JSONP的4大缺陷:
其实就是本地定义一个函数,用发起请求(发起的JS脚本请求)的方式调用自己
前端HTML的代码
同级目录JS文件夹下的getdata.js
文件
abc({ name: 'ls', age: 30 }) //回调了HTML中的abc函数
前端部分
Document
Node后端部分
const http = require('http')
const url = require('url')
const server = http.createServer()
server.on('request',function(req,res){
// 将api/test?callback=func 解析为 query和pathname urlobj是个对象还有一起其他内容
let urlobj = url.parse(req.url,true)
console.log(urlobj);
if(urlobj.pathname === '/api/test'){
// 返回了一个函数 func({name:'mileschen'})
res.end(`${urlobj.query.callback}(${JSON.stringify({name:'mileschen'})})`)
}else{
res.end('404')
}
})
server.listen(4433,function(){
console.log('server start');
})
jQuery是通过动态创建和移除script标签的方式来发起JSONP请求。在发起SONP请求的时候,动态向
中append一个 标签;在JSONP请求成功以后,动态从
中移除刚才append进去的 标签。
// 发起JSONP的请求
$.ajax({
url:'http://www.baidu.com:81/api/jsonp?name=zs&age=20',
// 代表我们要发起JSONP的数据请求
dataType:'jsonp',
jsonp:'callback', //发送到服务器的参数名称,默认值为callback
jsonpCallback:'abc', //自定义函数名字 不指定会生成一个随机的名字
success:function(res) {
console.log(res)
}
})
CSP的作用:
防XSS等攻击的利器。CSP 的实质就是白名单制度,开发者明确告诉客户端,哪些外部资源可以加载和执行,等同于提供白名单。它的实现和执行全部由浏览器完成,开发者只需提供配置。CSP 大大增强了网页的安全性。攻击者即使发现了漏洞,也没法注入脚本,除非还控制了一台列入了白名单的可信主机。开发者明确告诉客户端(制定比较严格的策略和规则),哪些外部资源是可以加载和执行的 ,即使攻击者发现漏洞,但是它是没办法注入脚本的
两种方式实现CSP:
本文详细阐述了跨域问题的原因和五种解决方案;
并针对几个常用的跨域方案展开介绍
感谢小伙伴们的耐心观看,本文为笔者个人学习记录,如有谬误,还请告知,万分感谢!如果本文对你有所帮助,还请点个关注点个赞~,您的支持是笔者不断更新的动力!