什么是跨域，以及如何解决跨域问题？

跨域是相对于同源策略而言的。

同源策略是一种约定，它是浏览器最核心也最基本的安全功能

所谓同源是指: 协议，域名，端口都相同,就是同源, 否则就是跨域

同源策略带来的影响

在同源策略下, 浏览器只允许Ajax请求同源的数据, 不允许请求不同源的数据

但在企业开发中, 一般情况下为了提升网页的性能, 网页和数据都是单独存储在不同服务器上的

这时如果再通过Ajax请求数据就会拿不到跨域数据

跨域解决方案

JSONP实现跨域访问的原理

在同一界面中可以定义多个script标签

同一个界面中多个script标签中的数据可以相互访问

可以通过script的src属性导入其它资源, 通过src属性导入其它资源的本质就是将资源拷贝到script标签中

script的src属性不仅能导入本地资源, 还能导入远程资源

由于script的src属性没有同源限制, 所以可以通过script的src属性来请求跨域数据

服务端返回的数据是函数调用的形式，要传递的数据作为函数参数

客户端用同名函数来接受数据

CORS跨域

cors协议流程

对于简单请求，浏览器会直接发送CORS请求，就是在header中加入Origin请求头字段。

如果Origin指定的源，不在许可范围内，服务器会返回一个正常的 HTTP 回应。浏览器发现，这个响应的头信息没有包含Access-Control-Allow-Origin字段，就知道出错了，从而抛出一个错误。

如果Origin指定的域名在许可范围内，服务器返回的响应会多出Access-Control-Allow-Origin字段，浏览器就会正常的处理响应数据。

对于非简单请求，浏览器会自动先发送一个options（预检）请求。一旦服务器通过了“预检”请求，以后每次浏览器正常的 CORS 请求，就都跟简单请求一样，会有一个Origin头信息字段。服务器返回的响应也会多出Access-Control-Allow-Origin字段，浏览器就会正常的处理响应数据。

//响应头 Response Headers
header('Content-Type: text/html;charset=utf-8');
header('Access-Control-Allow-Origin:http://localhost:8080'); // *代表允许任何网址请求
header('Access-Control-Allow-Methods:POST,GET'); // 允许请求的类型
header('Access-Control-Allow-Credentials: true'); // 设置是否允许发送 cookies
header('Access-Control-Allow-Headers: Content-Type,Origin,Refer'); // 允许自定义请求头的字段

简单请求与非简单请求

只要同时满足以下两大条件，就属于简单请求。

（1）请求方法是以下三种方法之一。

HEAD

GET

POST

（2）HTTP 的头信息不超出以下几种字段。

Accept

Accept-Language

Content-Language

Last-Event-ID

Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

一句话，简单请求就是简单的 HTTP 方法与简单的 HTTP 头信息的结合。

代理服务器

服务器之间传输http请求不受同源策略的限制。

什么是跨域，以及如何解决跨域问题？相关推荐

什么是跨域及怎么解决跨域问题？
什么是跨域? 这篇博文解释的挺清楚,我直接引用什么是跨域?怎么解决跨域问题?_L瑜-CSDN博客_跨域是什么意思跨域,指的是浏览器不能执行其他网站的脚本.它是由浏览器的同源策略造成的,是浏览器施加 ...
什么是同源策略，什么是跨域，如何解决跨域
1.什么是同源策略? 同源策略/SOP(Same origin policy)是一种约定,由 Netscape 公司 1995 年引入浏览器,它是浏览器最核心也最基本的安全功能,现在所有支持 Java ...
什么是跨域及如何解决跨域问题
什么是跨域 web 领域开发中,经常采用前后端分离模式.这种模式下,前端和后端分别是独立的 web 应用程序,例如:后端是 Java 程序,前端是 React 或 Vue 应用. 各自独立的 web ...
vue 解决跨域调试_Electron-vue解决跨域
Electron-vue解决跨域博客说明文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 介绍在前后端分离开发的时候就会遇到跨域的问题 ...
精选文章什么是跨域？怎么解决跨域问题？
一.什么是跨域跨域,指的是浏览器不能执行其他网站的脚本.它是由浏览器的同源策略造成的,是浏览器对JavaScript施加的安全限制. 所谓同源是指,域名,协议,端口均相同,不明白没关系,举个栗子: ...
java redirect 跨域_如何解决跨域重定向携带参数的问题？不使用将参数拼接在重定向url末尾的方式...
如何解决跨域重定向携带参数的问题?不使用将参数拼接在重定向url末尾的方式需求,项目A在服务器A上,需要重定向到服务器B上项目B,并且需要携带参数,参数对用户不可见,所以不可以将参数拼接在重定向ur ...
tp5 php跨域,TP5.1解决跨域
TP5.1解决跨域博客说明文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 介绍在前后端分离开发的时候就会遇到跨域的问题,在本地调试的 ...
只有ajax会跨域吗_ajax解决跨域
http://www.cnblogs.com/sunxucool/p/3433992.html 为什么会出现跨域跨域问题来源于JavaScript的同源策略,即只有协议+主机名+端口号 (如存在) ...
【Vue基础】什么是跨域？如何解决跨域问题？浅浅了解一下什么是登录鉴权
1. 什么是跨域? 在了解什么是跨域之前,我们首先要了解一个概念--同源策略. 同源策略: 同源策略/SOP(Same Origin Policy) 是一种约定,由 Netscape 公司 1995 ...
跨域请求及解决跨域的方法
目录跨域同源策略如何解决跨域 JSONP 跨源资源共享(CORS) HTTP 响应首部字段 Access-Control-Allow-Origin Access-Control-Expose-H ...

什么是跨域，以及如何解决跨域问题？

跨域解决方案

什么是跨域，以及如何解决跨域问题？相关推荐

最新文章

热门文章