AJAX跨域问题解决方案详解_Ajax

1.前言

跨域简单的说，就是从一个域名的网页去访问另一个域名网页的资源。

通过超链接或者form表单提交或者window.location.href的方式进行跨域是不存在问题的。但在一个域名的网页中的一段js代码发送ajax请求去访问另一个域名中的资源，由于同源策略的存在导致无法跨域访问，那么ajax就存在这种跨域问题。

关于同源问题，我们判断同源从三个要素着手：协议、域名、端口号。

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

接下来我们来谈谈ajax中存在的跨域问题如何解决。

2.解决方案

下面例子都是部署在两个服务器上，html代码是a服务器上的内容，servlet是b服务器上的内容。

2.1 设置响应头

这个比较简单，只需要在跨域访问资源的servlet中添加代码：

response.setheader("access-control-allow-origin", "http://localhost:8080"); // 允许某个
response.setheader("access-control-allow-origin", "*"); // 允许所有

2.2 jsonp

jsonp是一种类ajax的请求机制，同样可以完成局部刷新的效果。但是jsonp只支持get请求方式。

2.2.1 前端代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jsonp跨域</title>
</head>
<body>
<!-- 下面一行的代码效果是和下面22-28行的代码一样的 -->
<!--<script type="text/javascript" src="http://localhost:8081/b/jsonp2?fun=sayhello"></script>-->
<script type="text/javascript">
  // data是一个json：{"username" : "lucy"}
  function sayhello(data){ 
    document.getelementbyid("mydiv").innerhtml = data.username
  }
  window.onload = () => {
    document.getelementbyid("btn").onclick = () => {
      // 加载script元素
      // 创建script元素对象
      const htmlscriptelement = document.createelement("script");
      // 设置script的type属性
      htmlscriptelement.type = "text/javascript"
      // 设置script的src属性
      htmlscriptelement.src = "http://localhost:8081/b/jsonp2?fun=sayhello"
      // 将script对象添加到body标签中（这一步就是加载script）
      document.getelementsbytagname("body")[0].appendchild(htmlscriptelement)
    }
  }
</script>
<button id="btn">jsonp解决跨域问题，达到ajax局部刷新的效果</button>
<div id="mydiv"></div>
</body>
</html>

2.2.2 后端代码

package com.bjpowernode.b.web.servlet;
import jakarta.servlet.servletexception;
import jakarta.servlet.annotation.webservlet;
import jakarta.servlet.http.httpservlet;
import jakarta.servlet.http.httpservletrequest;
import jakarta.servlet.http.httpservletresponse;
import java.io.ioexception;
@webservlet("/jsonp2")
public class jsonpservlet2 extends httpservlet {
    @override
    protected void doget(httpservletrequest request, httpservletresponse response)
            throws servletexception, ioexception {
        // 获取函数名
        string fun = request.getparameter("fun");
        // 响应一段js代码
        response.getwriter().print(fun + "({\"username\" : \"lucy\"})");
    }
}

2.3 使用jquery封装的jsonp

jquery中的jsonp其实就是我们上面代码的高度封装，底层原理完全相同。

核心代码：

$.ajax({
    type : "get",
    url : "跨域的url",
    datatype : "jsonp", // 指定数据类型
    jsonp : "fun", // 指定参数名（不设置的时候，默认是："callback"）
    jsonpcallback : "sayhello" // 指定回调函数的名字
							   // （不设置的时候，jquery会自动生成一个随机的回调函数，
    						   //并且这个回调函数还会自动调用success的回调函数。）
})

后端代码同上。

2.4 代理机制（httpclient）

使用java程序发送get/post请求这里有两种方案：

第一种方案：使用jdk内置的api（java.net.url…），这些api是可以发送http请求的。
第二种方案：使用第三方的开源组件，比如：apache的httpclient组件。（httpclient组件是开源免费的，可以直接用）

这里我们说第二种方案。

2.4.1 前端代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>使用代理机制完成ajax跨域访问</title>
</head>
<body>
<script type="text/javascript">
    // es6当中的有一个新语法：箭头函数。
    window.onload = () => {
        document.getelementbyid("btn").onclick = () => {
            // 发送ajax请求
            // 1.创建核心对象
            const xmlhttprequest = new xmlhttprequest(); // const可以声明变量。(可以自己研究一下：var let const声明变量时有什么区别)
            // 2.注册回调函数
            xmlhttprequest.onreadystatechange = () => {
                if (xmlhttprequest.readystate == 4) {
                    // 这里也可以使用区间的方式，因为状态码是200~299都是正常响应结束。
                    if (xmlhttprequest.status >= 200 && xmlhttprequest.status < 300) {
                        document.getelementbyid("mydiv").innerhtml = xmlhttprequest.responsetext
                    }
                }
            }
            // 3.开启通道
            xmlhttprequest.open("get", "/a/proxy", true)
            // 4.发送请求
            xmlhttprequest.send()
        }
    }
</script>
<button id="btn">使用代理机制解决ajax跨域访问</button>
<div id="mydiv"></div>
</body>
</html>

2.4.2 代理servlet代码

这一部分的代码基本上都是模板套用，改改具体参数就好了。

package com.bjpowernode.javaweb.servlet;
import jakarta.servlet.servletexception;
import jakarta.servlet.annotation.webservlet;
import jakarta.servlet.http.httpservlet;
import jakarta.servlet.http.httpservletrequest;
import jakarta.servlet.http.httpservletresponse;
import org.apache.http.httpentity;
import org.apache.http.httpresponse;
import org.apache.http.client.methods.httpget;
import org.apache.http.impl.client.closeablehttpclient;
import org.apache.http.impl.client.httpclients;
import java.io.bufferedreader;
import java.io.ioexception;
import java.io.inputstreamreader;
@webservlet("/proxy")
public class proxyservlet extends httpservlet {
    @override
    protected void doget(httpservletrequest request, httpservletresponse response)
            throws servletexception, ioexception {
        // 通过httpclient组件，发送http get请求，访问 targetservlet
        httpget httpget = new httpget("http://localhost:8081/b/target");
        httpget.setheader("content-type", "application/x-www-form-urlencoded");
        closeablehttpclient httpclient = httpclients.createdefault();
        httpresponse resp = httpclient.execute(httpget);
        httpentity entity = resp.getentity();
        bufferedreader reader = new bufferedreader(new inputstreamreader(entity.getcontent(), "utf-8"));
        string line = null;
        stringbuffer responsesb = new stringbuffer();
        while ((line = reader.readline()) != null) {
            responsesb.append(line);
        }
        reader.close();
        httpclient.close();
        // b站点响应回来的数据
        response.getwriter().print(responsesb);
    }
}

2.4.3 目标servlet代码

package com.bjpowernode.b.web.servlet;
import jakarta.servlet.servletexception;
import jakarta.servlet.annotation.webservlet;
import jakarta.servlet.http.httpservlet;
import jakarta.servlet.http.httpservletrequest;
import jakarta.servlet.http.httpservletresponse;
import java.io.ioexception;
@webservlet("/target")
public class targetservlet extends httpservlet {
    @override
    protected void doget(httpservletrequest request, httpservletresponse response)
            throws servletexception, ioexception {
        // 响应一个json字符串。
        response.getwriter().print("{\"username\":\"jackson\"}");
    }
}