AJAX的跨域问题解决方案

目录
  • 跨域的概述
    • 区别同源与不同源
    • 同源策略有什么用？
  • AJAX跨域解决方案
    • 方案一、设置响应头
    • 方案二、jsonp
    • 方案三、代理机制（httpclient）
  • 总结

跨域的概述

  1. 跨域是指从一个域名的网页去请求另一个域名的资源。比如从百度（https://baidu.com）页面去请求京东（https://www.jd.com）的资源。
  2. 通过超链接、form表单提交、window.location.href、document.location.href、script标签、img标签等方式进行跨域是不存在问题的。但在一个域名的网页中的一段js代码发送AJAX请求去访问另一个域名中的资源，由于同源策略的存在导致无法跨域访问，AJAX就存在这种跨域问题。
  3. 同源策略是指一段脚本只能读取来自同一来源的窗口和文档的属性，同源就是协议、域名和端口都相同。

下面是使用AJAX发送请求跨域访问资源出现的问题：请求的资源上不存在“访问控制允许源”标头：（就是被同源策略阻止了）

区别同源与不同源

区分同源和不同源的三要素：

协议域名端口

协议一致，域名一致，端口号一致，三要素都要一致，才是同源，其它一律都是不同源。

同源策略有什么用？

如果你刚刚在网银输入账号密码，查看了自己还有一万 元块钱，紧接着访问一些不规矩的网站，这个网站可以访问刚刚的网银站点，并且获取账号密码，那后果可想而知。所以，从安全的角度来讲，同源策略是有利于保护网站信息的。

AJAX跨域解决方案

有一些情况下，我们是需要使用AJAX进行跨域访问的。比如某公司的A页面（a.aresourse.com）有可能需要获取B页面（b.bresourse.com）。

方案一、设置响应头

核心原理：跨域访问的资源允许你跨域访问。（被调用方允许你可跨域访问）

实现：

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

方案二、jsonp

jsonp：json with padding

  • jsonp不是一个真正的AJAX请求。只不过可以完成AJAX的局部刷新效果。可以说jsonp是一种类AJAX请求的机制。

jsonp可以解决跨域问题。
注意：jsonp解决跨域的时候，只支持GET请求。不支持post请求。这是因为jsonp本就是动态的创建script标签从而达到跨域的效果。

下面是动态创建的代码：

效果展示：

jQuery封装了jsonp，也就是说可以使用jQuery库去进行编写jsonp代码，方便。

核心代码如下：

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

方案三、代理机制（httpclient）

“调用方”解决跨域的问题是这个思路的：让发送出去的请求代理成是本域的。
如果资源是本域的，那就侧面地进行了跨域。

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

  • 使用JDK内置的API（java.net.URL....），这些API是可以发送HTTP请求的。
  • 使用第三方的开源组件，比如：apache的httpclient组件。（httpclient组件是开源免费的，可以直接用）。

总结

