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请求的跨域问题的一些方法。根据您的具体需求和架构，您可以选择适合您情况的方法。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/122824.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

HTML emoji整理 表情符号

HTML emoji整理 表情符号

<!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><title>测试</title></head><body><div style"font-size: 50px;">&#128276</div><script>let count 0d…
阅读更多...
Yolov5的tensorRT加速(python)

Yolov5的tensorRT加速(python)

地址&#xff1a;https://github.com/wang-xinyu/tensorrtx/tree/master/yolov5 下载yolov5代码 方法一&#xff1a;使用torch2trt 安装torch2trt与tensorRT 参考博客&#xff1a;https://blog.csdn.net/dou3516/article/details/124538557 先从github拉取torch2trt源码 ht…
阅读更多...
代码随想录算法训练营第二十四天｜理论基础 77. 组合

代码随想录算法训练营第二十四天｜理论基础 77. 组合

理论基础 其实在讲解二叉树的时候&#xff0c;就给大家介绍过回溯&#xff0c;这次正式开启回溯算法&#xff0c;大家可以先看视频&#xff0c;对回溯算法有一个整体的了解。 题目链接/文章讲解&#xff1a;代码随想录 视频讲解&#xff1a;带你学透回溯算法&#xff08;理论篇…
阅读更多...
函数栈帧(详解)

函数栈帧(详解)

