AJAX跨域问题解决方案

已于 2024-02-22 16:20:56 修改
阅读量699 收藏 12
点赞数 25
分类专栏： Ajax 文章标签： ajax 前端 javascript
于 2024-02-22 16:18:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_59528719/article/details/136235871
版权

目录

一、方案1：设置响应头

代码实现

二、方案2：使用jsonp

代码实现

三、方案3：使用jQuery封装的jsonp

四、方案4：代理机制（httpclient）

代码实现 (只展示发送方代码了)

一、方案1：设置响应头

核心原理：跨域访问的资源允许你跨域访问。

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

代码实现

 对应端口号8080的ajax.html 向 端口号8081的Servlet 发送跨域请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax跨域访问</title>
</head>
<body>
<script type="text/javascript">
    window.onload = () => {
        document.getElementById("btn").onclick = () => {
            // 发送ajax的跨域请求
            // 1. 创建核心对象
            let xmlHttpRequest = new XMLHttpRequest();
            // 2. 注册回调函数
            xmlHttpRequest.onreadystatechange = () => {
                if (xmlHttpRequest.readyState == 4) {
                    if (xmlHttpRequest.status >= 200 && xmlHttpRequest.status < 300) {
                        document.getElementById("mydiv").innerHTML = xmlHttpRequest.responseText
                    }
                }
            }
            // 3. 开启通道
            xmlHttpRequest.open("GET", "http://localhost:8081/b/hello", true)
            // 4. 发送请求
            xmlHttpRequest.send()
        }
    }

</script>
<button id="btn">发送ajax跨域请求</button>
<div id="mydiv"></div>
</body>
</html>
...

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.IOException;

@WebServlet("/hello")
public class HelloServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        // 设置响应头，允许ajax跨域请求
        //response.setHeader("Access-Control-Allow-Origin", "http://localhost:8080");
        response.setHeader("Access-Control-Allow-Origin", "*");
        // 响应
        response.getWriter().print("hello ajax!!!");
        
    }
}

二、方案2：使用jsonp

- jsonp不是一个真正的ajax请求。只不过可以完成ajax的局部刷新效果。可以说jsonp是一种类ajax请求的机制。
- jsonp不是ajax请求，但是可以完成局部刷新的效果，并且可以解决跨域问题。
- 注意：jsonp解决跨域的时候，只支持GET请求。不支持post请求。

代码实现

  对应端口号8080的ajax.html 向 端口号8081的Servlet 发送跨域请求

<!--使用script标签可以加载js文件，这个可以跨域吗？可以-->
<script type="text/javascript" src="http://localhost:8081/b/my.js"></script>

<!--那么试想可以请求一个servlet吗？ 是可以的-->
<script type="text/javascript" src="http://localhost:8081/b/jsonp1"></script>

<!--超链接也可以跨域呀？为什么不用呢？因为超链接点击之后会跳转页面，无法做到页面局部刷新效果。-->
<!--script标签是可以跨域的。src属性可以是xxx.js文件，那这个路径可以是一个servlet路径吗？可以-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jsonp跨域</title>
</head>
<body>

<!--<script type="text/javascript" src="http://localhost:8081/b/jsonp2?fun=sayHello"></script>-->

<script type="text/javascript">
  // 自定义的函数
  function sayHello(data){ // data是一个json：{"username" : "lucy"}
    document.getElementById("mydiv").innerHTML = data.username
  }

  window.onload = () => {
    document.getElementById("btn").onclick = () => {
      // 加载script元素
      // 创建script元素对象
      const htmlScriptElement = document.createElement("script");
      // 设置script的type属性
      htmlScriptElement.type = "text/javascript"
      // 设置script的src属性
      htmlScriptElement.src = "http://localhost:8081/b/jsonp2?fun=sayHello"
      // 将script对象添加到body标签中（这一步就是加载script）
      document.getElementsByTagName("body")[0].appendChild(htmlScriptElement)
        //把它(htmlScriptElement)当作body的孩子追加进去
    }
  }
</script>

<button id="btn">jsonp解决跨域问题，达到ajax局部刷新的效果</button>

<div id="mydiv"></div>

</body>
</html>

...

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.IOException;

@WebServlet("/jsonp2")
public class JSONPServlet2 extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        // 获取函数名
        String fun = request.getParameter("fun");
        // 响应js代码
        response.getWriter().print(fun + "({\"username\" : \"lucy\"})");
    }
}

三、方案3：使用jQuery封装的jsonp

jQuery库，已经对jsonp进行了封装。大家可以直接拿来用。

jQuery中的jsonp其实就是方案2的高度封装，底层原理完全相同。

核心代码：

$.ajax({
    type : "GET",
    url : "跨域的url",
    dataType : "jsonp", // 指定数据类型
    jsonp : "fun", // 指定参数名（不设置的时候，默认是："callback"）
    jsonpCallback : "sayHello" // 指定回调函数的名字
                               // （不设置的时候，jQuery会自动生成一个随机的回调函数，
                               //并且这个回调函数还会自动调用success的回调函数。）
})

四、方案4：代理机制（httpclient）

