当前位置: 首页 > news >正文

Access-Control-Allow-Origin与跨域

今天与萌萌一起修bug,遇到一个跨域的问题。我们两个都对它有一些不太清楚,一起搞清楚后记录下来。

问题

在某域名下使用Ajax向另一个域名下的页面请求数据,会遇到跨域问题。另一个域名必须在response中添加 Access-Control-Allow-Origin 的header,才能让前者成功拿到数据。

这句话对吗?如果对,那么流程是什么样的?

跨域

怎样才能算跨域?协议,域名,端口都必须相同,才算在同一个域。

参考:

  • Are different ports on the same server considered cross-domain? (Ajax-wise)
  • 同事李栋的博客:跨源资源共享

当跨域访问时,浏览器会发请求吗

这是真正困扰我们的问题,因为我们不清楚浏览器会怎么做。它会不会检查到你要请求的地址不是同一个域的,直接就禁止了呢?

我在jsbin上 做了一个试验 ,使用Chrome打开。当点击“Run with Js”时,控制台上会打出:

XMLHttpRequest cannot load http://google.com/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://run.jsbin.io' is therefore not allowed access. 

但开发者工具的”Network”栏并没有任何记录。它到底发请求了没?

我又使用 python -m SimpleHTTPServer 在本地创建了一个小服务器,然后把地址改成它,结果发现在python这边的确打印出请求来了,可见浏览器的确发出了请求。

Access-Control-Allow-Origin

现在该 Access-Control-Allow-Origin 出场了。只有当目标页面的response中,包含了 Access-Control-Allow-Origin 这个header,并且它的值里有我们自己的域名时,浏览器才允许我们拿到它页面的数据进行下一步处理。如:

Access-Control-Allow-Origin: http://run.jsbin.io

如果它的值设为 * ,则表示谁都可以用:

Access-Control-Allow-Origin: *

没错,在产品环境中,没人会用 *

你可以阅读下面这篇文章了解更多,并可找到其中的”Run Sample”链接,实际体验一下:

http://www.html5rocks.com/en/tutorials/cors/

转载于:https://www.cnblogs.com/kenshinobiy/p/6265135.html

相关文章:

  • linux下alsa架构音频驱动播放wav格式文件
  • [转].NET Core配置文件加载与DI注入配置数据
  • Makefile注意点总结
  • 深入浅出Puppet(一)
  • Mirco F-measure and Macro F-measure
  • mac上使用zsh配置环境变量
  • find用法积累
  • c# 静态变量【学习笔记】
  • linux内核栈与用户栈【转】
  • NodeJS Stream 二:什么是 Stream
  • 枚举转中文,通过反射方法与描述的方式获取
  • log file sync 等待超高一例子
  • Unity 5 Stats窗口
  • svn 安装网站
  • 浅析vue数据绑定
  • 【知识碎片】第三方登录弹窗效果
  • ES2017异步函数现已正式可用
  • es6--symbol
  • Golang-长连接-状态推送
  • golang中接口赋值与方法集
  • HTML-表单
  • JavaScript DOM 10 - 滚动
  • JavaScript标准库系列——Math对象和Date对象(二)
  • js 实现textarea输入字数提示
  • leetcode98. Validate Binary Search Tree
  • MD5加密原理解析及OC版原理实现
  • MySQL常见的两种存储引擎:MyISAM与InnoDB的爱恨情仇
  • Promise初体验
  • 第三十一到第三十三天:我是精明的小卖家(一)
  • 人脸识别最新开发经验demo
  • 突破自己的技术思维
  • 小程序开发之路(一)
  • puppet连载22:define用法
  • (14)Hive调优——合并小文件
  • (1综述)从零开始的嵌入式图像图像处理(PI+QT+OpenCV)实战演练
  • (2009.11版)《网络管理员考试 考前冲刺预测卷及考点解析》复习重点
  • (23)Linux的软硬连接
  • (WSI分类)WSI分类文献小综述 2024
  • (超简单)使用vuepress搭建自己的博客并部署到github pages上
  • (二)【Jmeter】专栏实战项目靶场drupal部署
  • (附源码)spring boot校园拼车微信小程序 毕业设计 091617
  • (附源码)计算机毕业设计ssm-Java网名推荐系统
  • (欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明
  • (使用vite搭建vue3项目(vite + vue3 + vue router + pinia + element plus))
  • (转)菜鸟学数据库(三)——存储过程
  • ./configure,make,make install的作用
  • .NET MVC之AOP
  • .NET/C# 的字符串暂存池
  • .NET:自动将请求参数绑定到ASPX、ASHX和MVC(菜鸟必看)
  • .NET国产化改造探索(一)、VMware安装银河麒麟
  • .NET企业级应用架构设计系列之技术选型
  • @RequestParam,@RequestBody和@PathVariable 区别
  • @Responsebody与@RequestBody
  • [ web基础篇 ] Burp Suite 爆破 Basic 认证密码
  • [android] 练习PopupWindow实现对话框