AJAX跨域访问(不同域之间相互访问)

article/2025/10/6 3:34:50

目录

  • 一、跨域:
  • 二、同源策略:
  • 三、解决Ajax跨域问题的方案:
    • 方案一:设置响应头
    • 方案二:jsonp
    • 方案三:jQuery封装jsonp
    • 方案四:代理机制(httpclient)
    • 方案五:nginx反向代理

一、跨域:

  • 跨域是指从一个域名的网页去请求另一个域名的资源。比如从百度(https://baidu.com)页面去请求京东(https://www.jd.com)的资源。
  • 通过超链接或者form表单提交或者超链接的方式进行跨域是不存在问题的。但在一个域名的网页中的一段js代码发送ajax请求去访问另一个域名中的资源,由于同源策略的存在导致无法跨域访问,那么ajax就存在这种跨域问题。
  • 有一些情况下,我们是需要使用ajax进行跨域访问的。比如某公司的A页面(8080:a.bjpowernode.com)有可能需要获取B页面(8081:b.bjpowernode.com)。

二、同源策略:

  • 同源策略是指一段脚本只能读取来自同一来源的窗口和文档的属性同源就是协议(http)、域名(localhost)和端口(8080)都相同
  • Ajax无法跨域:http://localhost:8080/这个域名中的文件不能访问http://localhost:8081/这个域名中的内容。但是form表单和超链接可以。
  • 同源策略有什么用?如果你刚刚在网银输入账号密码,查看了自己还有1万块钱,紧接着访问一些非法的网站,这个网站可以访问刚刚的网银站点,并且获取账号密码,那后果可想而知。所以,从安全的角度来讲,同源策略是有利于保护网站信息的

三、解决Ajax跨域问题的方案:

方案一:设置响应头

在被访问的servlet中加入下述代码表示允许该域名访问我(该servlet)。

    response.setHeader("Access-Control-Allow-Origin", "http://localhost:8080"); // 允许某个域名访问我response.setHeader("Access-Control-Allow-Origin", "*"); // 允许所有域名访问我

方案二:jsonp

  • jsonp:json with padding(带填充的json)
  • jsonp不是ajax请求,但是可以完成局部刷新的效果,并且可以解决跨域问题。
  • 注意:jsonp解决跨域的时候,只支持GET请求。不支持post请求。
  • 原理:script标签的src属性值可以是URL,作用是访问某个servlet,后端servlet响应该请求并返回一个字符串到标签中,浏览器接收到这个字符串后,会自动将字符串当做JS代码执行。
    如果后端响应的字符串是一段JS代码的字符串,那么就能实现JS的一系列操作,例如使用innerHTML方法动态生成标签的值、调用前端创建的函数等,类似ajax异步刷新。
  • 例子:用户点击按钮后从后端接收数据展示到前端。这里后端接收的数据是一个前端早已写好的函数。
    请添加图片描述
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>jsonp跨域问题</title>
</head>
<body><script type="text/javascript">function dosome(myjson){//这是我们自己写的函数,一会后端返回的JS代码是fun(json),然后调用我们这个函数给div标签内容赋值document.getElementById("mydiv").innerHTML = myjson.name;}window.onload =() => {//箭头函数document.getElementById("btn").onclick = () =>{//箭头函数,点击按钮创建一个<script>标签var myscript = document.createElement("script");//创建元素对象myscript.type = "text/javascript";//给对象设置type属性myscript.src = "http://localhost:8081/a/servlet01?fun=dosome";//给对象设置src属性,这里要加fun=dosome,这是get属性向后端传送数据的方法,目的是告诉后端我们自己写的函数名,方便后端使用我们前端自己写的函数document.getElementsByTagName("body")[0].appendChild(myscript);//将script标签添加到body中}}</script><button id="btn">解决ajax跨域问题</button><div id="mydiv"></div>
</body>
</html>
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("/servlet01")
public class Servlets extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {response.setContentType("text/html");//获取前端发送过来的函数名String fun = request.getParameter("fun");response.getWriter().print(fun+"({\"name\":\"zhangsan\"})");//返回的事一个JS代码:fun(json对象)}
}

请添加图片描述

方案三:jQuery封装jsonp

  • jQuery中的jsonp其实就是我们方案2的高度封装,底层原理完全相同。
  • 核心代码:
    //看似是ajax请求,实际上不是ajax请求。$.ajax({type : "GET",url : "跨域的url",//不需要传函数名了,函数名默认传的是&jsonp属性的值=jsonpCallback属性的值。dataType : "jsonp", // 指定数据类型,这里是重点!!区分ajax和jsonp的依据jsonp : "fun", // 指定参数名(不设置的时候,默认是:"callback")jsonpCallback : "sayHello" // 这里的函数就是我们自定义的函数// (不设置的时候,jQuery会自动生成一个随机的回调函数,//并且这个回调函数还会自动调用success的回调函数。所以如果不设置这个属性则必须设置success属性)})
    

方案四:代理机制(httpclient)

在这里插入图片描述

  • 我们知道1号服务器不能使用异步ajax直接访问二号服务器,所以我们可以1号服务器访问本服务器的servlet,然后本服务器的servlet去访问2号服务器的servlet。
  • 使用Java程序怎么去发送get/post请求呢?【GET和POST请求就是HTTP请求。】
    • 第一种方案:使用JDK内置的API(java.net.URL…),这些API是可以发送HTTP请求的。
    • 第二种方案:使用第三方的开源组件,比如:apache的httpclient组件。(httpclient组件是开源免费的,可以直接用)
  • 在java程序中,使用httpclient组件可以发送http请求。
    • 对于httpclient组件的代码,大家目前可以不进行深入的研究,可以从网上直接搜。然后粘贴过来,改一改,看看能不能完成发送get和post请求。
    • 使用httpclient组件,需要先将这个组件相关的jar包引入到项目当中。
      请添加图片描述
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>代理跨域问题</title>
</head>
<body>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">$(function () {$("#btn").click(function () {$.ajax({type : "get",url : "/b/zhuan",async : true,dataType:"json",success : function(json) {$("#mydiv").html(json.name);}})})})
</script>
<button id="btn">解决ajax跨域问题</button>
<div id="mydiv"></div>
</body>
</html>
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.client.methods.HttpPost;
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("/zhuan")
public class Zhongzhuan extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {// 使用java代码去发送HTTP get请求// 目标地址//String url = "https://www.baidu.com";String url = "http://localhost:8081/a/servlet02";HttpGet httpGet = new HttpGet(url);// 设置类型 "application/x-www-form-urlencoded" "application/json"httpGet.setHeader("Content-Type", "application/x-www-form-urlencoded");//System.out.println("调用URL: " + httpGet.getURI());// httpClient实例化CloseableHttpClient httpClient = HttpClients.createDefault();// 执行请求并获取返回HttpResponse response1 = httpClient.execute(httpGet);HttpEntity entity = response1.getEntity();//System.out.println("返回状态码:" + response.getStatusLine());// 显示结果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);}response.getWriter().print(responseSB);//System.out.println("服务器响应的数据:" + responseSB);reader.close();httpClient.close();}
}
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("/servlet02")
public class Servlet2 extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {response.setContentType("text/html");response.getWriter().print("{\"name\":\"zhangsan\"}");//返回的事一个JS代码:fun(json对象)}
}

方案五:nginx反向代理

  • nginx反向代理中也是使用了这种代理机制来完成AJAX的跨域,实现起来非常简单,只要修改一个nginx的配置即可。具体细节老师没讲。

http://chatgpt.dhexx.cn/article/RRA4jEXV.shtml

相关文章

nginx配置图片跨域访问

在server段中添加红框内的图片跨域内容 参数 location ~* .*.(gif|jpg|jpeg|png|bmp|swf)$ { add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Headers X-Requested-With; add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS…

浏览器跨域访问限制

一.什么是跨域 广义的跨域&#xff1a; (1) 资源跳转&#xff1a;A链接、重定向、表单提交 (2) 资源嵌入&#xff1a;<link>、<script>、<img>、<frame>等dom标签&#xff0c;还有样式中background:url()、font-face()等文件外链 (3) 脚本请求&#x…

Django 多方式实现跨域访问

一、什么是跨域 1.1 跨越介绍 跨域&#xff0c;是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的&#xff0c;是浏览器对JavaScript实施的安全限制。 这里说明一下&#xff0c;无法跨域是浏览器对于用户安全的考虑&#xff0c;如果自己写个没有同源策略的浏览…

Flask中跨域访问的实现

在我们访问不同的服务器时&#xff0c;就会涉及到了跨域的问题。因为不同域名之间是无法进行交流的&#xff0c;然后跨域就打破了这种规则的限制。说起Flask中的跨域&#xff0c;就不得不提到CORS组件了&#xff0c;相信大家在其它框架中也见过了它的身影。下面我们就跨域问题和…

Tomcat设置允许跨域访问

开发React项目时前端通过axios向后端代码发起请求调试的时候由于后端代码运行在8080端口而React项目运行在3000端口导致浏览器的同源策略禁止跨域请求&#xff0c;因此需修改Tomcat配置文件web.xml以开放跨域访问。 在tomcat的web.xml文件末尾加上&#xff1a; <filter>…

express 允许跨域访问

设置Express const express require(express) const bodyParser require(body-parser)const app express() // 处理参数 app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: false }));// 设置允许跨域访问该服务 app.all(*, function (req, res, nex…

tomcat 设置允许跨域访问

既然想到使用tomcat进行跨域的设置&#xff0c;而不使用在项目中设置header来解决&#xff0c;说明你也是tomcat 下的资源需要做跨域处理吧&#xff1f;这也是一个统一的允许跨域设置&#xff0c;tomcat下的所有请求都将放开&#xff0c;请注意。 具体步骤&#xff1a; 1.首先…

Chrome浏览器 设置跨域访问

由于浏览器的安全策略&#xff0c;不同域名的访问会被限制&#xff0c;导致不能访问 chorme或者360都可以使用下列设置来解决这个问题&#xff1a; &#xff08;1&#xff09;在电脑上新建一个目录&#xff0c;例如&#xff1a;C:\MyChromeEnvUserData &#xff08;2&#x…

tomcat9配置允许跨域访问

目录 一、问题描述二、解决办法三、程序截图 一、问题描述 最近在用Tomcat9最新版本部署程序的时候&#xff0c;发现其他服务访问我的静态资源的时候出现了跨域访问&#xff0c;结果很明显被拦截了&#xff0c;之前的文章介绍了Tomcat8.5的跨域配置&#xff0c;但是研究发现&a…

html的页面怎样直接跨域访问,【HTML】iframe跨域访问问题

概述 本地同一浏览器访问本地HTML文件和访问服务器端HTML文件,本地Iframe没有自适应高度,而服务器端的Ifrane自适应了高度。 1.问题重现: Chrome 版本 41.0.2272.101 (64-bit) OS:Win8.1 Chrome访问服务器端HTML文件呈现的结果 Chrome访问本地HTML文件呈现的结果 本地访问的…

vue跨域访问

vue跨域访问的问题&#xff08;基于允许跨域访问的前提&#xff09; 找到“ vue.config.js"&#xff0c;有些不是vue.config.js命名&#xff0c;也就是找到重写路径的js文件。重写一下自己要替换的路径&#xff0c;在原有基础上加一个 新建一个dev.js文件内容如下&#…

关于跨域访问

1 概念 2 案例 3 解决 4 实现 5 什么是跨域问题 示意图 1 概念 跨域访问&#xff0c;是指从一个域名的网页去请求另一个域名的资源。比如从 www.baidu.com 页面去请求 ww w.google.com 的资源。 但是一般情况下不能这么做跨域访问&#xff0c;因为有浏览器的 “ 同源策略…

什么是跨域?如何实现跨域访问?

跨域是指不同域名之间相互访问。 JavaScript同源策略的限制&#xff0c;A域名下的JavaScript无法操作B或是C域名下的对象 实现&#xff1a; 1、JSONP跨域&#xff1a;利用script脚本允许引用不同域下的js实现的&#xff0c;将回调方法带入服务器&#xff0c;返回结果时回调 2、…

跨域访问

跨域访问是什么 同源策略 1995年&#xff0c;同源政策由Netscape公司引人浏览器。目前&#xff0c;所有刘览器都实行这个政策。同源政策的目的&#xff0c;是为了保证用户信息的安全&#xff0c;防止恶意的网站窃取数据。随着互联网的发展&#xff0c;“同源政策”越来越严格…

朴素贝叶斯分类器python_python实现高斯朴素贝叶斯分类器

在这篇文章中,我们将使用我最喜欢的机器学习库scikit-learn在Python中实现朴素贝叶斯分类器。接下来,我们将使用经过训练的朴素贝叶斯(监督分类法)模型来预测人口收入。 在朴素贝叶斯分类器的文章中我们讨论了贝叶斯定理,我们希望你对贝叶斯定理的基础知识有一定的了解,如果…

贝叶斯分类器(matlab)

目标 下表由雇员数据库的训练数据组成。数据已泛化。例如&#xff0c;age“3135”表示年龄在31~35之间。对于给定的行&#xff0c;count表示department、status、age和salary在该行具有给定值的元组数。 DepartmentStatusAgeSalaryCountSalesSenior31-3546K-50K30Salesjunior…

Python实现朴素贝叶斯分类器

朴素贝叶斯分类器 文章目录 朴素贝叶斯分类器一、贝叶斯分类器是什么&#xff1f;贝叶斯判定准则朴素贝叶斯分类器举个栗子 二、相关代码1.数据处理2.生成朴素贝叶斯表&#xff08;字典&#xff09;关于如何判断属性的连续或离散性 根据朴素贝叶斯表计算预测标签 总结 一、贝叶…

贝叶斯分类器 (下)

目录 错误率与风险 朴素贝叶斯分类器 平滑&#xff1a;拉普拉斯修正 半朴素贝叶斯分类器 错误率与风险 书接上回&#xff0c;我们讲到最大后验概率&#xff0c;我们期望把概率最大时对应的属性&#xff0c;当做它最终的结果。我们自然也会思考&#xff0c;这样做准不准&…

贝叶斯分类器算法原理

目录 1.1&#xff0c;什么是朴素贝叶斯 1.2&#xff0c;极大似然估计 1.3&#xff0c;朴素贝叶斯分类器 1.4&#xff0c;朴素贝叶斯算法就程 1.5&#xff0c;朴素贝叶斯的优缺点 1.1&#xff0c;什么是朴素贝叶斯 在所有的机器学习分类算法中&#xff0c;朴素贝叶斯和其他…

【贝叶斯分类3】半朴素贝叶斯分类器

文章目录 1. 朴素贝叶斯分类器知识回顾1.1 类别&#xff0c;特征1.2 风险&#xff0c;概率1.3 类条件概率 2. 半朴素贝叶斯分类器学习笔记2.1 引言2.2 知识卡片2.3 半朴素贝叶斯分类器2.4 独依赖估计2.4.1 简介2.4.2 SPODE(超父独依赖估计)2.4.3 AODE(平均独依赖估计)2.4.4 TAN…