前端跨域的场景及解决方法

跨域的场景：

1.域名不同（www.yangwei.com 和www.wuyu.com 即为不同的域名）

2.二级域名相同，子域名不同（www.wuhan.yangwei.com www.shenzheng.yangwei.com 为子域不同）

3.端口不同，协议不同（ http://www.yangwei.com 和https://www.yangwei.com属于跨域www.yangwei.con:8888和www.yangwei.con:8080)

跨域的解决方式:

jsonp:

利用script标签，请求任意跨域地址的资源，
返回资源只要content-type为application/javascript，并且返回回来的数据为调用一个js
function，数据则包裹在方法内部，这个js
function需要在本地的代码中提前准备好，一但准备的游离script标签src被附上值并且插入到dom
tree当中之后，浏览器就会对这个src进行请求，拉回来的代码直接执行，跨域成功！

但是script标签会有一个限制，就是它只支持get方法，如果用户的请求会带有一些隐私数据的话，需要改用post方式，不是没有办法，html中有form
tag可以支持post提交，只需要新建一个form tag，
内部包含几个input输入框，输入框name就是想提交的数据的key，form的action就为提交的地址，为防止提交动作后跳转到action地址去，需要利用target属性指向一个空的iframe就不会跳转了，最后吧form的method属性设置为post，最后添加一个input
type为submit，调用form dom的submit方法，就可以提交数据了

cors跨域(cross origin resource share):

依赖于XMLHttpRequest对象分两种情况：简单请求请求方式只限于：GET，POST，HEAD
请求头只包含以下几种：content-language, content-type, accept, accept-language,
(width, DPR, DOWNLINK, save-data, viewport-width),
其中content-type限制为text/plain，multipart/form-data，application/x-www-form-urlencoded，就是form表单的enctype支持的三种编码方式，表现上来说第一种是空格变成+，第二种是完全不处理，后台方便对数据进行流对象来操作数据，第三种是对所有的字符串都进行编码，是默认值
当然请求头还会加上Origin参数表示请求来源

浏览器判断是否跨域会根据返回头中的access-control-allow-origin进行判断, 没有的这个返回头浏览器就会判断为跨域,
对返回数据进行屏蔽, 表现就是状态为fail, 看不到响应头

复杂请求会先发送一个预检请求, 请求头包括access-control-request-method,
access-control-request-headers, 第一个是为了验证请求方法是否被服务器支持,
第二个是为了验证请求的请求头是否被支持,这里只加入非简单请求范围内的请求头

返回响应头会包括: access-control-allow-origin, access-control-allow-methods,
access-control-allow-headers, access-control-max-age, 四种

然后再进行真正的请求, 请求端请求依旧会带上access-control-request-method,
access-control-request-headers, 但是返回头就只包括的access-control-allow-origin

如果要携带cookie, 那么需要在请求头上带上cookie请求头, 把cookie带在这个请求头上,
然后服务器返回access-control-allow-credential, 外加set-cookie字段, 这种请求要求
access-control-allow-origin不能为*

客户端只能拿到一些基本的响应头,
包括Cache-Control(控制缓存)、Content-Language(控制语言)、Content-Type(控制文本类型)、Expires(控制缓存,
优先级低于cache-control)、Last-Modified(控制协商缓存)、Pragma(也是控制缓存),
其他的头要想拿到都需要响应头指定access-control-expose-headers

nginx跨域转发

这个比较容易, 只需要在该域名的服务器下面配一个nginx代理, 在其对应的url的location下面加一个proxy_pass即可,
不受跨域限制

iframe跨域

设置document.domain, 文档流跨域; 利用postMessage跨域,
子窗口向父窗口postMessage或者父窗口向子窗口postMessage即可

前端跨域的场景及解决方法相关推荐

跨域问题及常见解决方法---以 Geoserver 为例
跨域问题及常见解决方法---以 Geoserver 为例跨域问题跨域简介解决跨域常用方法前端代理后端处理其他代理(nginx) Geoserver 解决跨域免费解决跨域工具:[geose ...
浏览器禁止跨域请求json数据解决方法--jsonp
浏览器禁止跨域请求json数据解决方法--jsonp 参考文章: (1)浏览器禁止跨域请求json数据解决方法--jsonp (2)https://www.cnblogs.com/uyisi/p/56 ...
PHP解决http和https跨域,php中http与https跨域共享session的解决方法
这篇文章主要介绍了http与https跨域共享session的解决方法,需要的朋友可以参考下遇到了HTTP.HTTPS协议下session共享解决cookie失效的问题,这里提供一个临时解决办法. ...
kuayu react_React+Spring实现跨域问题的完美解决方法
最近小编在学习react,在学习过程中遇到React+Spring实现跨域问题,下面小编记录了整个问题过程,给大家做个参考. react 跨域访问后台,默认是有跨域问题,并且火弧和谷歌浏览器,对跨域问 ...
造成跨域的原因和解决方法
造成跨域的原因和解决方法参考文章: (1)造成跨域的原因和解决方法 (2)https://www.cnblogs.com/wangpenghui522/p/6284355.html 备忘一下.
前端跨域的理解和解决跨域的方案详解（全）
作为前端开发,我们遇到最多的应该就是跨域问题,对于萌新来说,跨域就是一道墙,不知所措,其实只要理解了跨域的含义和原理,解决它是不难的,今天给大家介绍下什么是跨域和跨域的解决方案! 什么是跨域? 跨域是 ...
PHP的介绍及应用,ajax的介绍及应用，跨域问题及jsonp解决方法
PHP(服务器编程语言) 服务器由环境(Apache),数据库(mysql),代码(HTML+css +js,php)组成. PHP必须在服务器的环境下执行 php与js最大的区别就是工作环境,PHP ...
[Vue.js]跨域访问四种解决方法
2019独角兽企业重金招聘Python工程师标准>>> 报错: has been blocked by CORS policy: Response to preflight requ ...
跨域的知识和解决方法
1.https://segmentfault.com/a/1190000000709909 2.https://blog.csdn.net/qq_38128179/article/details/84 ...

前端跨域的场景及解决方法

跨域的场景：

跨域的解决方式:

前端跨域的场景及解决方法相关推荐

最新文章

热门文章