同源策略：
它是浏览器 最核心也最基本的安全功能，——不同的客户端脚本在没有明确授权的情况下，不能读写对方资源
跨域： 只要协议，域名，端口有任何一个不同，的都被当做不同的域
解决跨域问题 ：
参考网址：https://www.cnblogs.com/yoissee/p/5901677.html
方法一：
JSONP 是 JSON 的一种使用模式，可以解决主流浏览器的跨域数据访问问题。其原理是根据 XmlHttpRequest 对象受到同源策略的影响，而 <script> 标签元素却不受同源策略影响，可以加载跨域服务器上的脚本，网页可以从其他来源动态产生 JSON 资料。用 JSONP 获取的不是 JSON 数据，而是可以直接运行的 JavaScript 语句。
jsonp
1. 只能使用 GET 方法发起请求，这是由于 script 标签自身的限制决定的。
2.不能很好的发现错误，并进行处理。与 Ajax 对比，由于不是通过 XmlHttpRequest 进行传输，所以不能注册 success、 error 等事件监听函数。
CORS：
Cross-Origin Resource Sharing（CORS）跨域资源共享是一份浏览器技术的规范，提供了 Web 服务从不同域传来沙盒脚本的方法，以避开浏览器的同源策略，是 JSONP 模式的现代版。与 JSONP 不同，CORS 除了 GET 要求方法以外也支持其他的 HTTP 要求。用 CORS 可以让网页设计师用一般的 XMLHttpRequest，这种方式的错误处理比 JSONP 要来的好。另一方面，JSONP 可以在不支持 CORS 的老旧浏览器上运作。现代的浏览器都支持 CORS。
CORS 的实现
app.post('/cors', function(req, res) {
res.header("Access-Control-Allow-Origin", "*"); //设置请求来源不受限制
res.header("Access-Control-Allow-Headers", "X-Requested-With");
res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS"); //请求方式
res.header("X-Powered-By", ' 3.2.1')
res.header("Content-Type", "application/json;charset=utf-8");
var data = {
name: req.body.name + ' - server 3001 cors process',
id: req.body.id + ' - server 3001 cors process'
}
console.log(data)
res.send(data)
res.end()
})
CORS 与 JSONP 的对比
CORS 除了 GET 方法外，也支持其它的 HTTP 请求方法如 POST、 PUT 等。
CORS 可以使用 XmlHttpRequest 进行传输，所以它的错误处理方式比 JSONP 好。
JSONP 可以在不支持 CORS 的老旧浏览器上运作。
网友评论