JS跨域请求的问题解析

同源策略

在运行中我们有时会出错是因为我们违反了同源策略，这是一种浏览器所实施的安全措施，用于限制具有不同来源的文档之间的交互。页面的来源由其协议，主机和端口号定义。具有相同来源的资源可以相互完全访问。但是如果具有不相同的源将会拒绝访问。

http://www.a.com/a.js
http://www.b.com/a.js
这两个之间就不可以互相访问，因为域名的不相同

域名组成

如果上面两个域名想互相访问就需要跨域请求，一般情况下同源政策规定：允许跨源 写入，而不允许跨源 读取这意味着同源政策不会阻止将数据写入，只会禁止他们从域中读取数据， 或者对从其域收到的响应做任何事情。

跨域请求的方法

JSONP

JSONP 称为带有填充的JavaScript对象表示，是一种通过利用HTML页面中的脚本标记可以来加载来自不同来源的代码来执实现跨域请求的方法。JSONP依赖于<script>标签可以来自不同来源的事实。当浏览器解析<script>标记时，它将获取脚本内容，并在当前页面的上下文中执行它。通常，服务将返回HTML或以XML或JSON等数据格式表示的某些数据。但是，当向启用JSONP的服务器发出请求时，它会返回一个脚本块，该脚本块在执行时会调用页面指定的回调函数，并将实际数据作为参数提供

注意：它没有相同的源点限制，即使在旧浏览器中也具有良好的兼容性但是JSONP只能用于执行跨域GET请求，服务器必须显式支持JSONP请求。

CORS方法

为服务器提供了一种机制，告诉浏览器可以请求域A读取来自域B的数据。通过在响应中包含一个新的 Access-Control-Allow-OriginHTTP头来完成的，当浏览器收到来自跨源源的响应时，它将检查CORS头。如果响应头中指定的源点与当前源点相匹配，则允许对响应进行读访问，否则就会报错。

与jsonp相比，CORS具有以下优势：

它不仅支持GET请求，还支持POST等其他请求

它可以使用XMLHttpRequest发送和接收数据，并具有更好的错误处理机制

总结：以上就是本篇文章的全部内容了，希望对大家学习有所帮助，感谢大家对我们的支持。

赞 (0)

