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

news2024/11/27 8:34:19

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 {

    @Override
    protected 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.coloradmin.cn/o/979753.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

VIRTIO-BLK代码分析（2）VIRTIO驱动分析

VIRTIO-BLK代码分析（2）VIRTIO驱动分析

QEMU模拟的VIRTIO设备同时也是PCIE设备&#xff0c;Guest中VIRTIO PCIE驱动与之匹配&#xff0c;根据设备驱动模型&#xff0c;最终触发probe函数virtio_pci_probe()。该probe函数使能PCIE设备&#xff0c;并注册VIRTIO设备&#xff0c;并与VIRTIO-BLK匹配&#xff0c;触发VIRT…
阅读更多...
手把手教你搭建园林园艺小程序商城

手把手教你搭建园林园艺小程序商城

现如今&#xff0c;随着互联网的快速发展&#xff0c;小程序成为了企业和个人展示产品和服务的新方式。在园林园艺行业&#xff0c;构建一个园林园艺小程序能够更好地推广和销售自己的产品和服务。那么&#xff0c;如何构建一个园林园艺小程序呢&#xff1f;下面我们来详细介绍…
阅读更多...
conda和Python的虚拟环境如何结合使用，以及二者之间到底有什么区别？

conda和Python的虚拟环境如何结合使用，以及二者之间到底有什么区别？

问题描述 今天在复现streamlit的代码时&#xff08;参考Streamlit 讲解专栏&#xff08;一&#xff09;&#xff1a;安装以及初步应用&#xff09;&#xff0c;根据这篇博文指导&#xff0c;要先用以下指令创建一个虚拟环境&#xff1a; # 创建虚拟环境&#xff08;使用venv&a…
阅读更多...
游戏软件报错d3dx9_43.dll丢失怎么解决？这5个解决方法可以修复

游戏软件报错d3dx9_43.dll丢失怎么解决？这5个解决方法可以修复

我想和大家分享一个关于电脑问题的话题——d3dx9_43.dll丢失怎么解决。这个话题对于很多使用电脑的朋友来说&#xff0c;可能是一个非常棘手的问题。d3dx9_43.dll是 DirectX中非常重要的一部分&#xff0c;许多游戏和应用程序都需要它来正常运行。如果丢失了这个文件&#xff0…
阅读更多...
RDMA 相关bug记录

RDMA 相关bug记录

对于 Client 来讲&#xff0c;setupConnection 中的 cm_id 应该是本地的&#xff0c;意味着后续 create pd \ cq \ qp 等等传入的 cm_id 都是本地 id。但是对于 Server 来讲&#xff0c;收到 client 的链接请求时将 client 的 cm_id 传入 setupConnection&#xff0c;意味着后续…
阅读更多...
RunnerGo怎么做性能测试

RunnerGo怎么做性能测试

RunnerGo是一个功能强大&#xff0c;使用简单的性能测试平台&#xff0c;它基于go语言开发&#xff0c;支持接口管理、自动化测试、性能测试等功能。 RunnerGo有什么特点 支持并发模式、错误率模式、阶梯模式、每秒请求数模式、响应时间模式等多种压测模式&#xff0c;支持自…
阅读更多...
软考高级之系统架构师之项目管理

软考高级之系统架构师之项目管理

今天是2023年09月06日&#xff0c;距离软考高级只有58天&#xff0c;加油&#xff01; 概念 临时性&#xff1a;是指每一个项目都有一个明确的开始时间和结束时间&#xff0c;临时性也指项目是一次性的。 风险 风险具有以下特性&#xff1a;客观性、偶然性、相对性、社会性…
阅读更多...
【探索Linux】—— 强大的命令行工具 P.8（进程优先级、环境变量）

【探索Linux】—— 强大的命令行工具 P.8（进程优先级、环境变量）

阅读导航 前言一、进程优先级1. 优先级概念2. Linux查看系统进程3. PRI&#xff08;Priority&#xff09;和NI&#xff08;Nice&#xff09; 二、环境变量1. 概念2. 查看环境变量方法3. 环境变量的组织方式4.通过代码获取环境变量5. 环境变量的特点 总结温馨提示 前言 前面我们…
阅读更多...
MySQL主从复制读写分离

MySQL主从复制读写分离

读写分离 读写分离&#xff0c;基本的原理是让主数据库处理事务性增、改、删操作&#xff08;INSERT、UPDATE、DELETE&#xff09;&#xff0c;而从数据库处理SELECT查询操作。数据库复制被用来把事务性操作导致的变更同步到集群中的从数据库 读写分离的好处 因为数据库的“写…
阅读更多...
在Linux系统启动java程序（jar包）

在Linux系统启动java程序（jar包）

文章目录 1. mvn install生成jar包2. 利用ftp工具将jar包上传到linux服务器3. 在linux服务器上启动jar包3.1 直接启动jar包3.2 后台启动jar包3.3 后台不挂断启动jar包3.4 后台不挂断启动jar包并输出日志到指定文件3.5 其他 1. mvn install生成jar包 2. 利用ftp工具将jar包上传到…
阅读更多...
小程序中如何查看会员的积分和变更记录

小程序中如何查看会员的积分和变更记录

​积分是会员卡的一个重要功能&#xff0c;可以用于激励会员消费和提升用户粘性。在小程序中&#xff0c;商家可以方便地查看会员卡的积分和变更记录&#xff0c;以便更好地了解会员的消费行为和积分变动情况。下面将介绍如何在小程序中查看会员卡的积分和变更记录。 1. 找到指…
阅读更多...
Android Ble蓝牙App（七）扫描过滤

Android Ble蓝牙App（七）扫描过滤

Ble蓝牙App&#xff08;七&#xff09;扫描过滤 前言目录正文一、增加菜单二、使用MMKV① 添加依赖② 封装MMKV③ 使用MMKV 三、过滤空设备名四、过滤Mac地址五、过滤RSSI六、源码 前言 在上一篇文章中了解了MTU的相关知识以及对于设备操作信息的展示&#xff0c;本篇文章中将增…
阅读更多...
uniapp 在 onLoad 事件中 this.$refs 娶不到的问题

uniapp 在 onLoad 事件中 this.$refs 娶不到的问题

现象 本人想在主页面加载的时候调用子组件的方法。示例代码如下&#xff1a; 运行&#xff0c;发现 this.$refs 取不到。如下图所示&#xff1a; 解决方法&#xff0c;把onLoad 换为 onReady 就可以了。
阅读更多...
存储过程报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) 产生了报…
阅读更多...
MySQL数据库的增删改查（进阶）