一、前言&#xff1a; 环境&#xff1a;X86Vs2013 我们C语言学习过程中是否遇到过如下问题或者疑惑&#xff1a; 1、局部变量是如何创建的&#xff1f; 2、为什么局部变量的值是随机值&#xff1f; 3、函数是怎么传参的&#xff1f;传参的顺序是怎样的&#xff1f; 4、形…
阅读更多...
HarmonyOS/OpenHarmony(Stage模型）应用开发单一手势（三）

HarmonyOS/OpenHarmony(Stage模型）应用开发单一手势（三）

五、旋转手势&#xff08;RotationGesture&#xff09; RotationGesture(value?:{fingers?:number; angle?:number}) 旋转手势用于触发旋转手势事件&#xff0c;触发旋转手势的最少手指数量为2指&#xff0c;最大为5指&#xff0c;最小改变度数为1度&#xff0c;拥有两个可…
阅读更多...
3D异常检测论文笔记 | Shape-Guided Dual-Memory Learning for 3D Anomaly Detection

3D异常检测论文笔记 | Shape-Guided Dual-Memory Learning for 3D Anomaly Detection

文章目录 摘要一、介绍三、方法3.1. 形状引导专家学习3.2. Shape-Guided推理 摘要 我们提出了一个形状引导的专家学习框架来解决无监督的三维异常检测问题。我们的方法是建立在两个专门的专家模型的有效性和他们的协同从颜色和形状模态定位异常区域。第一个专家利用几何信息通…
阅读更多...
机器学习笔记：node2vec（论文笔记：node2vec: Scalable Feature Learning for Networks）

机器学习笔记：node2vec（论文笔记：node2vec: Scalable Feature Learning for Networks）

2016 KDD 1 intro 利用graph上的节点相似性&#xff0c;对这些节点进行embedding 同质性&#xff1a;节点和其周围节点的embedding比较相似 蓝色节点和其周围的节点结构等价性 结构相近的点embedding相近 比如蓝色节点&#xff0c;都处于多个簇的连接处 2 随机游走 2.1 介绍…
阅读更多...
『C语言进阶』指针进阶(一)

『C语言进阶』指针进阶(一)

&#x1f525;博客主页&#xff1a; 小羊失眠啦 &#x1f516;系列专栏&#xff1a; C语言 &#x1f325;️每日语录&#xff1a;无论你怎么选&#xff0c;都难免会有遗憾。 ❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 前言 在C语言初阶中&#xff0c;我们对指针有了一定的…
阅读更多...
《机器人学一(Robotics(1))》_台大林沛群 第 5 周【机械手臂 轨迹规划】 Quiz 5

《机器人学一(Robotics(1))》_台大林沛群 第 5 周【机械手臂 轨迹规划】 Quiz 5

我又行了&#xff01;&#x1f923; 求解的 位置 可能会有 变动&#xff0c;根据求得的A填写相应值即可。注意看题目。 coursera链接 文章目录 第1题 Cartesian space求解 题1-3 的 Python 代码 第2题第3题第4题 Joint space求解 题4-6 的 Python 代码 第5题第6题其它可参考代…
阅读更多...
编写软件检测报告有哪些注意事项?软件检测报告获取

编写软件检测报告有哪些注意事项?软件检测报告获取

软件检测报告是指把测试的过程和结果写成文档&#xff0c;对发现的问题和缺陷进行分析&#xff0c;为纠正软件的存在的质量问题提供依据&#xff0c;同时为软件验收和交付打下基础。 一、编写软件检测报告的注意事项 1、报告的结构要合理和清晰。应该按照一定的逻辑顺序&…
阅读更多...
解决 Spring Boot 与 springfox 的 NullPointerException 问题

解决 Spring Boot 与 springfox 的 NullPointerException 问题

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…
阅读更多...
MySQL误删数据 回滚

MySQL误删数据 回滚

前言 生产环境数据库不允许删除表&#xff0c;可以将表修改成 XXX_to_delete 如果误删简单数据&#xff0c;可以考虑使用binlog恢复 一、查看命令 1.查看binlog是否开启 show variables like log_bin;切换到MySQL安装目录,查看mysqlbinlog日志文件 2.查看所有 binlog 日志…
阅读更多...
Ansible学习笔记12

Ansible学习笔记12

playbook&#xff1a; playbook&#xff08;剧本&#xff09;&#xff1a;是ansible用于配置、部署和管理被控节点的剧本&#xff0c;用于Ansible操作的编排。 使用的是yaml格式&#xff0c;&#xff08;saltstack、elk、docker、docker-compose、k8s都会使用到yaml格式。&am…
阅读更多...
【c++ debug】cmake编译报错 No such file or directory

【c++ debug】cmake编译报错 No such file or directory

1. 报错&#xff1a;error while loading shared libraries: libprotoc.so.24: cannot open shared object file: No such file or directory 问题原因&#xff1a;找不到动态库 解决方法&#xff1a;添加动态库路径 export LD_LIBRARY_PATH$LD_LIBRARY_PATH:/your/protobuf/l…
阅读更多...
【C语言】入门——结构体

【C语言】入门——结构体

目录 结构体 为什么有结构体&#xff1f; 1.结构体的声明 1.2结构体变量的访问和初始化 2.结构体成员的访问 结构体 struct 结构体类型 {//相关属性; }结构体变量; 结构体和数组不同&#xff0c;同一类型的数据的集合是数组&#xff1b; 结构体是多种类型的数据的集合&…
阅读更多...
【Java Web】统一处理异常

【Java Web】统一处理异常

一个异常处理的ControllerAdvice类。它用于处理Controller注解的控制器中发生的异常。 具体代码功能如下&#xff1a; 导入相关类和方法。声明一个Logger对象&#xff0c;用于日志记录。使用ExceptionHandler注解标记handleException方法&#xff0c;用于处理所有异常。 -嘛在…
阅读更多...
C++——shared_ptr：make_shared的用处，与shared_ptr直接构造的区别

C++——shared_ptr：make_shared的用处，与shared_ptr直接构造的区别

shared_ptr shared_ptr继承自__shared_ptr&#xff0c;其中有两个对象&#xff0c;一个是指向资源的指针&#xff0c;一个是控制块&#xff0c;指向一个引用计数对象。控制块中存储了强引用和弱引用的计数&#xff0c;强引用Uses代表shared_ptr对象的引用计数&#xff0c;弱引…
阅读更多...
每日一题 1921. 消灭怪物的最大数量

每日一题 1921. 消灭怪物的最大数量

难度&#xff1a;中等 思路&#xff1a; 已知速度和距离&#xff0c;可求时间必定先消灭时间最短的怪物求得时间数组排序&#xff0c;只要在第 i 秒时&#xff0c;time[i] > i &#xff0c;那么就可以消灭第 i 个怪物 代码&#xff1a; class Solution:def eliminateMax…
阅读更多...
Leetcode刷题笔记--Hot41-50

Leetcode刷题笔记--Hot41-50

1--二叉树的层序遍历&#xff08;102&#xff09; 主要思路&#xff1a; 经典广度优先搜索&#xff0c;基于队列&#xff1b; 对于本题需要将同一层的节点放在一个数组中&#xff0c;因此遍历的时候需要用一个变量 nums 来记录当前层的节点数&#xff0c;即 nums 等于队列元素的…
阅读更多...
存储过程报Illegal mix of collations错误的解决方法

存储过程报Illegal mix of collations错误的解决方法

CREATE PROCEDURE maxAgeStudent(IN _gender CHAR) BEGINDECLARE maxage INT DEFAULT 0;SELECT max(age) INTO maxage FROM student where gender _gender;SELECT * from student WHERE age maxage and gender _gender; END; 在调用的时候 call maxAgeStudent(1) 产生了报…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023