快捷搜索:  汽车  科技

ajax跨域详细介绍(ajax跨域完全讲解)

ajax跨域详细介绍(ajax跨域完全讲解)创建的script.PNG跨域代理产生跨域原因针对浏览器,修改浏览器安全配置,不过这需要修改每个浏览器,不实际把XHR 请求转为jsonp请求,不过jsonp请求已经越来越不满足当前需求了

内容导读

jsonp 不是标准,只是一种约定的协议,使用需要前后端协商一致。jsonp通过动态创建script 然后发送出去(然后自动销毁,如果需要查看创建的script 需要打断点)。普通的ajax请求,请求格式是Type=xhr 返回的格式是json 用jsonp请求,请求格式是Type=script 返回的格式是javascript 返回的值作为javascript函数的参数返回。非简单请求会先发一个预检命令到服务端(OPTIONS) 服务端允许了才发送POST请求,所以是先判断再执行。在nginx中: 把所有请求转发到8080端口。把要调用的服务器地址用8081端口代理。

产生跨域原因

  • 浏览器限制

  • 跨域(协议、主机名、端口号等不同就属于跨域)

  • XHR(XMLHttpRequest)请求(如果是json请求就不会)

    ajax跨域详细介绍(ajax跨域完全讲解)(1)

    产生跨域原因

解决思路

  • 针对浏览器,修改浏览器安全配置,不过这需要修改每个浏览器,不实际

  • 把XHR 请求转为jsonp请求,不过jsonp请求已经越来越不满足当前需求了

  • 跨域代理

    ajax跨域详细介绍(ajax跨域完全讲解)(2)

    创建的script.PNG

    普通请求和jsonp请求区别:

    ajax跨域详细介绍(ajax跨域完全讲解)(3)

    捕获.PNG

    解释:

    • 普通的ajax请求,请求格式是Type=xhr 返回的格式是json

    • 用jsonp请求,请求格式是Type=script 返回的格式是javascript 返回的值作为javascript函数的参数返回。

    jsonp弊端

    • 服务器需要改动代码支持

    • 只支持get请求

    • 发送的不是XHR请求(XHR支持异步等)

    被调用方解决-支持跨域

    在相应头增加字段:可以在
    1.服务器
    2.nginx
    3.apache
    这三者之一增加

    Filter解决方法

    • 浏览器是先执行再判断

    • 跨域请求返回值多了origin字段

    解决方法:
    在服务端:

    ajax跨域详细介绍(ajax跨域完全讲解)(4)

    其中8081端口是client端口

    简单请求和非简单请求

    简单请求:先执行再判断;
    非简单请求:先判断在执行;

    简单请求定义(满足以下几点即为简单请求):

    • 方法:

      • GET

      • HEAD

      • POST

    • 请求header里面:

      • text/plain

      • multipart/form-data

      • application/x-www-form-urlencoded

      • 无自定义头

      • Content-type为一下几种:

    非简单请求:

    • put

    • delete

    • 发送json格式的ajax请求

    • 带自定义头的ajax请求

    ajax跨域详细介绍(ajax跨域完全讲解)(5)

    非简单请求.PNG

    非简单请求会先发一个预检命令到服务端(OPTIONS) 服务端允许了才发送POST请求,所以是先判断再执行。

    缓存预检命令
    在服务端设置缓存预检命令后

    ajax跨域详细介绍(ajax跨域完全讲解)(6)

    缓存.PNG

    浏览器缓存后,浏览器不需要再次发送预检命令。

    带cookie的跨域

    • Access-Control-Allow-Origin字段不能为*

    • 增加Access-Control-Allow-Credentials值为true的字段

    多站点带cookie跨域解决方法:

    在服务端通过origin字段得到请求端域名,然后增加到 Access-Control-Allow-Origin字段中

    带自定义头跨域

    ajax跨域详细介绍(ajax跨域完全讲解)(7)

    自定义头跨域.PNG

    然后在服务端增加自定义头(写死):

    ajax跨域详细介绍(ajax跨域完全讲解)(8)

    服务端自定义头.PNG

    或者在服务端获取请求头,然后加入进去(推荐)

    被调用方解决跨域:nginx

    被调用方解决跨域:apache

    调用方解决跨域(隐藏跨域)

    反向代理

    在nginx中:
    把所有请求转发到8080端口。
    把要调用的服务器地址用8081端口代理。

猜您喜欢: