ajax跨域完全讲解

产生跨域原因

  • 浏览器限制
  • 跨域(协议、主机名、端口号等不同就属于跨域)
  • XHR(XMLHttpRequest)请求(如果是json请求就不会)

    《ajax跨域完全讲解》 产生跨域原因

解决思路

  • 针对浏览器,修改浏览器安全配置,不过这需要修改每个浏览器,不实际
  • 把XHR 请求转为jsonp请求,不过jsonp请求已经越来越不满足当前需求了
  • 跨域代理

    《ajax跨域完全讲解》 解决思路

解决方法

jsonp解决

jsonp 不是标准,只是一种约定的协议,使用需要前后端协商一致。
jsonp通过动态创建script,然后发送出去(然后自动销毁,如果需要查看创建的script,需要打断点)。

创建的script如下图:

《ajax跨域完全讲解》 创建的script.PNG

普通请求和jsonp请求区别:

《ajax跨域完全讲解》 捕获.PNG

解释:

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

jsonp弊端

  • 服务器需要改动代码支持
  • 只支持get请求
  • 发送的不是XHR请求(XHR支持异步等)

被调用方解决-支持跨域

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

Filter解决方法

  • 浏览器是先执行再判断
  • 跨域请求返回值多了origin字段

解决方法:
在服务端:

《ajax跨域完全讲解》

其中8081端口是client端口

简单请求和非简单请求

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

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

  • 方法:
    • GET
    • HEAD
    • POST
  • 请求header里面:
    • 无自定义头
    • Content-type为一下几种:
      • text/plain
      • multipart/form-data
      • application/x-www-form-urlencoded

非简单请求:

  • put
  • delete
  • 发送json格式的ajax请求
  • 带自定义头的ajax请求

《ajax跨域完全讲解》 非简单请求.PNG

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

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

《ajax跨域完全讲解》 缓存.PNG

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

带cookie的跨域

  • Access-Control-Allow-Origin字段不能为*
  • 增加Access-Control-Allow-Credentials值为true的字段

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

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

带自定义头跨域

《ajax跨域完全讲解》 自定义头跨域.PNG

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

《ajax跨域完全讲解》 服务端自定义头.PNG

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

被调用方解决跨域:nginx

被调用方解决跨域:apache

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

反向代理

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

    原文作者:可汗爷爷
    原文地址: https://www.jianshu.com/p/020a12b2f6b3
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