Ajax：跨域请求、ajax不能进行跨域请求解决方案1

（1）怎样理解跨域以及那些请求可以跨域

（2）在项目运行过程中可能出现的问题：不能正常显示图片：

（3）ajax跨域问题以及同源策略及解决方案

（1）怎样理解跨域以及那些请求可以跨域

跨域的理解：

测试多种方式进行跨域请求

创建2个项目，并配置不同的服务器端口号不同：

a的Model去访问b的Model，模仿进行跨域请求

创建a Model：

index.html:超链接、form表单、js等都是可以跨域的，他们有一个共同特点，直接把浏览器的地址改变了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>a应用的index页面</title>
</head>
<body>
<!--通过超链接的方式可以跨域吗？可以-->
<a href="http://localhost:8081/b/index.html">b的index页面（跨域访问）</a>

<!--form表单发送请求可以跨域吗？可以-->
<form action="http://localhost:8081/b/user/reg" method="post">
    用户名：<input type="text" name="username"><br>
    密码：<input type="password" name="password"><br>
    <input type="submit" value="注册">
</form>

<br><br><br>

<!--通过js代码中的window.location.href/document.location.href可以跨域吗？可以-->
<button onclick="window.location.href='http://localhost:8081/b/index.html'">b的index页面(跨域访问)1</button>
<button onclick="document.location.href='http://localhost:8081/b/index.html'">b的index页面(跨域访问)2</button>

<!--使用script标签可以加载js文件，这个可以跨域吗？可以-->
<script type="text/javascript" src="http://localhost:8081/b/my.js"></script>

<br>

<!--加载其他站点的图片，可以跨域吗？可以-->
<img src="http://localhost:8081/b/bd_logo.png" />

</body>
</html>

配置服务器tomcat：

创建b Model：

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>b应用的index页面</title>
</head>
<body>
<h1>b应用的index页面</h1>
</body>
</html>

my.js:

alert("b应用当中的my.js文件被加载并执行了。")

UserRegServlet:

package com.bjpowernode.b.web.servlet;



import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebServlet("/user/reg")
public class UserRegServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        // 获取用户名和密码
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        // 响应到前端
        response.getWriter().print(username + ":" + password);
    }
}

配置tomcat：

同时启动这两个项目：

当访问a Model中的index.html时：首先会使用script标签可以加载js文件触发alert

点击b的index页面（跨域访问）：

在表单中输入数据：点击注册

点击b 的index跨域访问1：window.location.href

点击b 的index跨域访问2：document.location.href

（2）在项目运行过程中可能出现的问题：不能正常显示图片：

也不能直接访问图片：出现404资源在不到，可能是资源没有加载，重启服务器试试

可以去底层看一下有没有在里面：

如果发现没有这个图片 bd_logo.png

重新编译一下：选择Build Artifacts

然后再查看：

（3）ajax跨域问题以及同源策略及解决方案

/*
 * 默认情况下：发送ajax跨域请求的时候会出现以下错误：
 * Access to XMLHttpRequest at 'http://localhost:8081/b/hello' from origin 'http://localhost:8080' has been blocked by CORS policy:
 * No 'Access-Control-Allow-Origin' header is present on the requested resource.
 * 出现这个错误的根本原因是：跨域的时候，不允许共享同一个XMLHttpRequest对象。因为共享同一个XMLHttpRequest对象是不安全的。
 * 重点提示：CORS策略阻止（这个ajax跨域请求被：同源策略阻止。）
 * 什么是同源策略？？？？？
 *      同源策略是浏览器的一种安全策略。
 * 什么是同源？什么是不同源？
 *      协议一致、域名一致、端口号一致。才是同源。
 *      只要上面的任一元素不一致，就是不同源。
 *      同源：XMLHttpRequest对象可以共享。
 *      不同源：XMLHttpRequest对象不可以共享。
 */

浏览器没变，浏览器内存只有一份，然后你再同一份内存中你去访问b站点的资源相当于跨域了，两个站点要共享XMLHttpReques对象这个是不允许的。

从一个站点发送ajax请求另一个站点的资源，就意味着另外一个站点和这个站点共享XMLHttpRequest对象，就存在了安全问题，默认情况下是不允许的，所以ajax是不允许跨域的

现在的系统是分布时系统：是需要跨域访问的

ajax1.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试：ajax跨域访问会不会有问题？？？</title>
</head>
<body>
<script type="text/javascript">
    /*window.onload = function(){
        document.getElementById("btn").onclick = function(){

        }
    }*/

    /*
     * 默认情况下：发送ajax跨域请求的时候会出现以下错误：
     * Access to XMLHttpRequest at 'http://localhost:8081/b/hello' from origin 'http://localhost:8080' has been blocked by CORS policy:
     * No 'Access-Control-Allow-Origin' header is present on the requested resource.
     * 出现这个错误的根本原因是：跨域的时候，不允许共享同一个XMLHttpRequest对象。因为共享同一个XMLHttpRequest对象是不安全的。
     * 重点提示：CORS策略阻止（这个ajax跨域请求被：同源策略阻止。）
     * 什么是同源策略？？？？？
     *      同源策略是浏览器的一种安全策略。
     * 什么是同源？什么是不同源？
     *      协议一致、域名一致、端口号一致。才是同源。
     *      只要上面的任一元素不一致，就是不同源。
     *      同源：XMLHttpRequest对象可以共享。
     *      不同源：XMLHttpRequest对象不可以共享。
     */
    // 使用ES6新特性：箭头函数
    window.onload = () => {
        document.getElementById("btn").onclick = () => {
            // 发送ajax的跨域请求
            // 1. 创建核心对象
            // let是一个关键字，可以定义变量。
            // ES6的新特性：let和const关键字都可以定义变量。
            // 注意：在JS中声明变量，可以使用：var let const。他们之间有什么区别？自己研究。
            let xmlHttpRequest = new XMLHttpRequest();
            // 2. 注册回调函数
            xmlHttpRequest.onreadystatechange = () => {
                if (xmlHttpRequest.readyState == 4) {
                    if (xmlHttpRequest.status >= 200 && xmlHttpRequest.status < 300) {
                        document.getElementById("mydiv").innerHTML = xmlHttpRequest.responseText
                    }
                }
            }
            // 3. 开启通道
            xmlHttpRequest.open("GET", "http://localhost:8081/b/hello", true)
            // 4. 发送请求
            xmlHttpRequest.send()
        }
    }

</script>
<button id="btn">发送ajax跨域请求</button>
<div id="mydiv"></div>
</body>
</html>

跨域的解决方案：

HelloServlet：设置跨域访问，设置响应头，允许ajax跨域访问

package com.bjpowernode.b.web.servlet;


import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebServlet("/hello")
public class HelloServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        // 设置响应头，允许ajax跨域请求
        //response.setHeader("Access-Control-Allow-Origin", "http://localhost:8080");
        response.setHeader("Access-Control-Allow-Origin", "*");
        // 响应
        //response.getWriter().print("hello ajax!!!");

        response.getWriter().print("{\"username\":\"zhangsan\"}");
    }
}

如果不设置会报错：

点击发送ajaax跨域请求：

Ajax：跨域请求、ajax不能进行跨域请求解决方案1

猜你喜欢