【Ajax】Ajax请求中的跨域问题

【Ajax】Ajax请求中的跨域问题

  • 1. 为什么有跨域问题
  • 2. 解决跨域问题的方案
  • 3. 方法一:JSONP方式
    • 3.1 实现原理
    • 3.2 实现流程
  • 4. 方法二:CORS方式
    • 4.1 什么是cors
    • 4.2 cors原理
      • 4.2.1 简单请求
      • 4.2.2 特殊请求
    • 4.3 实现流程
  • 5. 方法三:Nginx反向代理

跨域:浏览器对于javascript的同源策略的限制 。

以下情况都属于跨域:

跨域原因说明 示例
域名不同 www.jd.comwww.taobao.com
域名相同,端口不同 www.jd.com:8080www.jd.com:8081
二级域名不同 item.jd.commiaosha.jd.com

如果域名和端口都相同,但是请求路径不同,不属于跨域,如:

www.jd.com/item

www.jd.com/goods

http和https也属于跨域

而我们刚才是从manage.xxx.com去访问api.xxx.com,这属于二级域名不同,跨域了。

1. 为什么有跨域问题

跨域不一定都会有跨域问题。

因为跨域问题是浏览器对于ajax请求的一种安全限制(ajax出现请求跨域错误问题,主要原因就是因为浏览器的“同源策略”):一个页面发起的ajax请求,只能是与当前页域名相同的路径,这能有效的阻止跨站攻击。

因此:跨域问题 是针对ajax的一种限制

但是这却给我们的开发带来了不便,而且在实际生产环境中,肯定会有很多台服务器之间交互,地址和端口都可能不同。所以下面我们来讲讲怎么解决。

2. 解决跨域问题的方案

目前比较常用的跨域解决方案有3种:

  • Jsonp

    最早的解决方案,利用script标签可以跨域的原理实现。

    限制:

    • 需要服务的支持
    • 只能发起GET请求
  • CORS

    规范化的跨域请求解决方案,安全可靠。

    优势:

    • 在服务端进行控制是否允许跨域,可自定义规则
    • 支持各种请求方式

    缺点:

    • 会产生额外的请求
  • nginx反向代理

    思路是:利用nginx把跨域反向代理为不跨域,支持各种请求方式

    缺点:需要在nginx进行额外配置,语义不清晰

3. 方法一:JSONP方式

jsonp解决跨域问题是一个比较古老的方案(实际中不推荐使用),这里做简单介绍(实际项目中如果要使用JSONP,一般会使用JQ等对JSONP进行了封装的类库来进行ajax请求)

3.1 实现原理

JSONP之所以能够用来解决跨域方案,主要是因为

你可能感兴趣的:(Ajax,java,jsonp,nginx,跨域问题,ajax,cors)