相关推荐

  • jsonp跨域获取数据的基础教程

    前言 由于浏览器有同源策略,所以要想获取非同源(协议,域名,端口三者有一不同都算非同源)的页面的数据,就得进行跨域 (1) jsonp原理 由于script标签的src属性可以访问非同源的js脚本,所以通过src属性访问服务器会返回函数的js代码,而我们想要的数据就作为函数参数返回,而我们会先定义这个函数,返回的js代码就可执行 (2) jsonp实现代码 请求页面 <!DOCTYPE html> <html> <head> <title></titl

  • 跨域解决之JSONP和CORS的详细介绍

    JSONP跨域和CORS跨域 什么是跨域? 跨域:指的是浏览器不能执行其它网站的脚本,它是由浏览器的同源策略造成的,是浏览器的安全限制! 同源策略 同源策略:域名.协议.端口均相同. 浏览器执行JavaScript脚本时,会检查这个脚本属于那个页面,如果不是同源页面,就不会被执行. JSONP跨域 只支持GET请求,不支持POST等其它请求,也不支持复杂请求,只支持简单请求. CORS跨域 支持所有的请求,包含GET.POST.OPTOIN.PUT.DELETE等.既支持复杂请求,也支持简单请求

  • Springboot 实现跨域访问无需使用jsonp的实现代码

    Springboot 实现跨域访问 无需使用jsonp 在springboot的拦截器中添加respone的头信息即可 @Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { //String origin = (String) request.getRemoteHost()+":"+re

  • JS中使用cavas截图网页并解决跨域及模糊问题

    前几天给了个需求对浏览器网页进行截图,把网页统计数据图形表等截图保存至用户本地. 首先对于网页截图,我用的是canvas实现,获取你需要截图的模块的div,从而使用canvas对你需要的模块进行截图. 我们先来引入canvas的js文件,js文件获取地址官网主页:http://html2canvas.hertzen.com/ <script type="text/javascript" src="js/html2canvas.js"></scrip

  • jsonp跨域及实现百度首页联想功能的方法

    什么是跨域呢? 比如说ajax必须在自己的域(名)之下,才能进行异步的请求,如果不是在同一个域之下就不能进行请求,会报错.比如说我们用ajax去请求腾讯的API如果我们的这个域不在腾讯那个接口的'白名单'里面,腾讯的接口就会拒绝给我返回数据.但是大多数情况下,我们不可能每次都去去相应的网站申请一个'白名单',这个时候我们就要用到跨域这种方法,跨域有很多方式比如说用iframe但是这种的可操作性太差了,不能操作frame里面的DOM元素.当先最流行的一种的方式是使用jsonp这种方式. 什么是JS

  • 跨域请求两种方法 jsonp和cors的实现

    在网站后台跨域访问另一服务器时,若被访问服务器未设置response['Access-Control-Allow-Origin'] = '*' 那么将无法获取. jsonp方法 伪造ajax提交请求 请求端 // 基于jsonp // 原理: ajax 不能直接跨域 . //向html中加入script标签 含有访问路径,script标签直接访问路径达到效果 $('.get_service2').click(function () { // 伪造ajax提交请求 $.ajax({ url:'ht

  • Vue.js 中 axios 跨域访问错误问题及解决方法

    1.假如访问的接口地址为 http://www.test.com/apis/index.php  (php api 接口) 2.而开发地址为http://127.0.0.1:8080,当axios发起请求时,出现如下错误: Failed to load http://www.test.com/apis/index.php?&act=login: The value of the 'Access-Control-Allow-Origin' headerin the response must no

  • JS跨域请求的问题解析

    JS跨域请求的问题解析

    同源策略 在运行中我们有时会出错是因为我们违反了同源策略,这是一种浏览器所实施的安全措施,用于限制具有不同来源的文档之间的交互.页面的来源由其协议,主机和端口号定义.具有相同来源的资源可以相互完全访问.但是如果具有不相同的源将会拒绝访问. http://www.a.com/a.js http://www.b.com/a.js 这两个之间就不可以互相访问,因为域名的不相同 域名组成 如果上面两个域名想互相访问就需要跨域请求,一般情况下同源政策规定:允许跨源 写入,而不允许跨源 读取这意味着同源政策

  • js跨域请求数据的3种常用的方法

    js跨域请求数据的3种常用的方法

    由于js同源策略的影响,当在某一域名下请求其他域名,或者同一域名,不同端口下的url时,就会变成不被允许的跨域请求. 那这个时候通常怎么解决呢,对此菜鸟光头我稍作了整理: 1.JavaScript    在原生js(没有jQuery和ajax支持)的情况下,通常客户端代码是这样的(我假设是在localhost:8080的端口下的http://localhost:8080/webs/i.mediapower.mobi/wutao/index.html页面的body标签下面加入以下代码): <scr

  • Spring Boot和Vue跨域请求问题原理解析

    这篇文章主要介绍了Spring Boot和Vue跨域请求问题原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 使用Spring Boot + Vue 做前后端分离项目搭建,实现登录时,出现跨域请求 Access to XMLHttpRequest at 'http://localhost/open/login' from origin 'http://localhost:8080' has been blocked by CORS pol

  • 详解js跨域请求的两种方式，支持post请求

    JSONP实现跨域 常用的jquery实现跨域调用 $.ajax({ url: "http://127.0.0.1/~chenjiebin/mycode/php/crossdomain/index.php", dataType: "jsonp", jsonp: "callback", context: document.body, success: function(data) { console.log(data); } }); 这个调用实际上

  • js跨域请求的5中解决方式

    跨域请求数据解决方案主要有如下解决方法: JSONP方式 表单POST方式 服务器代理 Html5的XDomainRequest Flash request 分开说明: 一.JSONP: 直观的理解: 就是在客户端动态注册一个函数 function a(data),然后将函数名传到服务器,服务器返回一个a({/*json*/})到客户端运行,这样就调用客户端的 function a(data),从而实现了跨域. 诞生背景: 1.Ajax直接请求普通文件存在跨域无权访问的问题,甭管是静态页面.动态

  • JS跨域请求外部服务器的资源

    tomcat服务器提供的接口,不能在其他域中访问的时候,需要增 Access-Control-Allow-Origin:* 以下操作均在需要被访问的项目中设置 1.编写拦截器代码 package com.soft.filter; /** * Created by Administrator on 2017/2/6. */ import javax.servlet.*; import javax.servlet.http.HttpServletResponse; import java.io.IO

  • JSONP跨域请求

    JSONP跨域请求

    什么是跨域: 1.域名不同 2.域名相同端口不同 js出于对安全考虑不支持跨域请求.我们可以使用JSONP解决跨域问题. 一.JSONP是什么 JSONP(JSON with Padding)是JSON的一种"使用模式",可用于解决主流浏览器的跨域数据访问的问题.由于同源策略,一般来说位于 server1.example.com 的网页js是无法与不是 server1.example.com的服务器沟通,而 HTML 的<script> 元素是一个例外.利用 <scr

  • 解决ajax不能访问本地文件问题（利用js跨域原理）

    解决ajax不能访问本地文件问题（利用js跨域原理）

    博主自己在开发一个无后台,只有前台的查询系统时,遇到一个困难,如何利用Ajax读取自己的本地json文件,百度.谷歌了下,发现大部分文章都是在说修改浏览器参数,但是自己想想,用户在使用时,还要修改浏览器的参数,这样显然降低了用户体验.自己琢磨了一段时间,发现可以利用js跨域原理来解决这个瓶颈.将之前要读取的json文件,变为js对象文件,这样就可以读取这个文件,然后写一个函数来对这个js对象进行解析. 首先说明下js跨域原理和jsonp这个技术(如果说的不详细,可自行百度.谷歌) src可以跨域

  • JS JSOP跨域请求实例详解

    在项目开发中遇到跨域的问题,一般都是通过JSONP来解决的.但是JSONP到底是个什么东西呢,实现的原理又是什么呢.在项目的空闲时间可以好好的来研究一下了. 1.什么是JSONP? 要了解JSONP,不得不提一下JSON,那么什么是JSON? JSON is a subset of the object literal notation of JavaScript. Since JSON is a subset of JavaScript, it can be used in the langu

  • 原生JS实现ajax与ajax的跨域请求实例

    一.原生JS实现ajax 第一步获得XMLHttpRequest对象 第二步:设置状态监听函数 第三步:open一个连接,true是异步请求 第四部:send一个请求,可以发送一个对象和字符串,不需要传递数据发送null 第五步:在监听函数中,判断readyState=4&&status=200表示请求成功 第六步:使用responseText.responseXML接受响应数据,并使用原生JS操作DOM进行显示 var ajax = new XMLHttpRequest(); ajax.

随机推荐