码迷,mamicode.com
首页 > 其他好文 > 详细

跨域解决方案

时间:2019-12-02 11:48:52      阅读:86      评论:0      收藏:0      [点我收藏+]

标签:www   代理   col   font   情况   主机   开发   src   contain   

 

跨域:

    1. 跨域的条件:同源策略(协议 域名 端口 三者)三者任一不同就为跨域

    2. 跨域的解决方案

      1. jsonp (json padding) (callback({a: 1, b: 2})) 前端定义好这个函数的业务逻辑,利用script标签可以引入任意外部的资源

      2. cors(跨站资源共享)

        1. 在使用时前端正常发起异步请求,后端需要设置允许的请求头 请求方法 请求域名

          1. access-control-allow-origin: 设置请求域名/主机

          2. access-control-allow-headers: 设置请求头

          3. access-control-allow-methods: 设置请求方法

        2. 什么是预检请求 options类型,什么情况下发起预检请求

          1. 简单请求不需要发起预检,直接传输数据到后台

            1. 请求方法:get post head

            2. 请求头:accept accept-lunguage content-type content-length last-eventID

            3. 发送请求的数据格式:text/plain application/x-www-form-urlencoded multipart/form-data

          2. 非简单请求需要先进行预检,如果后台支持的话再携带数据发起请求到后台

      3. 反向代理(客户端 => 网页服务器(nginx) => node.js / PHP / java / python)

        1. 如果代理服务器代理的是后台的处理程序,那就是反向代理。当前页面www.a.com,想请求一个接口www.b.com/api/test,此时网页正常发起请求www.a.com/api/test到达网页服务器nginx,nginx此时收到请求,重置请求域名到www.b.com下的接口地址上,当真正的接口数据返回后,nginx再把数据返回给前端(前端 => 开发服务器8080 => 8888)

      4. iframe + window.name / window.hash

        1. 比如当前页面1www.a.com/abc,请求的接口地址www.b.com/api/test。在页面1下内嵌一个iframe,iframe的src属性赋值www.b.com/abc页面2,在页面2中发起异步请求,拿到数据后写在window.name或者window.hash,重置iframe的src属性(更改页面地址),更改到a域名下的一个页面 3,页面3和页面2是同一个窗口,所以页面3能够取到页面2写在window.name或者window.hash的数据

      5. onMessage和postMessage: IE6 7不支持,ie8支持部分内容

      6. document.domain: 仅适用主域相同跨子域的情况. 页面位于www.a.com下,请求的接口位于api.a.com

 

跨域解决方案

标签:www   代理   col   font   情况   主机   开发   src   contain   

原文地址:https://www.cnblogs.com/mdr86553/p/11969529.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!