代理总的意思 就是通过一个java程序去代理发送请求

使用Java程序怎么去发送get/post请求呢？【GET和POST请求就是HTTP请求。】

  • 第一种方案：使用JDK内置的API（java.net.URL.....），这些API是可以发送HTTP请求的。

  • 第二种方案：使用第三方的开源组件，比如：apache的httpclient组件。（httpclient组件是开源免费的，可以直接用）

代码实现 (只展示请求方代码了)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用代理机制完成ajax跨域访问</title>
</head>
<body>
<script type="text/javascript">
  
    window.onload = () => {
        document.getElementById("btn").onclick = () => {
            const xmlHttpRequest = new XMLHttpRequest(); 
            xmlHttpRequest.onreadystatechange = () => {
                if (xmlHttpRequest.readyState == 4) {
                    if (xmlHttpRequest.status >= 200 && xmlHttpRequest.status < 300) {
                        document.getElementById("mydiv").innerHTML = xmlHttpRequest.responseText
                    }
                }
            }
            // 3.开启通道
            xmlHttpRequest.open("GET", "/a/proxy", true)
            // 4.发送请求
            xmlHttpRequest.send()
        }
    }
</script>
<button id="btn">使用代理机制解决ajax跨域访问</button>
<div id="mydiv"></div>
</body>
</html>

代理Java程序

...


import org.apache.http.HttpEntity;
import org.apache.http.HttpResponse;
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;


@WebServlet("/proxy")
public class ProxyServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        // 通过httpclient组件，发送HTTP GET请求，访问 TargetServlet
        HttpGet httpGet = new HttpGet("http://localhost:8081/b/target");
        httpGet.setHeader("Content-Type", "application/x-www-form-urlencoded");
        CloseableHttpClient httpClient = HttpClients.createDefault();
        HttpResponse response1 = httpClient.execute(httpGet);
        HttpEntity entity = response1.getEntity();
        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);
        }
        reader.close();
        httpClient.close();
        // 从 被请求方 响应回来的数据
        response.getWriter().print(responseSB);
    }
}

欢迎大家点赞+指点评论~

