跨域之CORS
来源:互联网 发布:电脑淘宝怎么清理缓存 编辑:程序博客网 时间:2024/06/08 14:48
前言
本文会涉及到上一篇文章《跨域之jsonp》中的相关示例流程,先阅读再来食用本文更加美味~
什么是CORS
CORS是一个W3C标准,全称是”跨域资源共享”(Cross-origin resource sharing)。它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。
在jsonp中,我们使用了script标签的src属性不受同源策略影响的特性来跨域,但是这样的方式让人觉得不怎么优雅,而且没法愉快地使用ajax,为了愉快地解决这个问题,于是就有了CORS。
相对于jsonp,CORS跨域主要在于对服务器端的处理,只要服务端实现了CROS接口,我们就可以优雅地使用ajax进行跨域了,甚至在客户端书写代码时我们都不会对此有感知。
在上一篇代码示例的基础上,我们对demo中的服务端代码进行改造:
// server.jsconst url = require('url');const http = require('http')http.createServer((req, res) => { const data = { message: 'CORS跨域成功' }; res.writeHead(200, { 'Access-Control-Allow-Origin': 'http://192.168.141.1:8081' }); res.end(data.message);}).listen(3000);console.log('服务已启动');
从以上代码中可以看出,我们主要在response的响应头上添加了一个字段“Access-Control-Allow-Origin”,其主要对应浏览器请求中的orgin字段,如果这两个字段值不一致,服务器就会拒绝这一次请求,抛出一个错误(这个错误无法通过状态码识别,因为返回状态码可能是200)
然后我们在客户端中书写正常的ajax请求:
// index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>index.html</title></head><body> <script> const xhr = new XMLHttpRequest(); xhr.open('GET', 'http://127.0.0.1:3000', true); xhr.onreadystatechange = function() { if(xhr.readyState === 4 && xhr.status === 200) { alert(xhr.responseText); } } xhr.send(null); </script></body></html>
可以看出,只是一次正常的请求,这算是CORS跨域的一个好处吧,不用书写像jsonp那样的不优雅的hack代码。
我们在浏览器中打开客户端服务地址获取目标服务器数据,然后查看结果:
跨域成功。
优点
- 客户端不需要额外的冗余代码,优雅简单
- 支持 POST 请求方式
缺点
因为需要浏览器的额外支持,所以对浏览器版本有要求,存在兼容问题,仅支持 IE 10 以上
阅读全文
0 0
- 跨域之CORS
- 跨域请求之CORS
- 前端跨域之CORS
- javascript 之 跨域技术 CORS
- 前端跨域问题之----CORS详解
- 关于Ajax跨域问题之CORS
- 跨域请求解决方案之--CORS
- 什么是跨域,Cors协议,spring cors
- 跨域资源共享(CORS)
- cors 跨域详解
- 跨域资源共享CORS
- CORS 跨域资源共享
- 跨域资源共享 CORS
- 跨域资源共享cors
- CORS 跨域访问
- CORS跨域原理
- CORS跨域资源共享
- 跨域资源共享 CORS
- DATA MINING(1) Data mining introduction
- 算法作业HW21:LeetCode 18 4Sum
- Aapt Overlay 资源重叠机制
- POJ1679
- Web系统大规模并发——电商秒杀与抢购 (6)
- 跨域之CORS
- 《大话数据结构》知识点总结
- BZOJ 1293 生日礼物 (链表)
- HDU 6023 Automatic Judge(水题)
- AbstractProcessor注解处理器
- linux环境变量
- 多线程读取图片
- 2016下
- Hibernate学习笔记(三)