到此这篇关于AJAX的跨域问题解决的文章就介绍到这了,更多相关AJAX跨域问题内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 完美解决AJAX跨域问题

    从AJAX诞生那天起,XMLHttprequest对象不能跨域请求的问题就一直存在.这似乎是一个很经典的问题了.是由于javascript的同源策略(这里不作深入探讨)所导致. 解决的办法,大概有如下几种: 1. 使用中间层过渡的方式(可以理解为"代理"): 中间过渡,很明显,就是在AJAX与不同域的服务器进行通讯的中间加一层过渡,这一层过渡可以是PHP.JSP.c++等任何具备网络通讯功能的语言,由中间层向不同域的服务器进行读取数据的操作.拿asp.net做一个例子,如果需要对不同域

  • 关于Ajax跨域问题及解决方案详析

    复现Ajax跨域问题 做两个简单的小项目复现Ajax跨域问题. 后端语言使用Java 首先是一个简单的订单系统, 通过访问/loadOrderList, 最终以json串形式返回订单集合. 该项目使用Tomcat发布在7070端口. @RequestMapping("/loadOrderList") @ResponseBody public List<Order> loadOrderList(String uid){ //模拟订单数据 Order o1 = new Orde

  • ajax请求前端跨域问题原因及解决方案

    ajax请求前端跨域问题原因及解决方案

    目录 一.跨域是怎么形成的 二.导致跨域的根本原因 三.解决方法 1 .JSONP 2. CORS 3 .代理转发 一.跨域是怎么形成的 当我们请求一个url的 协议.域名.端口三者之间任意一个与当前页面url的协议.域名.端口 不同这种现象我们把它称之为跨域 跨域会导致: 1.无法读取非同源网页的 Cookie.LocalStorage 和 IndexedDB 2.无法接触非同源网页的 DOM 3.无法向非同源地址发送 AJAX 请求(可以发送,但浏览器会拒绝接受响应) 二.导致跨域的根本原因

  • Ajax跨域问题的解决办法汇总(推荐)

    本篇将讲述一个小白从遇到跨域不知道是跨域问题,到知道是跨域问题不知道如何解决,再到解决跨域问题,最后找到两种方法解决ajax 跨域问题的全过程. 不知是跨域问题 起 因是这样的,为了复用,减少重复开发,单独开发了一个用户权限管理系统,共其他系统获取认证与授权信息,暂且称之为A系统:调用A系统以B为例.在B系统 中用ajax调用A系统系统的接口(数据格式为json),当时特别困惑,在A系统中访问相应的url可正常回返json数据,但是在B系统中使用 ajax请求同样的url则一点儿反应都没有,好像

  • 有关Ajax跨域问题的两种解决方法

    概述 Ajax跨域是前端开发中常见的问题,本文描述了以Google浏览器Chrome作为客户端和以Tomcat作为Web服务器的情况下的解决办法. 问题现象 当出现跨域访问的时候ajax通常会报类似如下错误: XMLHttpRequest cannot load http://192.168.2.12:8001/oss/api/version/check. No 'Access-Control-Allow-Origin' header is present on the requested re

  • js跨域和ajax 跨域问题的实现思路

    js 要跨域的话,可以用: <script src="别的网站的js地址(这里的内空可以是动态生成的,如:aaa.jsp.bbb.aspx)都可以."></script>这样是可以从别的网站里面读取出数据的. 关键是看你灵不灵活,会不会用了. ajax要跨域的话,可以用服务器去别的网站取内容,如asp.net的: 复制代码 代码如下: public string GetUrlData(string url) { System.Net.HttpWebRequest

  • AJax与Jsonp跨域访问问题小结

    ####JavaScript的AJax AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML) 设计AJax使用的一种重要技术是XMLHttpRequest对象. 创建XMLHttpRequest对象的方式: xmlhttp = new ActiveObject("Microsoft.XMLHTTP"); // IE浏览器支持的创建方式 xmlhttp = new XMLHTTPRequest(); // F

  • Ajax请求跨域问题解决方案分析

    本文实例讲述了Ajax请求跨域问题解决方案.分享给大家供大家参考,具体如下: 几乎每种浏览器都存在默认的安全机制,都有同源策略,因为浏览器恶意的把每个外部请求的都当做是黑客攻击,相当于是对自身的保护,所以浏览器在运行脚本时会判断脚本与请求的页面是否是同一来源,这个同一来源,包括1.协议,2.地址,3.端口,只有三者都相同才被认为是同一来源. 一.解决方案: 1,在服务器端的响应头中添加一个http参数: res.setHeader("Access-Control-Allow-Origin&quo

  • 详解ajax跨域问题解决方案

    详解ajax跨域问题解决方案

    今天来记录一下关于ajax跨域的一些问题.以备不时之需. 跨域 同源策略限制 同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性.也就是说,受到请求的 URL 的域必须与当前 Web 页面的域相同.这意味着浏览器隔离来自不同源的内容,以防止它们之间的操作. 解决方式 通常来说,比较通用的有如下两种方式,一种是从服务器端下手,另一种则是从客户端的角度出发.二者各有利弊,具体要使用哪种方式还需要具体的分析. 服务器设置响应头 服务器代理 客户端采用脚本回调机制. 方式一 Access-C

  • Ajax跨域访问Cookie丢失问题的解决方法

    ajax跨域访问,可以使用jsonp方法或设置Access-Control-Allow-Origin实现,关于设置Access-Control-Allow-Origin实现跨域访问可以参考之前我写的文章<ajax 设置Access-Control-Allow-Origin实现跨域访问> 1.ajax跨域访问,cookie丢失 首先创建两个测试域名 a.fdipzone.com 作为客户端域名 b.fdipzone.com 作为服务端域名 测试代码 setcookie.PHP 用于设置服务端co

随机推荐