接口所在的网站和我的网站不是一个站点,浏览器只允许请求当前域的资源,而对其他域的资源表示不信任

怎么才算跨域呢?

  1. 请求协议http,https的不同
  2. domain的不同
  3. 端口port的不同

三者任一不同,都是跨域

解决方式:
4. 修改响应头
5. jsonp

修改响应头方式:

在此之前,需要知道简单请求、复杂请求
简单请求:
1): 请求方式只能是:head,get,post
2): 请求头允许的字段:Accept,Accept-Language,Content-Language,Last-Event-ID
Content-Type:application/x-www-form-urlencoded、multipart/form-data、text/plain 三选一
2.复杂请求:剩下的请求方式

简单请求:

浏览器:诶,你这个请求要跨域是吧,我得问问服务器大哥肯不肯!往请求头添加origin亮一下牌面,请求头origin字段的值为当前域


服务器:诶,你是谁,我来看看你的origin,嗯嗯,可以,符合我的要求,放行!

Access-Control-Allow-Origin,标识允许哪个域的跨域请求,如果服务器不通过,响应头里就没有这个字段,接着触发XHR的onerror,再接着你就看到浏览器的提示xxx的服务器没有响应Access-Control-Allow-Origin字段

//指定允许其他域名访问
'Access-Control-Allow-Origin:http://172.20.0.206'//一般用法(*,指定域,动态设置),3是因为*不允许携带认证头和cookies
//是否允许后续请求携带认证信息(cookies),该值只能是true,否则不返回
'Access-Control-Allow-Credentials:true'

上面第一行说到的Access-Control-Allow-Origin有多种设置方法:

设置是最简单粗暴的,但是服务器出于安全考虑,肯定不会这么干,而且,如果是的话,游览器将不会发送cookies,即使你的XHR设置了withCredentials
指定域,如上图中的http://172.20.0.206,一般的系统中间都有一个nginx,所以推荐这种
动态设置为请求域,多人协作时,多个前端对接一个后台,这样很方便
withCredentials:表示XHR是否接收cookies和发送cookies,也就是说如果该值是false,响应头的Set-Cookie,浏览器也不会理,并且即使有目标站点的cookies,浏览器也不会发送。

复杂请求:

最常见的情况,当我们使用put和delete请求时,浏览器会先发送option(预检)请求,不过有时候,你会发现并没有,这是后面我们会讲到缓存。

预检请求
与简单请求不同的是,option请求多了2个字段:
Access-Control-Request-Method:该次请求的请求方式
Access-Control-Request-Headers:该次请求的自定义请求头字段

服务器检查通过后,做出响应:

//指定允许其他域名访问
'Access-Control-Allow-Origin:http://172.20.0.206'//一般用法(*,指定域,动态设置),3是因为*不允许携带认证头和cookies
//是否允许后续请求携带认证信息(cookies),该值只能是true,否则不返回
'Access-Control-Allow-Credentials:true'
//预检结果缓存时间,也就是上面说到的缓存啦
'Access-Control-Max-Age: 1800'
//允许的请求类型
'Access-Control-Allow-Methods:GET,POST,PUT,POST'
//允许的请求头字段
'Access-Control-Allow-Headers:x-requested-with,content-type'

这里有个注意点:Access-Control-Request-Method,Access-Control-Request-Headers返回的是满足服务器要求的所有请求方式,请求头,不限于该次请求

我的项目中就是这样的写法,这样对不管是简单请求还是复杂请求都行

我用修改响应头的方式双端都配置了跨域但是不行

为什么用后端的方式可以解决?
跨域这个情况只会出现在浏览器页面里,因为实际上是浏览器由于安全原因限制了这些请求的访问

