AJAX的跨域问题和同源策略分解了解哪些请求可以跨域------AJAX

已于 2023-11-19 10:41:56 修改
阅读量396 收藏
点赞数 19
分类专栏： AJAX JAVA 计算机网络 文章标签： javascript 前端 ajax jquery json java-ee java
于 2023-11-17 16:28:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2201_75960169/article/details/134465990
版权
JAVA 同时被 3 个专栏收录
543 篇文章 3 订阅
订阅专栏
计算机网络
134 篇文章 0 订阅
订阅专栏
AJAX
45 篇文章 0 订阅
订阅专栏
文章详细讨论了AJAX跨域请求遇到的CORS安全问题，介绍了同源策略如何阻止跨域请求，以及为何浏览器内置的XMLHttpRequest对象导致信息泄露。同时提到了Servlet处理GET和POST请求的示例。
摘要由CSDN通过智能技术生成 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="http://localhost:8081/Test/1.js"></script>
</head>
<body>
<!--    超链接可以跨域-->
    <a href="http://localhost:8081/Test/Test.html">走,跨个域</a>
<!--form表单测试-->
<form action="http://localhost:8081/Test/reg" method="post">
    用户名:<input type="text" name="username">
    密码:<input type="password" name="password">
    <input type="submit" value="注册">
</form>
<script type="text/javascript" src="JS/jQuery-1.0.0.js">
</script>
<script type="text/javascript">
    $(function(){
       $("#AjaxTrans").click(function(){
           let ajax = new XMLHttpRequest();
           ajax.onreadystatechange = function()
           {
               // 默认情况下,ajax发出跨域请求会有以下错误
//1.html:1  Access to XMLHttpRequest at 'http://localhost:8081/Test/hello'
//from origin 'http://localhost:8080' has been blocked by CORS policy:
//No 'Access-Control-Allow-Origin' header is present on the requested resource.
               //CORS策略阻止,这个ajax请求被同源策略阻止了
               //两个站点共享了xmlHttpRequest对象
               //因为页面的XmlHttpRequest对象不可以共享,一旦共享,对方就可以拿到我们的responseHtml
               //同源策略是浏览器的安全策略
               //协议,端口号,域名一致才是同源
               //同源才可以共享,不同源任何信息都不能共享
               //在我们此前所有的跳转和发送请求中,本质都是通过浏览器地址栏跳转来实现的,他们都没有安全问题
               //为什么ajax不行,因为只有它发送请求依靠的是我们浏览器内置的XmlHttpRequest对象
               //当我们A发送AJAX请求到B站点的时候,相当于我们两个站点共享了XmlHttpRequest对象
               //两个站点就都可以获取彼此的response信息,用户的宝贵信息就泄露了
               if (ajax.readyState === 4) {
                   if (ajax.status === 200) {
                       $("#myDiv").html(ajax.responseText);
                   }
                   else
                   {
                       alert(ajax.status);
                   }
               }
           }
           ajax.open("GET","http://localhost:8081/Test/hello",true);
           ajax.send();
       });
    });
</script>
<button onclick="window.location.href='http://localhost:8081/Test/Test.html'">跳页面</button>
<button id="AjaxTrans">ajax跨域请求</button>
<div id="MyDiv"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="http://localhost:8081/Test/1.js"></script>
</head>
<body>
<!--    超链接可以跨域-->
    <a href="http://localhost:8081/Test/Test.html">走,跨个域</a>
<!--form表单测试-->
<form action="http://localhost:8081/Test/reg" method="post">
    用户名:<input type="text" name="username">
    密码:<input type="password" name="password">
    <input type="submit" value="注册">
</form>
<script type="text/javascript" src="JS/jQuery-1.0.0.js">
</script>
<script type="text/javascript">
    $(function(){
       $("#AjaxTrans").click(function(){
           let ajax = new XMLHttpRequest();
           ajax.onreadystatechange = function()
           {
               // 默认情况下,ajax发出跨域请求会有以下错误
//1.html:1  Access to XMLHttpRequest at 'http://localhost:8081/Test/hello'
//from origin 'http://localhost:8080' has been blocked by CORS policy:
//No 'Access-Control-Allow-Origin' header is present on the requested resource.
               //CORS策略阻止,这个ajax请求被同源策略阻止了
               //两个站点共享了xmlHttpRequest对象
               //因为页面的XmlHttpRequest对象不可以共享,一旦共享,对方就可以拿到我们的responseHtml
               //同源策略是浏览器的安全策略
               //协议,端口号,域名一致才是同源
               //同源才可以共享,不同源任何信息都不能共享
               //在我们此前所有的跳转和发送请求中,本质都是通过浏览器地址栏跳转来实现的,他们都没有安全问题
               //为什么ajax不行,因为只有它发送请求依靠的是我们浏览器内置的XmlHttpRequest对象
               //当我们A发送AJAX请求到B站点的时候,相当于我们两个站点共享了XmlHttpRequest对象
               //两个站点就都可以获取彼此的response信息,用户的宝贵信息就泄露了
               if (ajax.readyState === 4) {
                   if (ajax.status === 200) {
                       $("#myDiv").html(ajax.responseText);
                   }
                   else
                   {
                       alert(ajax.status);
                   }
               }
           }
           ajax.open("GET","http://localhost:8081/Test/hello",true);
           ajax.send();
       });
    });