你好鸭达可
关注
  • 25
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
AJAX请求及解决跨域问题
m0_59092234的博客
07-30 700
AJAX其实就是异步的js和xml通过ajax可以在浏览器中发送异步请求。最大优势无刷新获取数据优点1.可以无需刷新页面与服务器进行通信2.允许根据用户事件更新部分页面内容当然也存在其缺点问题比如跨域问题等！...
Ajax请求跨域问题及其解决方案
qq_51546137的博客
03-02 2738
我们的传统请求，比如说超链接、form表单，js代码以及直接在浏览器地址栏上写请求地址都不存在跨域问题，能够从一个网站访问另外一个网站，但是我们的Ajax请求会存在跨域问题，其主要是为了解决跨域访问带来的安全隐患。因为浏览器中有一个内置对象XMLHTTPRequest。这个对象是每个网站不共享的，因此不能直接跨域，这样设计是合理的，因为一旦共享该对象，这个对象有一个responseTest属性，那么你的网站就能通过该对象的这个属性拿到我的网站里面的信息，这是不安全的，因此Ajax不能直接跨域。
ajax跨域请求完整解决方案
buqizi4272的博客
08-05 4870
这里写自定义目录标题ajax跨域请求完整解决方案简介跨域请求解决方案JSONPCORS简单请求：请求方法是以下三种方法之一：HTTP的头信息不超出以下几种字段：如果上述两个条件没有同时满足则属于非简单请求被调用方代码实现nginx实现隐藏跨域 ajax跨域请求完整解决方案 简介 在发送Ajax请求的时候，由于浏览器的同源策略，会对跨域请求进行检测。 什么情况属于跨域请求： 协议不同 ，例如htt...
ajax请求携带自定义请求头header（跨域和同域）
爱吃红豆的猫
03-15 6614
1.ajax请求时是不会自动带上cookie的，要是想让他带上的话，必须设置withCredential为true。
AJAX跨域问题解决方案详解
jh035512的博客
11-13 2298
跨域简单的说，就是从一个域名的网页去访问另一个域名网页的资源。通过超链接或者form表单提交或者window.location.href的方式进行跨域是不存在问题的。但在一个域名的网页中的一段js代码发送ajax请求去访问另一个域名中的资源，由于同源策略的存在导致无法跨域访问，那么ajax就存在这种跨域问题。关于同源问题，我们判断同源从三个要素着手：协议、域名、端口号。如果协议一致，域名一致，端口号一致，三个要素都一致，才是同源，其它一律都是不同源接下来我们来谈谈ajax中存在的跨域问题如何解决。
PHP Ajax跨域问题解决方案代码实例
01-19
本文通过设置Access-Control-Allow-Origin来实现跨域。 例如：客户端的域名是client.runoob.com，而请求的域名是server.runoob.com。 如果直接使用ajax访问，会有以下错误： XMLHttpRequest cannot load ...
详解ajax跨域问题解决方案
10-19
主要介绍了详解ajax跨域问题解决方案，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Ajax跨域问题 解决方案
11-09
关于跨域，有N种类型，本文只专注于ajax请求跨域(,ajax跨域只是...o表现(整理了一些遇到的问题以及解决方案) 如何解决ajax跨域 oJSONP方式 oCORS方式 o代理请求方式 如何分析ajax跨域 ohttp抓包的分析 o一些示例
有关Ajax跨域问题的两种解决方法
12-11
Ajax跨域是前端开发中常见的问题，本文描述了以Google浏览器Chrome作为客户端和以Tomcat作为Web服务器的情况下的解决办法。 问题现象 当出现跨域访问的时候ajax通常会报类似如下错误： XMLHttpRequest cannot load ...
AJAX跨域问题及解决方案
weixin_45832694的博客
10-16 7804
首先建两个服务器，服务器1：HTTP为8080端口，JMX端口为1099，部署ajax1模块，服务器2：HTTP为8081端口，JMX端口为1098，部署ajax2模块。是可以加载Servlet的，也就是说到时候响应一段字符串拼接的调用函数，参数是json类型，到时候这个json就是一个业务结果，传过来，让前端调用。所以，从安全的角度来讲，同源策略是有利于保护网站信息的。现在大部分系统都是大型应用，分布式的微服务的，有一些情况我们是需要使用ajax进行跨域访问的，所以就需要解决跨域的问题。
ajax请求中，4种解决跨域问题的方法——自用笔记
qq_39123467的博客
10-20 2661
4种解决跨域问题的方法——自用笔记
Ajax跨域访问抱错 原因：CORS 头缺少 ‘Access-Control-Allow-Origin‘
yangfan5314的专栏
02-01 2433
当Ajax跨域访问，明明已经获取到访问的json数据但是浏览器报错CORS 头缺少 ‘Access-Control-Allow-Origin’ ； 解决方式一： 过滤器 package com.xet.filter; import java.io.IOException; import javax.servlet.Filter; import javax.servlet.FilterChain; import javax.servlet.ServletException; import javax.ser
ajax跨域问题
山海也有意难平
10-11 4882
跨域问题简单的说就是前台请求一个后台链接，发送请求的前台与后台的地址不在同一个域下，就会产生跨域问题。这里所指的域包括协议、IP地址、端口等。 1.跨域访问安全问题 后端代码： package cn.qs.controller; import java.util.LinkedHashMap; import java.util.Map; import org.apache.commons.collections.MapUtils; import org.springframework.web.bi
【AJAX】AJAX的跨域问题
qq_63691275的博客
12-26 2198
通过超链接、form表单提交、window.location.href、document.location.href、script标签、img标签等方式进行跨域是不存在问题的。但在一个域名的网页中的一段js代码发送AJAX请求去访问另一个域名中的资源，由于同源策略的存在导致无法跨域访问，AJAX就存在这种跨域问题。
ajax 跨域 headers JavaScript ajax 跨域请求 +设置headers 实践
weixin_30745641的博客
01-25 919
解决跨域调用服务并设置headers 主要的解决方法需要通过服务器端设置响应头、正确响应options请求，正确设置 JavaScript端需要设置的headers信息 方能实现。 此处手札 供后人参考~ 1.第一步 服务端设置响应头 header('Access-Control-Allow-Origin:*'); //支持全域名访问，不安全，部署后需要固定限制为客户端网址 header...
ajax跨域的解决办法
m0_57663797的博客
08-19 834
跨域 跨域产生的原因 当你由一个地址 http://localhost:5500 向另外一个服务器地址 http://127.0.0.1:3000 发送请求的时候，由于 协议名称、域名、端口 中的某一项不一致造成的访问接口失败，就是跨域。 Access to XMLHttpRequest at ‘http://localhost:3000/users’ from origin ‘http://127.0.0.1:5500’ has been blocked by CORS policy: No ‘Acc
Ajax跨域问题
m0_54759967的博客
05-17 87
1.跨域介绍 跨域它是不同的域名(服务器)之间的相互的资源的访问，因为受到浏览器的同源策略保护不能正常访问。 什么是同源策略？ 同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。 Ajax跨域问题 1.问题：如果使用项目2中的页面访问项目1的资
Ajax请求中的跨域问题及其解决方案
最新发布
欢迎阅读我的博客
11-09 1318
Ajax请求中的跨域问题及其解决方案
ajax资源跨域问题解决方法
05-25
Ajax 跨域问题是由于浏览器的同源策略所导致的。同源策略是浏览器的一种安全策略，限制了来自不同源的脚本对当前文档的访问。由于 Ajax 是基于 JavaScript 的，因此也会受到同源策略的限制。 解决 Ajax 跨域问题的方法有以下几种： 1. JSONP：利用 script 标签的 src 属性没有跨域限制的漏洞，可以通过动态创建 script 标签来实现跨域请求。 2. CORS（跨域资源共享）：在服务端设置 Access-Control-Allow-Origin 头信息，来允许跨域请求。 3. 代理：利用服务器端的代理来转发请求，将跨域请求变为同域请求。 4. WebSocket：WebSocket 协议没有同源限制，可以直接进行跨域请求。 需要根据实际情况选择合适的方法来解决 Ajax 跨域问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值