AJAX——跨域问题

📄个人主页：胖虎不秃头
✨个人简介：Java领域新星创作者，随时准备跑路的大二学生
🔥精品专栏：有这一个就够了
🌈个人名言：知道的越多，不知道的越多
💥刷题神器：推荐一款算法刷题网站Nowcoder👉点击跳转刷题网站进行注册学习

AJAX跨域问题

跨域

• 跨域是指从一个域名的网页去请求另一个域名的资源。比如从百度(https://baidu.com)页面去请求京东(https://www.jd.com)的资源。
• 通过超链接或者form表单提交或者window.location.href的方式进行跨域是不存在问题的（大家可以编写程序测试一下）。但在一个域名的网页中的一段js代码发送ajax请求去访问另一个域名中的资源，由于同源策略的存在导致无法跨域访问，那么ajax就存在这种跨域问题。
• 同源策略是指一段脚本只能读取来自同一来源的窗口和文档的属性，同源就是协议、域名和端口都相同。
• 同源策略有什么用？如果你刚刚在网银输入账号密码，查看了自己还有1万块钱，紧接着访问一些不规矩的网站，这个网站可以访问刚刚的网银站点，并且获取账号密码，那后果可想而知。所以，从安全的角度来讲，同源策略是有利于保护网站信息的。
• 有一些情况下，我们是需要使用ajax进行跨域访问的。比如某公司的A页面(a.bjpowernode.com)有可能需要获取B页面(b.bjpowernode.com)。

同源还是不同源

• 区分同源和不同源的三要素

• • 协议
  • 域名
  • 端口

• 协议一致，域名一致，端口号一致，三个要素都一致，才是同源，其它一律都是不同源

复现AJAX跨域问题

AJAX跨域解决方案

方案1：设置响应头

• 核心原理：跨域访问的资源允许你跨域访问。

• 实现：

  • response.setHeader("Access-Control-Allow-Origin", "http://localhost:8080"); // 允许某个
    response.setHeader("Access-Control-Allow-Origin", "*"); // 允许所有
    1
    2

方案2：jsonp

• jsonp：json with padding（带填充的json【学完之后再理解这个什么意思！！！】）
• jsonp不是一个真正的ajax请求。只不过可以完成ajax的局部刷新效果。可以说jsonp是一种类ajax请求的机制。
• jsonp不是ajax请求，但是可以完成局部刷新的效果，并且可以解决跨域问题。
• 注意：jsonp解决跨域的时候，只支持GET请求。不支持post请求。

方案3：jQuery封装的jsonp

• 牛人们写的jQuery库，已经对jsonp进行了封装。大家可以直接拿来用。

• 用之前需要引入jQuery库的js文件。（这里的jQuery库咱们就不再封装了，咱们直接用jQuery写好的jsonp方式。）

• jQuery中的jsonp其实就是我们方案2的高度封装，底层原理完全相同。

• 核心代码

  • $.ajax({
        type : "GET",
        url : "跨域的url",
        dataType : "jsonp", // 指定数据类型
        jsonp : "fun", // 指定参数名（不设置的时候，默认是："callback"）
        jsonpCallback : "sayHello" // 指定回调函数的名字
    							   // （不设置的时候，jQuery会自动生成一个随机的回调函数，
        						   //并且这个回调函数还会自动调用success的回调函数。）
    })
    1
    2
    3
    4
    5
    6
    7
    8
    9

方案4：代理机制（httpclient）

• 使用Java程序怎么去发送get/post请求呢？【GET和POST请求就是HTTP请求。】
  • 第一种方案：使用JDK内置的API（java.net.URL…），这些API是可以发送HTTP请求的。
  • 第二种方案：使用第三方的开源组件，比如：apache的httpclient组件。（httpclient组件是开源免费的，可以直接用）
• 在java程序中，使用httpclient组件可以发送http请求。
  • 对于httpclient组件的代码，大家目前可以不进行深入的研究，可以从网上直接搜。然后粘贴过来，改一改，看看能不能完成发送get和post请求。
  • 使用httpclient组件，需要先将这个组件相关的jar包引入到项目当中。

方案5：nginx反向代理

• nginx反向代理中也是使用了这种代理机制来完成AJAX的跨域，实现起来非常简单，只要修改一个nginx的配置即可。以后大家学习nginx之后再说吧。！！！！