首页 / JAVASCRIPT / 什么是跨域？跨域有几种实现形式？

什么是跨域？跨域有几种实现形式？

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了什么是跨域？跨域有几种实现形式？，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3070字，纯文字阅读大概需要5分钟。

内容图文

跨域在js中会经常遇见，本篇将会对其进行相关的讲解。

同源策略是个很好的安全机制，但是有时候我们需要从不同的域下获取数据或者进行交互，这个时候同源策略会造成阻碍。
跨域，就是为了实现不同源下数据信息传输和交互。
实现跨域有下面几种方式：
1.JSONP
JSONP是JSON with padding（参数式JSON）的简写，是JSON的一种新应用方式。
JSONP的实现，依靠动态的<script>元素来使用，因为<script>不受同源策略限制，有能力从其他域中加载资源，示例：
通过<script>请求返回一个JSONP

<script src=""http://freegeoip.net/json/?callback=handleResponse></script>

返回的JSONP由两部分组成：回调函数和JSON数据

handleResponse(JSON)

由于通过<script>标签请求的数据会被当做js代码执行，因此回调函数会对JSON数据进行处理，在这个示例里，回调函数就是handleResponse。通常回调函数名会以参数的方式写进请求url中，且在本地定义好回调函数。
缺点：JSONP是从其他域中加载代码执行，如果其他域不安全，则响应中很可能夹带一些恶意代码，此时除了放弃使用JSONP外，没有办法追究，因此要保证数据来源的安全。
2.CORS
CORS（Cross-Origin Resource sharing，跨域资源共享）是Ajax跨域请求的一种方式，定义了在必须访问跨域资源时，浏览器与服务器应该如何进行沟通。
CORS背后的基本思想，就是使用定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是否应该成功。
CORS分为简单请求和复杂请求
同时满足下面两个条件的为简单请求：
1.请求方式为get、post、head三者中的一种；
2.请求头信息不超出这几种字段：Accept、Accept-Language、Content-Language、Last-Event-ID、Content-Type只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain
简单请求示例：
在我们跨域发送一个简单请求时，会定义一个Origin头部，说明请求来源

Oring:http://www.baidu.com //说明这一个请求是http://www.baidu.com发出的

如果服务器认为这个请求可以接受，就在Access-Control-Allow-Origin头部中返回相同的源信息（假设为公共资源，则可以返回“*”）

Access-Control-Allow-Origin:http://www.baidu.com

如果没有这个头部，或者头部的源信息不匹配，浏览器就会拦截掉返回的响应。
除了简单请求外，都是复杂请求
复杂请求与简单请求类似，只是在发送正式请求之前，会先发送一个预检请求，确认当前域是否在服务器许可范围中，服务器可以接受什么HTTP头信息、请求方式、数据类型等。得到许可回复以后，才会开始正式通信。
下面是预检请求头和响应头

//这是一个预检请求头OPTIONS /cors HTTP/1.1 //注意请求返回为options；Origin: https://api.qiutc.me //请求来源；Access-Control-Request-Method: PUT // 请求的方式Access-Control-Request-Headers: X-Custom-Header //请求头额外信息；Host: api.qiutc.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...
//这是一个预检响应头HTTP/1.1 200 OKDate: Mon, 01 Dec 2008 01:15:39 GMT
Server: Apache/2.0.61 (Unix)
Access-Control-Allow-Origin: https://api.qiutc.meAccess-Control-Allow-Methods: GET, POST, PUT //表明服务器支持的所有跨域方法Access-Control-Allow-Headers: X-Custom-Header //表明服务器支持的额外请求头Content-Type: text/html; charset=utf-8Content-Encoding: gzip
Content-Length: 0Keep-Alive: timeout=2, max=100Connection: Keep-Alive
Content-Type: text/plain

本篇详解了跨域的相关问题，更多相关内容请关注Gxl网。

内容总结

以上是互联网集市为您收集整理的什么是跨域？跨域有几种实现形式？全部内容，希望文章能够帮你解决什么是跨域？跨域有几种实现形式？所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/290036.html

来源：【匿名】

【上一篇】解决node修改后需频繁手动重启如何处理【下一篇】javascript 怎么调用php方法

