• 前端跨域请求的方法


    引言:由于浏览器的安全性能问题,导致ajax非同源请求无法访问,但是有些时候我们必须要用到这一功能,所以整理出四种层面不同思想来解决这个问题

    一、Javascript

    在javaCript层面,有一种耳熟能详的手段来解决跨域问题,那就是jsonp,原理是在客户端注册一个callback函数,然后把callback的名字传给服务器,此时,服务器先生成 json 数据。
    然后以 javascript 语法的方式,生成一个function , function 名字就是传递上来的参数 jsonp.
    最后将 json 数据直接以入参的方式,放置到 function 中,这样就生成了一段 js 语法的文档,返回给客户端。
    客户端浏览器,解析script标签,并执行返回的 javascript 文档,此时数据作为参数,传入到了客户端预先定义好的 callback 函数里.(动态执行回调函数)

    二、Php

    在html直接请求同源地址的接口文件,如api.php,然后在api.php中利用curl扩展去请求需要请求的页面获取相关数据,然后返回给前端页面,这种方式相当与代理,利用本地同源的页面去请求非同源页面

    三、HTML5

    HTML5之前的标准是没有办法进行跨域的,但是但HTML5中新增加的特性可以实现这一功能,通过设置Access-Control-Allow-Origin头可以在页面中允许特定页面或者所有页面的请求,在php中可以使用header函数设置

    header('Access-Control-Allow-Origin:*'); 

    四、Nginx

    Nginx服务器层面的解决方法和php中类似,也是代理模式,前端页面请求同源地址,然后用nginx重写规则将此请求代理到需要请求的非同源页面,达到一种欺骗浏览器的效果。

    尾语:部分浏览器经过设置以后也可以解决跨域问题,但是作为程序员,我们不能把希望寄托在用户的身上,所以还是从上述解决方案中挑选为佳

  • 相关阅读:
    非vue-cli的花括号闪现问题
    vue中实现图片全屏缩放预览,支持移动端
    vue 图片预览插件
    angular.uppercase()
    angular.toJson()
    angular.module()
    对AngularJs的简单了解
    jQuery的属性、遍历和HTML操作
    JQuery函数
    JQuery的选择器
  • 原文地址:https://www.cnblogs.com/crisenchou/p/5614351.html
Copyright © 2020-2023  润新知