当前位置: 首页 > news >正文

AJAX学习笔记8 跨域问题及解决方案

AJAX学习笔记7 AJAX实现省市联动_biubiubiu0706的博客-CSDN博客

跨域:指一个域名的网页去请求另外一个域名资源.比如百度页面去请求京东页面资源.

同源与不同源三要素:协议,域名,端口

协议一致,域名一致,端口一致.才算是同源.其他一律不同源

新建项目测试:

1.window.open();

window.location.href="";

document.location.href="";

是否可以直接跨域访问.

2.测试<form action="" method="">表单是否可以跨域访问

3.测试引入JS资源是否可以跨域访问:<script type="text/javascript" src=""></script>

4.测试<img src=""/> 图片资源是否可以直接跨域访问

如里把C应用里的servlet拖到D应用里(搞错了)

D应用用个简单Servlet接收

测试结果上面4中方式跨域没有问题

他们的特点好比在url地址栏上直接访问

测试AJAX请求,发起跨域请求行不行

从C应用发送AJAX请求到D应用

前端

后端

跨域问题的根本原因在于浏览器内存中,两个站点不能共享同一个XMLHttpRequest,这话不一定对,,原因不安全

跨域问题发生的主要原因是浏览器执行了同源策略,因此一个网页的JavaScript代码无法直接访问不同域的资源。这包括使用XMLHttpRequest或Fetch API发送Ajax请求时,无法从一个域请求另一个域的数据。

跨域问题通常指的是浏览器限制了通过JavaScript发起的跨域请求,这些请求虽然发送了,但由于浏览器的同源策略(Same-Origin Policy)而被服务器拒绝

但是在微服务中,很多时候是需要跨域的

下面介绍解决方式:

1.服务器设置响应头,预检请求只是猜测   后面参数是允许的请求源

测试   可以访问

2.jsonp的方式:(json with padding)带填充的json

注意:jsonp不是一个真正的ajax请求.只不过可以完成局部刷新效果.是一种类似ajax请求的机制

jsonp不是ajax请求,但是可以完成局部刷新效果,并且可以解决跨域问题

jsonp事实上是依赖于

<script src="http://localhost:8081/d/ajax/js/jquery-3.4.1.js"></script>

这段引入JS文件的代码是可以跨域访问的

注意jsonp只支持Get请求跨域

好比C应用引入了D引用的JS

继续测试

后端返回方法调用,行不行?

测试,可以的

返回方法,方法内携带json数据行不行?

可以

能不能把方法变活,通过

<script type="text/javascript" src="http://localhost:8081/d/jsonp?fun=hi"></script>标签传参数过去

后端只是传了字符串回去,真正的调用者是浏览器

上面代码可以看出来jsonp其实和ajax没半毛钱关系,ajax是依靠XMLHttpRequest对象的

而jsonp依靠与<script type="text/javascript" src="http://localhost:8081/d/jsonp"></script>达到了和ajax差不多的效果

上面的代码,只是浏览器加载顺序,一步步执行,但是并没有达到局部刷新效果

有没有办法,比如页面上有一个按钮,当点击按钮时候执行

<script type="text/javascript" src="http://localhost:8081/d/jsonp?fun=hi"></script>

去调用后端,返回可以让浏览器执行的JS字符串

来达到页面的局部刷新

测试

上面这样就不需要点击事件直接加载完就调用了

现在把点击事件加上

点击按钮后

用JQuery封装jsonp

引入JQuery文件  就是别人写的js脚本

data:传不传看需求

http://localhost:8081/d/jsonp2?callback=jQuery34105755191968251865_1693966302334&username=HI&_=1693966302335

callback说明是个回调函数

callback=jQuery34105755191968251865_1693966302334 是JQuery加上去的