MySQL数据库的增删改查（进阶）

目录 数据库约束 约束类型 NULL约束 UNIQUE&#xff1a;唯一约束 DEFAULT&#xff1a;默认值约束 PRIMARY KEY&#xff1a;主键约束 FOREIGN KEY&#xff1a;外键约束 表的设计 一对一关系 一对多关系 多对多关系 查询 聚合查询 聚合函数 GROUP BY子句 HAVING …
阅读更多...
LeetCode 1123. 最深叶节点的最近公共祖先：DFS

LeetCode 1123. 最深叶节点的最近公共祖先：DFS

【LetMeFly】1123.最深叶节点的最近公共祖先 力扣题目链接&#xff1a;https://leetcode.cn/problems/lowest-common-ancestor-of-deepest-leaves/ 给你一个有根节点 root 的二叉树&#xff0c;返回它 最深的叶节点的最近公共祖先 。 回想一下&#xff1a; 叶节点 是二叉树…
阅读更多...
2023年09月在线IDE流行度最新排名

2023年09月在线IDE流行度最新排名

点击查看最新在线IDE流行度最新排名&#xff08;每月更新&#xff09; 2023年09月在线IDE流行度最新排名 TOP 在线IDE排名是通过分析在线ide名称在谷歌上被搜索的频率而创建的 在线IDE被搜索的次数越多&#xff0c;人们就会认为它越受欢迎。原始数据来自谷歌Trends 如果您相…
阅读更多...
如何创建专栏

如何创建专栏

前言 今天&#xff0c;有一个粉丝问我该如何创建一个专栏&#xff0c;好的&#xff0c;安排上&#xff01; 什么是专栏&#xff1f; 专栏是用户写的一部分博客的分类。可以理解为&#xff1a; 1.我有一些文件&#xff08;文件代指博客&#xff09;&#xff0c;于是我创建了一…
阅读更多...
十六、MySQL常用函数有哪些？

十六、MySQL常用函数有哪些？

1、函数 说到函数&#xff0c;就必须知道其本质是什么&#xff0c;在MySQL中&#xff0c;函数是指一段可以直接被另一段程序调用的程序或代码。 2、字符串函数 &#xff08;1&#xff09;函数 &#xff08;2&#xff09;字符串连接函数 字符串连接函数&#xff1a; select c…
阅读更多...
第三章 LInux多线程开发 3.1-3.5线程创建 终止 分离

第三章 LInux多线程开发 3.1-3.5线程创建 终止 分离

创建线程&#xff1a;&#xff08;好好记住 可能会叫写代码&#xff09; 一般情况下,main函数所在的线程我们称之为主线程&#xff08;main线程&#xff09;&#xff0c;其余创建的线程称之为子线程。 程序中默认只有一个进程&#xff0c;fork()函数调用&#xff0c;2进行 程序…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023