Ajax的跨域处理

最新推荐文章于 2024-08-12 12:09:40 发布
最新推荐文章于 2024-08-12 12:09:40 发布
阅读量226 收藏
点赞数
分类专栏： Ajax跨域 文章标签： Ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37874674/article/details/80355399
版权

  1. 什么是跨域
    概念：只要协议、域名、端口有任何一个不同，都被当作是不同的域。而跨域是指从一个域名的网页去请求另一个域名的资源。例如从www.baidu.com页面请求www.bing.com的资源就被视为跨域。而因为浏览器的同源策略，会对跨域请求进行限制于是就有了跨域问题的出现。同源，指的是协议、域名、端口号都必须完全相同

  2. 跨域的处理

    • 方法一：服务器代理
      因为限制只存在于浏览器中，在其他环境下是不存在的，服务器中中自然也不存在，所以只需要在服务器做好请求代理，请求变成同源的自然就不存在问题了。

    • 方法二：jsonp
      虽然浏览器有同源限制，但是有三个标签是不符合这种限制的<img>的src（获取图片），<link>的href（获取css），<script>的src（获取javascript），这是由他们的自身特性所决定的。而jsonp，就是利用了script标签不限制同源的特点来实现的。
      小例子：百度搜索框(边输入边提示)效果 ↓ ↓ ↓
      百度搜索
      布局
      只需要一个ul即可，其他全部通过代码动态添加

      <body>
<input type="text" id="input" />
<ul id="list"></ul>
</body>

      js代码

      function fn(data) {
    var list = document.getElementById('list');
    var html = '';

    if (data.s.length) {
        list.style.display = 'block';
        for (var i = 0; i < data.s.length; i++) {
            html += '<li>' + data.s[i] + '</li>'
        }
        list.innerHTML = html;
    }
}

window.onload = function () {

    var input = document.getElementById('input');
    var list = document.getElementById('list');

    input.onkeyup = function () {
        //判断输入框不为空时创建script标签，并把请求的接口文件写入src
        if (this.value != '') {
            var script = document.createElement('script');
            script.src = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=' + input.value + '&cb=fn';
            document.body.appendChild(script)
        } else {
            list.style.display = 'none'
        }
    }
}

      效果↓ ↓ ↓
      最终效果
      jsonp是一种常用的跨域方式，目前有很多前端的jsonp请求封装，它们通过通过动态创建script标签来实现，我们可以直接调用。jsonp方式兼容所有的浏览器，但是只支持get请求。

    • 方法三：XHR2（了解即可）
      HTML5提供的XMLHttpRequest Level 2已经实现了跨域访问以及其他的一些新功能
      这需要在远程服务器端添加如下代码

      header('Access-Control-Allow-Origin:*'); //*代表可访问的地址，可以设置指定域名
header('Access-Control-Allow-Methods:POST,GET');

      这样在客户端使用常规的AJAX代码即可。
      因为IE10以下版本的浏览器都不支持，在最近的几年可能不会大量的使用，或许以后会火起来吧