更多 ►

【什么是跨域？跨域有几种实现形式？】教程文章相关的互联网学习教程文章

Javascript Ajax总结——其他跨域技术之Comet【代码】

Comet指一种更高级的Ajax技术（也称 “服务器推送” ），一种服务器向页面推送数据的技术。Comet能够让信息近乎实时地被推送到页面上，非常适合体育比赛的分数和股票报价。有两种实现Comet的方式：长轮询、流传统轮询（也称短轮询），即浏览器定时向服务器发送请求，看有没有更新的数据。长轮询把短轮询颠倒了一下。页面发起一个到服务器的新请求，然后服务器一直保持连接打开，直到有数据可发送。发送完数据之后，浏览器关闭连接...

分析JavaScript的跨域原理（jsonp）

前段时间给朋友分析了下常用的jsonp的跨域原理，跨域的方式有很多种，这里简单记录一种jsonp，阐述一下分析思想，分析过程，找到解决问题的方式。 1.JavaScript怎么跨域 2.为什么会出现跨域问题 3.常用的跨域插件是什么 4.为什么<script src=""></script>不会产生跨域问题 5.java后台跨域的处理是什么原理跨域方式？（1） document.domain+iframe的设置...

JS跨域【代码】

客户端 localjs.php 页面<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript" src="jquery-1.9.0.js"></script> <script type="text/javascript"> //原始jsonP跨域方法functi...

说一说javascript跨域和jsonp【代码】【图】

同源策略在浏览器的安全策略中“同源策略”非常如雷贯耳，说的是协议、域名、端口相同则视为同源，域名也可换成IP地址，不同源的页面脚本不能获取对方的数据。要是想使用XMLHttpRequest或者常规的AJAX请求获取另一个站点的数据，浏览器会告诉你“XXXX is not allowed by Access-Control-Allow-Orign”.因为同源策略的存在，防止了跨域访问的安全问题，但同时也损失了方便获取资源的便利。跨域的src属性世事又非绝对，浏览器还是允...

前后端分离每次请求session不一致JSESSIONID不一致，跨域【代码】

前后端分离每次请求session不一致JSESSIONID不一致，跨域Google浏览器解决步骤： ①在浏览器地址栏里输入下述命令：chrome://flags/ ②找到下面两个列表项目：（1）SameSite by default cookies （2）Cookies without SameSite must be secure 将这两项设置成disabled，并重启谷歌浏览器。再次使用，cookie中也成功写入了JSESSIONID。一切恢复正常！原文：https://www.cnblogs.com/biyesheji/p/15219648.html

问卷项目--js跨域

项目中因为要把问卷投放到第三方，并且对方要收集统计数据，因此在调用对方接口的时候就会存在跨域的问题。1. 什么叫js跨域浏览器不允许javascript跨域请求其他域名下的内容。端口号不同，主域相同子域不同，协议不同，不同域名等等情况下面表格里的a.js是无法获取b.js的内容的。情况举例端口号不同http://www.baidu.com/a.js vs. http://www.baidu.com:8080/b.js主域相同子域不同http://www.baidu.com/a.js vs. htt...

【转载】Ajax JS 跨域请求

原文：简单的ajax请求：http://blog.csdn.net/net_lover/article/details/5172509复杂的ajax请求：http://blog.csdn.net/net_lover/article/details/5172522 什么样的请求算是简单请求呢？简单请求必须满足下面2点：a，只使用 GET、POST 进行的请求，这里的POST只包括发送给服务器的数据类型（Content-Type）必须是 application/x-www-form-urlencoded、multipart/form-data 或者 text/plain中一个。b，HTTP 请求没有设置自定义的请...

javascript跨域问题【图】

现在很多人特别是前端开发人员，在ajax请求，XMLHttpRequest的过程中会碰到一个问题，那就是跨域请求：当我们javaScript脚本试图跨域访问时，浏览器会告诉你类似于No ‘Access-Control-Allow-Origin‘ header is present on the requested resource.的消息。可是我有时候又有跨域请求的强烈需求，比如需要去别的网站抓取一些数据（当然现在有很多方法来支持跨域，但这不是本文要讲的内容）。原来这是浏览器的一个策略----“同源策略...