</script>
<button οnclick="window.location.href='http://localhost:8081/Test/Test.html'">跳页面</button>
<button id="AjaxTrans">ajax跨域请求</button>
<div id="MyDiv"></div>
</body>
</html>
// 封装一个函数,通过这个函数就可以获取页面中的元素了
function JQuery(selector)//可能时#id或者.class这样的类选择器
{
    if(typeof selector === "string")
    {
        // 设计思路根据CSS语法
        if (selector.charAt(0) === "#")
        {
            // 根据ID获取元素
            //这个是全局对象,是根据我们的ID获取的dom对象
            IE = document.getElementById(selector.substring(1));
            //返回JQuery对象,这个有html方法
            return new JQuery();
        }
    }
    if(typeof selector === "function")
    {
        window.onload = selector;
    }
    //定义一个HTML方法
    this.html = function(htmlStr)
    {
        IE.innerHTML = htmlStr;
    }
    //定义一个click函数代替onclick方法
    this.click = function(fun)
    {
        IE.onclick = fun;
    }
    //下拉栏变化
    this.change = function(fun)
    {
        IE.onchange = fun;
    }
    //由此可知
    this.val = function(value)
    {
        if(value === undefined)
        {
            return IE.value;
        }
        else
        {
            IE.value = value;
        }
    }
    //定义一个静态方法用来发送AJAX请求
    //JS中的静态方法也还是需要有这个对象的
    //传递参数如下,1.传递的数据2.请求方法3.url地址4.是否异步执行
    JQuery.ajax = function(JsonArgs)
    {
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function()
        {
            if (this.readyState === 4)
            {
                if (this.status === 200)
                {
                    var JsonObj = JSON.parse(this.responseText);
                    JsonArgs.success(JsonObj);
                }
                else
                {
                    alert(this.status);
                }
            }
        }
        if(JsonArgs.type.toUpperCase() === "POST")
        {
            xhr.open("POST",JsonArgs.url,JsonArgs.async);
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            xhr.send(JsonArgs.data);
        }
        if(JsonArgs.type.toUpperCase() === "GET")
        {
            JsonArgs.type = "GET";
            xhr.open("GET",JsonArgs.url+"?"+JsonArgs.data,JsonArgs.async);
            xhr.send();
        }
    }
}
$ = JQuery;
//执行这个的目的是为了让静态方法能生效
new JQuery();
// 封装一个函数,通过这个函数就可以获取页面中的元素了
function JQuery(selector)//可能时#id或者.class这样的类选择器
{
    if(typeof selector === "string")
    {
        // 设计思路根据CSS语法
        if (selector.charAt(0) === "#")
        {
            // 根据ID获取元素
            //这个是全局对象,是根据我们的ID获取的dom对象
            IE = document.getElementById(selector.substring(1));
            //返回JQuery对象,这个有html方法
            return new JQuery();
        }
    }
    if(typeof selector === "function")
    {
        window.onload = selector;
    }
    //定义一个HTML方法
    this.html = function(htmlStr)
    {
        IE.innerHTML = htmlStr;
    }
    //定义一个click函数代替onclick方法
    this.click = function(fun)
    {
        IE.onclick = fun;
    }
    //下拉栏变化
    this.change = function(fun)
    {
        IE.onchange = fun;
    }
    //由此可知
    this.val = function(value)
    {
        if(value === undefined)
        {
            return IE.value;
        }
        else
        {
            IE.value = value;
        }
    }
    //定义一个静态方法用来发送AJAX请求
    //JS中的静态方法也还是需要有这个对象的
    //传递参数如下,1.传递的数据2.请求方法3.url地址4.是否异步执行
    JQuery.ajax = function(JsonArgs)
    {
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function()
        {
            if (this.readyState === 4)
            {
                if (this.status === 200)
                {
                    var JsonObj = JSON.parse(this.responseText);
                    JsonArgs.success(JsonObj);
                }
                else
                {
                    alert(this.status);
                }
            }
        }
        if(JsonArgs.type.toUpperCase() === "POST")
        {
            xhr.open("POST",JsonArgs.url,JsonArgs.async);
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            xhr.send(JsonArgs.data);
        }
        if(JsonArgs.type.toUpperCase() === "GET")
        {
            JsonArgs.type = "GET";
            xhr.open("GET",JsonArgs.url+"?"+JsonArgs.data,JsonArgs.async);
            xhr.send();
        }
    }
}
$ = JQuery;
//执行这个的目的是为了让静态方法能生效
new JQuery();
alert("我是B应用的文件");
alert("我是B应用的文件");
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("/hello")
public class Hello extends HttpServlet
{
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.getWriter().println("Halla Ajax");
    }
}

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("/hello")
public class Hello extends HttpServlet
{
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.getWriter().println("Halla Ajax");
    }
}

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;
import java.io.PrintWriter;

