• 跨域详解


    跨域的概念

    从一个站点访问一个资源,然后在这个资源当中又去访问另外的一个站点的资源,这个就是跨域。

    同源

    同源策略是浏览器的一种安全策略,所谓同源是指,域名,协议,端口完全相同。

    不同源则跨域

    例如http://www.baidu.com/

    AJAX的XMLHttpRequest对象 发送跨域请求,

    解决方法

    1、JSONP 跨域

    其本质是利用了<script src=""></script>标签具有可跨域的特性,由服务端返回一个预先定义好的Javascript函数的调用,并且将服务器数据以该函数参数的形式传递过来,此方法需要前后端配合完成。

    jQuery 的$.ajax() 方法当中集成了JSONP的实现,可以非常方便的实现跨域数据的访问。

     ***jsonp 的跨域,它只支持get 方式的请求,因为它是使用script 标签去发送请求,而且服务端需要做处理,客户端也需要做处理。如果跨域的时候传递的数据非常多,jsonp 的方式就不太可取。

    2· CORS 跨域(跨域资源共享)

    1 通过服务端响应头的方式
    2 通过想客户端输出一个响应头
    3 header("Access-Control-Allow-Origin:*");

     

    这种方式是服务器直接可一个给定一个响应头Access-Control-Allow-Origin,告诉客户端浏览器,这些数据可以获取。这个Access-Control-Allow-Origin也是属于http 协议规定的.

    jsonp 与 cors 的区别

    jsonp 是最早期的这种跨域解决方案,因为是使用script 标签发送请求,所以兼容性会比较好,只支持get 方式.

    cors (目前用的多)是后期的一种解决方案. 它只需要改服务器的配置,客户端不需要做任何的处理。兼容性稍微差一些,因为Access-Control-Allow-Origin 是后期http 协议规定的,POST/GET都支持。

    其它方式: 通过后台服务器转发,通过设置代理服务器。

    通过webpack自带代理(proxy)解决跨域

    在package.json最后面  添加一段

    "proxy": "http://168.110.5.55:10001" //后端地址

    即可启用webpack的自带代理

     将localhost转化为代理地址 骗过浏览器,以此来解决跨域问题。

  • 相关阅读:
    mysql查询字段取前3位,后3位,中间3位,去除前3位,去除后3位
    10月份四季度
    JavaScript箭头函数的立即执行函数实现三元表达式执行多条语句
    JavaScript判断是否是同一天
    项目经理:是兄弟就一起加班吧
    技术人员转型项目经理的角色转换
    项目经理入职后,如何快速管理项目
    如何解决项目成员之间的冲突?
    提高各方面沟通效率,是项目经理该去做的事
    项目计划太复杂?试试思维导图
  • 原文地址:https://www.cnblogs.com/it-Ren/p/10670719.html
Copyright © 2020-2023  润新知