原生JavaScript封装的jsonp跨域请求【代码】

原生JavaScript封装的jsonp跨域请求 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>跨域的jsonp请求</title> </head> <body><script>(function(window,document){//该函数接受三个参数，请求的地址，请求的数据（对象格式），回调函数// 回调函数可接受一个参数用来返回请求到的信息var jsonp = function(url,data,callback){// 第一步：挂载回调函数//cbFuncName为回调函数名var cbFuncName = "my_jsonp_...

在vue项目中,使用axios跨域处理【图】

下面我就为大家分享一篇在vue项目中,使用axios跨域处理，具有很好的参考价值，希望对大家有所帮助。跨域，一个很是让人尴尬的问题，有些人可以在后台中设置请求头，但是很多前端并不具备后台的知识，并无法自己独立的搭建一个服务器，所以就变成了一个尴尬的事情当然，有很多的虚拟服务器，能够解决跨域问题，他们的实质都是通过后台取与后台沟通，从而委婉的解决跨域问题正好，webpack正有这种功能，所以vue-cli也是有解决跨域的能...

原生javascript封装类似jquery的ajax请求跨域函数【代码】

function ajax(opt) {opt = opt || {}; // 对实参处理var xmlhttp, method, url, async, dataType, data;method = opt.method || GET; // 默认method为GETmethod = trim(method).toUpperCase(); //转换成大写并去除空格url = opt.url //请求地址url = trim(url);async = opt.async || true; ...

Vue-cli3.x + axios 跨域方案踩坑指北

缘起最近实验课上需要重构以前写过的一个项目（垃圾堆），需要添加发生邮件提醒的功能，记得以前写过一个PHP版的实现，所以想把PHP写的功能整理成一个服务，然后在前端调用。但是这个项目是JavaWeb，也就是说我需要面对跨域的问题。不过本篇文章，讲的并不是如何解决这样的跨域问题，而是我在找如何解决这个问题的路上遇到的坑。其实，在前端工程化大行其道的现在，前后端已经分离开来，前端为了提高工作流效率往往自己开一个小型的...

VUE axios发送跨域请求需要注意的问题【图】

在实际项目中前端使用到vue，后端使用php进行开发。前端使用axios请求请求关于跨域跨域的概念这些就不说了，百度一大堆相关的资料信息。我就只在这里记录下我在使用当中遇到的问题，以纪念在逝去的几个小时中资料查找的艰辛。不多说，直接上代码~~~~ 同理，跨域的解决方案为cros。服务器 PHP端代码如下(laravel 中间件进行处理)： public function handle($request, Closure $next){if ($request->isMethod(OPTIONS)) {$response...

vue中axios实现数据交互与跨域问题【代码】

1. 通过axios实现数据请求 vue.js默认没有提供ajax功能的。所以使用vue的时候，一般都会使用axios的插件来实现ajax与后端服务器的数据交互。注意，axios本质上就是javascript的ajax封装，所以会被同源策略限制。下载地址：https://unpkg.com/axios@0.18.0/dist/axios.js https://unpkg.com/axios@0.18.0/dist/axios.min.jsaxios提供发送请求的常用方法有两个：axios.get() 和 axios.post() 。增 post 删 delete 改 put 查 get/...

详解在Vue中如何使用axios跨域访问数据【图】

最近在项目中需要用到axios，所以就恶补一下这个axios到底是什么东东。越来它是vue-resource的替代品，官网也说了，以后都用axios， vue-resource不在维护。那么这个axios怎么用呢，上网搜索了一大堆，基本上都是雷同，我也不知道那些作者有没有在本地测试过。至少我按照网上的做法，总不能成功。经过几天的奋斗，我终于把它搞清楚了，为了不让其他的小伙伴们走弯路，我把我在实际操作中的例子分享给大家，希望对大家有用。一、安...

首页 / JAVASCRIPT / 什么是跨域？跨域有几种实现形式？

什么是跨域？跨域有几种实现形式？

内容导读

内容图文

内容总结

内容备注

内容手机端

【什么是跨域？跨域有几种实现形式？】教程文章相关的互联网学习教程文章

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程