@WebServlet("/reg")
public class Test extends HttpServlet
{
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
    {
        request.setCharacterEncoding("UTF-8");
        response.setCharacterEncoding("UTF-8");
        response.setContentType("text/html;charset=UTF-8");
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        PrintWriter out = response.getWriter();
        out.println(username+password);
    }
}

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;
import java.io.PrintWriter;

@WebServlet("/reg")
public class Test extends HttpServlet
{
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
    {
        request.setCharacterEncoding("UTF-8");
        response.setCharacterEncoding("UTF-8");
        response.setContentType("text/html;charset=UTF-8");
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        PrintWriter out = response.getWriter();
        out.println(username+password);
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>欢迎来到测试应用</h1>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>欢迎来到测试应用</h1>
</body>
</html>
旧约Alatus
关注
专栏目录
【Ajax】HTTP相关问题-GET-POST-XHR使用-jQuery中的ajax-跨域-同源-jsonp-cors
YK菌的博客
02-23 3万+
文章目录1. Ajax概述1.1 AJAX 简介1.2 XML 简介1.3 AJAX 的特点1.3.1 AJAX 的优点1.3.2 AJAX 的缺点2. 原生AJAX 的基本使用2.0 准备工作2.1 核心对象2.2 使用步骤2.3 使用案例1. GET 请求设置请求参数2. POST请求2.4 解决IE 缓存问题2.5 AJAX 请求状态3. jQuery 中的AJAX3.1 get 请求3.2 post 请求4. 跨域4.1 同源策略4.2 如何解决跨域4.2.1 JSONP4.2.2 CORS 1.
深入浅析Nginx实现AJAX跨域请求问题
12-02
在AJAX请求中，由于同源策略的限制，一个域上的网页通常不能请求另一个域上的资源。然而，通过正确配置Nginx服务器，我们可以允许特定或所有域进行跨域请求。 Nginx是一个高性能的HTTP和反向代理服务器，它可以在...
Ajax-同源策略（跨域问题）
xpmhhh的博客
03-20 2022
同源策略：是浏览器的一种安全策略。 同源：协议，域名，端口号必须完全相同。 当前网页资源的url与ajax请求的服务器目标资源的url必须三者保持一致，才满足同源策略。 ajax默认是遵循同源策略的，不遵循是不能直接发送ajax请求的。 违背同源策略就是跨域。 有时候需要多个服务器提供服务，就需要解决跨域问题。 如何解决跨域？ 方案一：JSONP（只支持get请求）原生跨域解决方案 全称JSON with padding，一个非官方的跨域解决方案。 原理：网页中有些标签本身就具备跨域能力，
ajax受同源策略限制,web前端 -- Ajax同源策略以及解决跨域问题
weixin_30240263的博客
08-06 613
根据千峰教育学习视频所练习的笔记 | 学习一段时间，我也有写一点东西的必要了···1. Ajax的同源策略源是指协议、域名和端口号。同源策略：是浏览器的一种安全机制。也就是说，当脚本运行时，浏览器会检测它所执行的脚本以及它取得的数据与我们的HTML页面所在的源是否相同。就是说我们请求数据的协议、端口号以及域名与我们HTML的协议、域名、端口号是否一致。一致就认为ok,是同源的，它就会进行成功的请求...
学习AJAX必知必会（5）~同源策略、解决跨域问题（JSONP、CORS）
伟庭的博客
01-22 819
学习AJAX必知必会（5）~同源策略、解决跨域问题（JSONP、CORS）
Ajax----跨域请求 axios
m0_56381561的博客
08-16 388
axios。
【同源跨域】---解决ajax跨域问题的三种解决方案
weixin_48813932的博客
06-22 1958
“同源”：协议相同、域名相同、端口相同。“同源的目的” ：只有在一个服务器上的文件才能互相交互，多个服务器之间的文件禁止1995年，同源政策由Netscape公司引入浏览器，最初的目的是某页面所设置的cookie，只能由其“同源”页面打开。如果两个页面拥有相同的协议、域名和端口，那么这两个页面就属于同一个源，其中只要有一个不相同，就是不同源。举例来说，这个网址，协议是，域名是，端口是（默认端口可以省略）。它的同源情况如下。目的：同源政策的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据。限制：随着互联
Ajax同源策略及跨域问题
weixin_56498069的博客
08-08 1572
Ajax跨域原理及解决方法
Ajax请求中的跨域问题及其解决方案
欢迎阅读我的博客
11-09 1788
Ajax请求中的跨域问题及其解决方案
Java Demo示例：Springboot解决Access-Control-Allow-Origin跨域问题、浏览器同源策略详解
热门推荐
学以致用 知行合一
05-04 1万+
同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。同源策略是一种关键的安全机制，它限制一个源加载的文档或脚本如何与另一个源的资源进行交互。 跨域并不是请求发不出去，请求能发出去，服务端能收到请求并正常返回结果，只是结果被浏览器拦截了。之所以会跨域，是因为受到了同源策略的限制，同源策略要求源相同才能正常进行通信，即协议、域名、端口号都完全一致。...
关于ajax跨域访问，Access-Control-Allow-Origin 404的简单解决办法
iammarrio的博客
10-18 5920
~关于ajax跨域，都是一个老生常谈的问题了，解决方法很多，比较常用的是JSONP方法，JSONP方法是一种非官方方法，而且这种方法只支持GET方式，不如POST方式安全（大家应该都知道）。即使使用jquery的jsonp方法，type设为POST，也会自动变为GET。（实践才是硬道理） 例如：客户端的域名是www.c.com,而请求的域名是www.s.com 如果直接
Vue-resource实现ajax请求和跨域请求示例
08-31
Vue-resource是Vue.js框架的一个插件，主要用于实现AJAX（异步JavaScript和XML）请求和处理跨域问题，从而方便前后端的数据交互。Vue-resource提供了与jQuery中的$.ajax类似的功能，使得开发者能够轻松地向服务器...
vue-cli开发时,关于ajax跨域的解决方法(推荐)
08-28
在使用Vue CLI构建前端应用的过程中，常常遇到一个问题：在开发阶段，由于同源策略的限制，前端代码（通常运行在本地开发服务器上，如localhost:8080）无法直接通过Ajax请求访问远端API接口（例如：...
【Vue】a-radio-group单选框数字与字符串回显问题
叶为正的博客
10-08 92
根据后端接口返回数字或字符串，来配置Ant Design of Vue中a-radio-group单选框的回显问题，注意value中的取值是不一样的。
JavaScript ArrayBuffer的读写与类型转换
白瑕 的博客
10-01 494
所有视图的基本单位是ArrayBuffer, ArrayBuffer中只存储二进制格式的数据.ArrayBuffer不可直接读写, 必须通过视图(比如DataView)暴露的API.
vue-live2d看板娘集成方案设计使用教程
每个人都是独一无二的，把握好自己的节奏，跟着自己的心走。
10-05 1276
vue-live2d看板娘集成方案设计使用教程
沂机管理系统/data/Ajax.aspx接口存在SQL注入漏洞
2301_77012231的博客
10-01 632
沂机管理系统/data/Ajax.aspx接口存在SQL注入漏洞，攻击者可以获取服务器权限。bp 报错泄露绝对路径。sqlmap确认有漏洞。
Puppeteer自动化：使用JavaScript定制PDF下载
最新发布
ip16yun的博客
10-08 493
Puppeteer 是一个强大的Node.js库，提供了对无头Chrome或Chromium的控制，可以用于生成网页快照、抓取数据、自动化测试等任务。其中，生成PDF文件是一个常见的需求，本文将通过使用Puppeteer展示如何自动化生成定制的PDF，并使用代理IP、设置user-agent、cookie等技术来增强自动化过程的灵活性与稳定性。为了更好地理解如何定制Puppeteer生成的PDF文件，我们提供一个生成A4纸张格式的网页PDF的实例。用户可以根据需求自定义输出的PDF格式或内容。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值