跨域问题和origin相关推荐

  1. 浏览器同源策略以及跨域请求时可能遇到的问题

    跨域请求基础知识 浏览器的同源策略 浏览器的源指的是 协议://域名:端口 这样的URL组合.我们首先要明确几点 www.foo.com 和 foo.com 是不同域 www.foo.com 和 ww ...

  2. ajax可以在localhost上用吗_你还不知道跨域问题是怎样造成的吗?

    跨域问题的由来 相信很多人都或多或少了解过跨域问题,尤其在现如今前后端分离大行其道的时候. 你在本地开发一个前端项目,这个项目是通过 node 运行的,端口是9528,而服务端是通过 spring b ...

  3. 面试--跨域--cors

    cors是什么 cors 跨域资源共享 Cross-origin resource sharing是一种跨域的解决方案 它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJA ...

  4. 跨域问题是怎样造成的

    跨域问题的由来 相信很多人都或多或少了解过跨域问题,尤其在现如今前后端分离大行其道的时候. 你在本地开发一个前端项目,这个项目是通过 node 运行的,端口是9528,而服务端是通过 spring b ...

  5. 前端跨域问题(CORS)

    主要是总结浏览器CORS跨域,其他的本人认为是伪跨域,如iframe.window.name.window.postMessage. 跨域定义 跨站 HTTP 请求(Cross-site HTTP r ...

  6. 网络-HTTP请求跨域访问控制

    本文根据MDN整理 我不说什么是跨域,网上很多,但是要说一下,跨域访问控制这个概念,是浏览器的行为,不是服务器的行为(虽然不少工作都是后端的工程师去配置),产生跨域访问控制的原因有两个: 1.前端发出 ...

  7. JAVA解决OPTIONS请求问题:跨域时ajax发送两次请求,其中options预请求参数为null及其解决方案

    转载请注明出处 原文链接:https://blog.csdn.net/qq_39309348/article/details/103267908 在正式跨域的请求前,浏览器会根据需要,发起一个&quo ...

  8. 跨域CrossOrigin

    CORS(跨域资源共享,Cross-Origin Resource Sharing) CORS其实出现时间不短了,它在维基百科上的定义是:跨域资源共享(CORS )是一种网络浏览器的技术规范,它为We ...

  9. Spring Boot:如何解决跨域问题 ?

    目录 跨域问题现象 跨域问题分析 什么是源和跨域 什么是同源策略? Spring Boot:跨域问题解决 1. 创建一个filter解决跨域 2. 基于WebMvcConfigurerAdapter配 ...

最新文章

  1. linux查找以h结尾的文件,【linux_笔记】Linux_文件查找(find)详解特殊权限
  2. OVS datapath之action分析(十九)
  3. php模板技术smarty,PHP模板技术Smarty
  4. AutoHotkey热键脚本语言文件
  5. HDU 2841 Visible Trees
  6. [机器学习笔记]Note5--归一化
  7. sqlite查询空日期类型_SQLite比较日期
  8. android 测试人员测试时使用release版本还是debug版本_为什么做软件测试
  9. python语言结构化语言_如何在python中处理结构化语言文件
  10. numpy 常用api(四)
  11. 密码字典生成工具:crunch
  12. oracle ebs教学视频教程,Oracle EBS教学视频
  13. 使用Eclipse Babel语言包汉化eclipse
  14. Python自动化办公:xlwt万字教程
  15. Oracle特殊语句
  16. 结构、流体、热分析、多物理场耦合、电磁仿真硬件配置推荐2018
  17. Spring定时器之翘楚-Quartz
  18. _ 10. 控制器和存储器一起组成了计算机核心——中央处理器,安徽2014年会计从业资格考试试题:会计电算化(第一套)...
  19. 公瑾财务成“互联网+财税”领跑者
  20. 紫光云:2019年云综合收入11.5亿元,后起之秀

热门文章

  1. 90后魔术师李孟孟受邀参加中国圈子联合会活动
  2. 乡村小微企业创新发展计划启动 广东清远成为首个先行区
  3. Mysql数据库连接池之C3p0的使用
  4. 新编大学英语5翻译整理
  5. 阿里云云计算的类型和特点
  6. 迁移学习---迁移学习领域各位大佬的ppt,视频下载(百度云链接)
  7. 强大的 Vim 主题配色方案 下载安装方法
  8. 一个简单的留言微信小程序
  9. 《数据结构-李云清版》笔记 - 概论
  10. 使用idm的一些注意事项