3.代理机制(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包引入到项目当中。

引入jar包

import org.apache.http.HttpEntity;
import org.apache.http.HttpResponse;
import org.apache.http.client.HttpClient;
import org.apache.http.client.methods.CloseableHttpResponse;
import org.apache.http.client.methods.HttpGet;
import org.apache.http.impl.client.CloseableHttpClient;
import org.apache.http.impl.client.HttpClients;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.BufferedReader;
import java.io.IOException;
import java.io.InputStreamReader;/*** @author hrui* @date 2023/9/6 14:03*/
@WebServlet("/")
public class AServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {}public static void main(String[] args) throws IOException {//使用Java代码发送HTTP get请求String url="http://localhost:8081/d/b";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 aDefault = HttpClients.createDefault();//执行请求并获取返回//CloseableHttpResponse response = aDefault.execute(httpGet);HttpResponse response = aDefault.execute(httpGet);System.out.println("返回的状态码:"+response.getStatusLine());HttpEntity entity = response.getEntity();//显示结果BufferedReader reader=new BufferedReader(new InputStreamReader(entity.getContent(), "UTF-8"));String line=null;StringBuffer stringBuffer=new StringBuffer();while((line=reader.readLine())!=null){stringBuffer.append(line);}System.out.println("服务器响应的数据:"+stringBuffer);reader.close();aDefault.close();}
}

那么就是说C应用的资源页面发起访问C应用的AJAX请求,然后让C应用的后端访问D应用的后端且返回数据是可行的

上面讲的是原理过程

实际使用的代理机制

C应用前端访问C应用后端

C应用后端访问D应用后端

在D应用建个目标Servlet

4.Nginx反向代理,解决AJAX跨域问题

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

要解决通过Nginx处理Ajax请求的跨域问题,可以使用Nginx的配置来设置CORS(跨域资源共享)头信息,以允许跨域请求。以下是一些常见的方法:

  1. 使用add_header指令

    在Nginx配置中,您可以使用add_header指令来添加CORS头信息。以下是一个示例配置:

  2. 这个配置允许来自任何来源(*)的跨域请求,并支持常见的HTTP方法(GET、POST、OPTIONS)。还定义了其他CORS相关的头信息。

  3. 使用Nginx的proxy_pass指令

    如果您的Nginx服务器用于代理后端API服务器,您也可以在proxy_pass指令中包含CORS头信息。以下是一个示例配置:

  4. 这个配置允许代理后端服务器,并添加CORS头信息,以便处理跨域请求。

  5. 请注意,这些示例配置中的Access-Control-Allow-Origin头信息设置为*,这意味着允许来自任何来源的请求。根据您的需求,您可以将其设置为特定的域名或IP地址。此外,还可以根据需要自定义其他CORS头信息。

    在配置Nginx之后,确保重新加载Nginx配置,以使更改生效。这可以通过运行nginx -s reload来完成。

    这些是解决通过Nginx处理Ajax请求的跨域问题的一些方法。根据您的具体需求和架构,您可以选择适合您情况的方法。

相关文章:

AJAX学习笔记8 跨域问题及解决方案

AJAX学习笔记7 AJAX实现省市联动_biubiubiu0706的博客-CSDN博客 跨域:指一个域名的网页去请求另外一个域名资源.比如百度页面去请求京东页面资源. 同源与不同源三要素:协议,域名,端口 协议一致,域名一致,端口一致.才算是同源.其他一律不同源 新建项目测试: 1.window.open();…...

webhook--详解(gitee 推送)

一、简介 webhook 是一种基于 HTTP 的回调函数&#xff0c;可在 2 个应用编程接口&#xff08;API&#xff09;之间实现轻量级的事件驱动通信。是一种新型的前后端交互方式&#xff0c;一种对客户端-服务器模式的逆转&#xff0c;在传统方法中&#xff0c;客户端从服务器请求数…...

高速路自动驾驶功能HWP功能定义

一、功能定义 高速路自动驾驶功能HWP是指在一般畅通高速公路或城市快速路上驾驶员可以放开双手双脚&#xff0c;同时注意力可在较长时间内从驾驶环境中转移&#xff0c;做一些诸如看手机、接电话、看风景等活动&#xff0c;该系统最低工作速度为60kph。 如上两种不同环境和速度…...

Leetcode113. 路径总和 II

力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 给你二叉树的根节点 root 和一个整数目标和 targetSum &#xff0c;找出所有 从根节点到叶子节点 路径总和等于给定目标和的路径。 官方题解&#xff1a;力扣&#xff08;LeetCode&#xff09;官网 - 全…...

分布式锁之redis实现

docker安装redis 拉取镜像 docker pull redis:6.2.6 查看镜像 启动容器并挂载目录 需要挂在的data和redis.conf自行创建即可 docker run --restart always -d -v /usr/local/docker/redis/redis.conf:/usr/local/etc/redis/redis.conf -v /usr/local/docker/redis/data:/dat…...

Idea中如何在一个项目中引入其他子模块?

首先在Settings打开Project Structure&#xff0c;然后找到Modules&#xff0c;点击加号点击import module&#xff0c;将需要引进的module引进来。 然后点击Artifacts 可以看到比如说day22…这个是我现在的项目&#xff0c;day16是我需要引入的。那么就在红色横线上面右键点第…...

UDP协议概述

传输层里比较重要的两个协议&#xff0c;一个是 TCP&#xff0c;一个是 UDP。TCP 是面向连接的&#xff0c;UDP 是面向无连接的。 所谓的建立连接&#xff0c;是为了在客户端和服务端维护连接&#xff0c;而建立一定的数据结构来维护双方交互的状态&#xff0c;用这样的数据结…...

Python-tracemalloc-跟踪内存分配

tracemalloc 模块是一个用于对 python 已申请的内存块进行debug的工具。它能提供以下信息: 定位对象分配内存的位置 按文件、按行统计python的内存块分配情况: 总大小、块的数量以及块平均大小。 对比两个内存快照的差异&#xff0c;以便排查内存泄漏 显示前10项 显示内存…...

02 CSS技巧

02 CSS技巧 clip-path 自定义形状&#xff0c;或者使用自带的属性画圆等circle HTML结构 <body><div class"container"></div> </body>CSS结构 使用*polygon*自定义形状 .container {width: 300px;height: 300px;background-color: re…...

Yarn资源调度器

文章目录 一、Yarn资源调度器1、架构2、Yarn工作机制3、HDFS、YARN、MR关系4、作业提交之HDFS&MapReduce 二、Yarn调度器和调度算法1、先进先出调度器&#xff08;FIFO&#xff09;2、容量调度器&#xff08;Capacity Scheduler&#xff09;3、公平调度器&#xff08;Fair …...

android上架备案公钥和md5获取工具

最近很多公司上架遇到了一个问题&#xff0c;就是要提供app的备案证明&#xff0c;现在android上架都需要备案了&#xff0c;但是我们的证书都是通过工具生成的&#xff0c;哪里知道公钥和md5那些东西呢&#xff1f;无论安卓备案还是ios备案都需要提供公钥和md5。 包括ios的备案…...

SpringBoot系列(12):SpringBoot集成log4j2日志配置

最近项目上有使用到log4j2日志模板配置&#xff0c;本文简单总结一下之前的学习笔记&#xff0c;如有纰漏之处&#xff0c;请批评指正。 1. log4j2日志依赖 使用log4j2日志模板时&#xff0c;需要引入相关依赖&#xff0c;下边的两种依赖方式均可。 1.1 使用sl4j依赖时 <…...

HTML事件列表

鼠标事件 属性描述DOMonclick当用户点击某个对象时调用的事件句柄。2oncontextmenu在用户点击鼠标右键打开上下文菜单时触发ondblclick当用户双击某个对象时调用的事件句柄。2onmousedown鼠标按钮被按下。2onmouseenter当鼠标指针移动到元素上时触发。2onmouseleave当鼠标指针…...

并发-Executor框架笔记

Executor框架 jdk5开始&#xff0c;把工作单元与执行机制分离开来&#xff0c;工作单元包括Runable和Callable&#xff0c;执行机制由Executor框架来提供。 Executor框架简介 Executor框架的两级调度模型 Java线程被一对一映射为本地操作系统线程 java线程启动会创建一个本…...

【C进阶】分析 C/C++程序的内存开辟与柔性数组(内有干货)

前言&#xff1a; 本文是对于动态内存管理知识后续的补充&#xff0c;以及加深对其的理解。对于动态内存管理涉及的大部分知识在这篇文章中 ---- 【C进阶】 动态内存管理_Dream_Chaser&#xff5e;的博客-CSDN博客 本文涉及的知识内容主要在两方面&#xff1a; 简单解析C/C程序…...

深入理解 JVM 之——字节码指令与执行引擎

更好的阅读体验 \huge{\color{red}{更好的阅读体验}} 更好的阅读体验 类文件结构 Write Once&#xff0c;Run Anywhere 对于 C 语言从程序到运行需要经过编译的过程&#xff0c;只有经历了编译后&#xff0c;我们所编写的代码才能够翻译为机器可以直接运行的二进制代码&#x…...

C++:vector

目录 一、关于vector 二、vector的相关函数 三、相关函数的使用 ①构造函数 ②size ③[] ​编辑 ④push_back ⑤迭代器iterator ⑥reserve ⑦resize ⑧find ⑨insert ⑩erase ⑪sort 一、关于vector vector比较像数组 观察可知&#xff0c;vector有两个模板参数…...

Android Automotive编译

系统准备 安装系统 准备一台安装Ubuntu系统的机器&#xff08;windows系统的机器可以通过WSL安装ubuntu系统&#xff09; 安装docker 本文使用docker进行编译&#xff0c;因此提前安装docker。参考网络链接安装docker并设置为不使用sudo进行docker操作。 参考链接&#xff…...

什么是50ETF期权开户条件,怎么开期权交易权限?

50ETF期权是指上证50ETF期权&#xff0c;标的物是上证50ETF&#xff0c;代码是&#xff08;510500&#xff09;&#xff0c;期权是一种在上证50ETF基础上进行衍生品交易的金融工具&#xff0c;下文科普什么是50ETF期权开户条件&#xff0c;怎么开期权交易权限&#xff1f;本文来…...

React 从入门到精通——本文来自AI创作助手

React是一个流行的JavaScript库&#xff0c;用于构建用户界面。以下是React入门到精通的步骤&#xff1a; 入门 安装React 你可以在npm上下载React包&#xff0c;也可以使用其他包管理器。首先需要安装node.js&#xff0c;然后使用以下命令安装React&#xff1a; npm insta…...

【51单片机实验笔记】前篇(三) 模块功能封装汇总(持续更新)

文章目录 通用函数public.hpublic.c 延时函数delay.hdelay.c LED模块数码管模块smg.hsmg.c LED点阵模块独立按键模块矩阵按键模块外部中断模块定时器模块串口通讯模块ADC模块PWM模块 通用函数 包含常用头文件&#xff0c;宏定义&#xff0c;自定义类型&#xff0c;函数工具等。…...

Excel VSTO开发4 -其他事件

版权声明&#xff1a;本文为博主原创文章&#xff0c;转载请在显著位置标明本文出处以及作者网名&#xff0c;未经作者允许不得用于商业目的。 4 其他事件 针对插件的事件主要有Startup、Shutdown这两个事件&#xff0c;在第2节中已经讲解。在开发窗口中&#xff0c;选择对象…...

语音识别数据的采集方法:基本流程数据类型

“人工智能是一种模仿人类功能的产品。数据采集的方法需要针对特定的场景需求。”—–Mark Brayan (澳鹏CEO) 我们一直说&#xff0c;对于一个高质量的人工智能产品离不开高质量的训练数据。对于不同的人工智能我们需要不同的数据对其训练。要采集正确的数据去训练特定的模型才…...

oracle数据库给用户授权DBA权限Oracle查看哪些用户具有DBA权限

oracle数据库给用户授权DBA权限 步骤一&#xff1a;以sysdba身份登录到Oracle数据库 在授予DBA权限之前&#xff0c;我们首先要以sysdba身份登录到Oracle数据库。使用以下命令登录&#xff1a; sqlplus / as sysdba步骤二&#xff1a;创建用户&#xff08;如有用户跳过&#…...

024-从零搭建微服务-系统服务(六)

写在最前 如果这个项目让你有所收获&#xff0c;记得 Star 关注哦&#xff0c;这对我是非常不错的鼓励与支持。 源码地址&#xff08;后端&#xff09;&#xff1a;https://gitee.com/csps/mingyue 源码地址&#xff08;前端&#xff09;&#xff1a;https://gitee.com/csps…...

Arduino驱动TCS3200传感器(颜色传感器篇)

目录 1、传感器特性 2、硬件原理图 3、控制器和传感器连线图 4、驱动程序 TCS3200颜色传感器是一款全彩的颜色检测器,包括了一块TAOS TCS3200RGB感应芯片和4个白色LED灯,TCS3200能在一定的范围内检测和测量几乎所有的可见光。TCS3200有大量的光检测器,每个都有红绿蓝和清…...

基于Matlab实现多个数字水印案例(附上源码+数据集)

数字水印是一种在数字图像或视频中嵌入特定信息的技术&#xff0c;以保护知识产权和防止盗版。在本文中&#xff0c;我们将介绍如何使用Matlab实现数字水印。 文章目录 实现步骤源码数据集下载 实现步骤 首先&#xff0c;我们需要选择一个用于嵌入水印的图像。这可以是原始图像…...

C语言之指针进阶篇(2)

目录 函数指针 函数名和&函数名 函数指针的定义 函数指针的使用 函数指针陷阱 代码1 代码2 注意 函数指针数组定义 函数指针数组的使用 指向函数指针数组的指针 书写 终于军训圆满结束了&#xff0c;首先回顾一下指针进阶篇&#xff08;1&#xff09;主要是…...

C++ 进制转化入门知识(1)

一、什么是进制 进制是一种用来表示数值的系统或方法&#xff0c;它是基于一个特定的基数来工作的。在我们常见的几种进制中&#xff0c;有&#xff1a; 1. **二进制&#xff08;基数 2&#xff09;**&#xff1a; 二进制只用两个数字&#xff1a;0和1。这是计算机内部使用…...

【React】React学习:从初级到高级(四)

React学习[四] 4 应急方案4.1 使用ref引用值4.1.1 给组件添加ref4.1.2 ref和state的不同之处4.1.3 何时使用ref 4.2 使用ref操作DOM4.2.1 获取指向节点的ref4.2.3 使用 ref 回调管理 ref 列表4.2.4 访问另一个组件的DOM节点4.2.5 用 flushSync 同步更新 state 4.3 使用Effect同…...

网站流量来源/企业管理软件管理系统

jQuery UI是一套非常好用的jQuery Tools库&#xff0c;目前已经发布的最新版本是1.8.4。在我自己的使用过程中&#xff0c;总有一些不爽。因为我下载的那个包里默认的主题样式是下图这样的&#xff0c;使用起来很难和具体的网页风格去配合。 一开始&#xff0c;我准备去动手&am…...

免费做手机网站/教育培训机构官网

springboot源码解析(一):启动过程 1、springboot的入口程序 SpringBootApplication public class StartupApplication {public static void main(String[] args) {SpringApplication.run(StartupApplication.class, args);} }当程序开始执行之后&#xff0c;会调用SpringAppl…...

临沂网站/百度推广登录平台网址

1.1.1. 引设计原则 1&#xff0e;原则上表索引的个数不能超过5个&#xff1b; 2&#xff0e;原则上单个字段上的索引不能超过2个&#xff1b; 3&#xff0e;原则上复合索引引用的字段不能超过3个字段&#xff1b; 4&#xff0e;原则上分区表的索引类型全部使用LOCAL索引&am…...

常德网站优化公司/磁力最好用的搜索引擎

端口转发程序已经介绍过rinetd了&#xff0c;但是rinetd不支持域名动态解析功能&#xff0c;如果域名对应的ip发生改变&#xff0c;需要重新才能重新加载新的地址。这里自然找到了端口转发工具socat&#xff0c;它完美的解决了动态dns的问题。且由于工作模式的不同&#xff0c;…...

二级网站建设 管理思路/挖掘关键词工具

TwinCAT Target VisuCE 显示语言动态切换——借助 ——借助 Excel 编辑 XML 文件 Beckhoff 基于 WinCE 平台的 TwinCAT Target VisuCE 支持多种语言显示,工程运行......VISUAL IDENTITYI 视觉识别系统制作:扣子 视视觉觉识识别别系系统统 VISUAVLISIUDAELNTIDITEYNITITYI 视觉识…...

北京建设网站专家/网店推广的作用是什么

把大象装进冰箱需要几步&#xff1f; 其实&#xff0c;如果顺利的话&#xff0c;AS 生成 so 的步骤还是比较清晰的。 但是&#xff0c;随着我升级到了 AS 最新版 「3.3.1 稳定版」 而且我也不再想使用下面两种方法解决 Your project contains C files but it is not using …...