暮秋夜微凉
关注
专栏目录
Ajax跨域访问解决方案
04-01
NULL 博文链接：https://exceptioneye.iteye.com/blog/1405495
ajax跨域
yuhui666666的博客
09-29 124
ajax有跨域：不同项目名即跨域，ajax解决跨域访问的本质就是java回调js 在跨域请求的时候，如果没有解决shrio是拿不到其他系统的登录信息（可以调用对方项目的方法（ip相同项目名不同）），如果ip也不同那么方法都调用不了 1,jsonp回调 2,Java回调js(jsonp本质) A:   回调的函数服务端也要声明 http://blog.csdn.net/yttea/...
【Ajax使用说明】Ajax、Axios以及跨域
最新发布
aaaa_aaab的博客
08-12 1067
XML：可扩展标记语言XML：被设计用来传输和存储数据XML和HTML类似，不同点：HTML中都是预定义标签，XML中没有预定义标签，全是自定义标签，用来表示一些数据现在已被JSON取代。
AJAX 跨域详解
点滴记录
07-29 536
一、什么是 Ajax 跨域问题 同源策略规定，AJAX 请求（XMLHttpRequest）只能发给同源的网址，否则就会出错。所谓的同源策略是指 3 个相同：协议相同、域名相同、端口相同。 比如 http://www.example.com/index.html 这个网址，协议是http ，域名是 www.example.com，端口是默认的 80。如果你在这个网站上使用 AJAX 发送 ht...
ajax 跨域处理
noeal的博客
07-28 1425
一、对跨域的理解： 跨域问题来源于JavaScript的"同源策略"，即只有 协议+主机名+端口号 相同，则允许相互访问；也就是说JavaScript只能访问和操作自己域下的资源，不能访问和操作其他域下的资源。 跨域问题是针对JS和Ajax的，html本身没有跨域问题。 ...
ajax跨域解决方案
m0_71831069的博客
05-15 300
在前端开发中如何解决跨域问题的方案
原生JS实现ajax与ajax的跨域请求实例
11-27
3. **jQuery的AJAX跨域**：jQuery的`$.ajax()`或`$.getJSON()`方法提供了JSONP的支持。只需要设置`dataType`为"jsonp"，jQuery会自动处理回调函数的生成和调用。 ```javascript $.ajax({ url: 'your-url', ...
jquery中ajax处理跨域的三大方式
11-22
jQuery作为一款广泛使用的JavaScript库，提供了多种方式来处理跨域问题。以下是jQuery中处理跨域的三种主要方法： 1. **代理（Proxy）** 代理是绕过同源策略的一种方法。在开发环境中，可以使用像Webpack或...
浅谈Ajax跨域Session和跨域访问
10-25
总结一下，Ajax跨域请求和跨域Session处理都是Web开发中较为复杂的问题，开发者需要理解浏览器同源策略、JSONP和CORS的工作原理，以及Session的存储和管理机制。在实际开发中，建议使用CORS来实现更安全、功能更全面...
Springmvc ajax跨域请求处理方法实例详解
08-29
SpringMVC AJAX 跨域请求处理方法实例详解 本文主要介绍了 SpringMVC AJAX 跨域请求处理方法实例详解，解决了 AJAX 跨域请求问题。下面是详细的知识点解释： 一、什么是 AJAX 跨域请求？ AJAX 跨域请求是指在不同...
Ajax 跨域
热爱编程，热爱技术
04-28 246
转自https://www.cnblogs.com/2mei/p/9251868.html
AJAX跨域
辛聪明的博客
08-17 1844
一、什么是AJAX跨域问题、产生AJAX跨域问题的原因 什么是AJAX跨域问题 简单来说，就是前端调用后端服务接口时 如果服务接口不是同一个域，就会产生跨域问题 AJAX跨域场景 前后端分离、服务化的开发模式 前后端开发独立，前端需要大量调用后端接口的场景 只要后端接口不是同一个域，就会产生跨域问题 跨域问题很普遍，解决跨域问题也很重要 AJAX跨域原因 浏览器限制：浏览器安全校验限制 跨域（协议、域名、端口任何一个不一样都会认为是跨域） XHR（XMLHttpRequest）请求 二、
AJAX跨域问题解决方案
weixin_59528719的博客
02-22 1970
跨域访问的资源、跨域访问
Ajax详解（涵盖跨域问题解决）
qq_44741577的博客
03-07 879
ajax 全名 async javascript and XML是前后台交互的能力也就是我们客户端给服务端发送消息的工具，以及接受响应的工具是一个 默认异步执行机制的功能。
AJAX跨域问题
YQ转战JAVA学习的小白
07-15 89
AJAX跨域问题 跨域介绍 什么是跨域 跨到不同的域名（服务器）之间的相互的资源访问。 当协议、域名、端口号，任一一个不相同，即他们是不同域。 正常情况加，因为浏览器安全问题，不同域资源是不允许访问的。 解决方案 什么情况下会使用跨域 一般情况下会在自己内部的工程中出现跨域情况 三种解决方案： 代理方案：前端页面访问本地的服务器，本地的服务器访问其他域的资源，他是服务器端的跨域问题解决。 jsonp方案：Script元素有开放策略，网也可以得到从其他来源动态产生的JSON资料。而这种模式就是所
AJAX跨域问题及解决方案
忆亦何为的博客
10-16 8648
首先建两个服务器，服务器1：HTTP为8080端口，JMX端口为1099，部署ajax1模块，服务器2：HTTP为8081端口，JMX端口为1098，部署ajax2模块。是可以加载Servlet的，也就是说到时候响应一段字符串拼接的调用函数，参数是json类型，到时候这个json就是一个业务结果，传过来，让前端调用。所以，从安全的角度来讲，同源策略是有利于保护网站信息的。现在大部分系统都是大型应用，分布式的微服务的，有一些情况我们是需要使用ajax进行跨域访问的，所以就需要解决跨域的问题。
jQuery AJAX跨域处理三大方案详解
jQuery的Ajax处理跨域可以通过代理、xhr2和JSONP这三种不同的技术实现，选择哪种方法取决于具体的环境和需求。在实际开发中，开发者需要根据浏览器兼容性、安全性以及数据交互类型等因素来灵活选择合适的跨域解决...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值