首页 / JAVASCRIPT / 探讨跨域请求资源的几种方式（总结）

探讨跨域请求资源的几种方式（总结）

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了探讨跨域请求资源的几种方式（总结），小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含10954字，纯文字阅读大概需要16分钟。

内容图文

跨域请求资源的几种方式，具体如下：

1.什么是跨域

2.JSONP

3.proxy代理

4.cors

5.xdr

由于浏览器同源策略，凡是发送请求url的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域。具体可以查看下表

探讨跨域请求资源的几种方式（总结） - 文章图片

JSONP

这种方式主要是通过动态插入一个script标签。浏览器对script的资源引用没有同源限制，同时资源加载到页面后会立即执行（没有阻塞的情况下）。

<script>
   var _script = document.createElement('script');
   _script.type = "text/javascript";
   _script.src = "http://localhost:8888/jsonp?callback=f";
   document.head.appendChild(_script);
  </script>

实际项目中JSONP通常用来获取json格式数据，这时前后端通常约定一个参数callback，该参数的值，就是处理返回数据的函数名称。

<!doctype html>
<html>
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>jsonp_test</title>

  <script>
   var f = function(data){
    alert(data.name);
   }
   /*var xhr = new XMLHttpRequest();
   xhr.onload = function(){
    alert(xhr.responseText);
   };
   xhr.open('POST', 'http://localhost:8888/cors', true);
   xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
   xhr.send("f=json");*/
  </script>
  
  <script>
   var _script = document.createElement('script');
   _script.type = "text/javascript";
   _script.src = "http://localhost:8888/jsonp?callback=f";
   document.head.appendChild(_script);
  </script>
 </head>
 var query = _url.query;
    console.log(query);
    var params = qs.parse(query);
    console.log(params);
    var f = "";
  
    f = params.callback;
  
    res.writeHead(200, {"Content-Type": "text/javascript"});
    res.write(f + "({name:'hello world'})");
    res.end();

探讨跨域请求资源的几种方式（总结） - 文章图片

缺点：

1、这种方式无法发送post请求（这里）

2、另外要确定jsonp的请求是否失败并不容易，大多数框架的实现都是结合超时时间来判定。

Proxy代理

这种方式首先将请求发送给后台服务器，通过服务器来发送请求，然后将请求的结果传递给前端。

<!doctype html>
<html>
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>proxy_test</title>

  <script>
   var f = function(data){
    alert(data.name);
   }
   var xhr = new XMLHttpRequest();
   xhr.onload = function(){
    alert(xhr.responseText);
   };
   xhr.open('POST', 'http://localhost:8888/proxy?http://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer', true);
   xhr.send("f=json");
  </script>
 </head>
 
 <body>
 </body>
</html>

var proxyUrl = "";
   if (req.url.indexOf('?') > -1) {
     proxyUrl = req.url.substr(req.url.indexOf('?') + 1);
     console.log(proxyUrl);
   }
   if (req.method === 'GET') {
     request.get(proxyUrl).pipe(res);
   } else if (req.method === 'POST') {
     var post = '';   //定义了一个post变量，用于暂存请求体的信息

    req.on('data', function(chunk){  //通过req的data事件监听函数，每当接受到请求体的数据，就累加到post变量中
      post += chunk;
    });
  
    req.on('end', function(){  //在end事件触发后，通过querystring.parse将post解析为真正的POST请求格式，然后向客户端返回。
      post = qs.parse(post);
      request({
           method: 'POST',
           url: proxyUrl,
           form: post
         }).pipe(res);
    });
   }

探讨跨域请求资源的几种方式（总结） - 文章图片

需要注意的是如果你代理的是https协议的请求，那么你的proxy首先需要信任该证书（尤其是自定义证书）或者忽略证书检查，否则你的请求无法成功。12306就提供了一个鲜活的例子。

探讨跨域请求资源的几种方式（总结） - 文章图片

还需要注意一点，对于同一请求浏览器通常会从缓存中读取数据，我们有时候不想从缓存中读取，所以会加一个preventCache参数，这个时候请求url变成：url?preventCache=12345567....;这本身没有什么问题，问题出在当使用某些前端框架（比如jquery）发送proxy代理请求时，请求url为proxy?url，同时设置preventCache：true，框架不能正确处理这个参数，结果发出去的请求变成proxy?url&preventCache=123456（正长应为proxy?url?preventCache=12356）;后端截取后发送的请求为url&preventCache=123456，根本没有这个地址，所以你得不到正确结果。

CORS

这是现代浏览器支持跨域资源请求的一种方式。

探讨跨域请求资源的几种方式（总结） - 文章图片

当你使用XMLHttpRequest发送请求时，浏览器发现该请求不符合同源策略，会给该请求加一个请求头：Origin，后台进行一系列处理，如果确定接受请求则在返回结果中加入一个响应头：Access-Control-Allow-Origin;浏览器判断该相应头中是否包含Origin的值，如果有则浏览器会处理响应，我们就可以拿到响应数据，如果不包含浏览器直接驳回，这时我们无法拿到响应数据。

<!doctype html>
<html>
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>jsonp_test</title>

  <script>
   /*var f = function(data){
    alert(data.name);
   }*/
   var xhr = new XMLHttpRequest();
   xhr.onload = function(){
    alert(xhr.responseText);
   };
   xhr.open('POST', 'http://localhost:8888/cors', true);
   xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
   xhr.send("f=json");
  </script>
  
  <script>
   /* var _script = document.createElement('script');
   _script.type = "text/javascript";
   _script.src = "http://localhost:8888/jsonp?callback=f";
   document.head.appendChild(_script);*/
  </script>
 </head>
 
 <body>
 </body>
</html>

前端cors

if (req.headers.origin) {

      res.writeHead(200, {
        "Content-Type": "text/html; charset=UTF-8",
        "Access-Control-Allow-Origin":'http://localhost'/*,
        'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
        'Access-Control-Allow-Headers': 'X-Requested-With, Content-Type'*/
      });
      res.write('cors');
      res.end();
    }

探讨跨域请求资源的几种方式（总结） - 文章图片

如果我们把Access-Control-Allow-Origin去掉，浏览器会驳回响应，我们也就拿不到数据。

探讨跨域请求资源的几种方式（总结） - 文章图片

需要注意的一点是Preflighted Request的透明服务器验证机制支持开发人员使用自定义的头部、GET或POST之外的方法，以及不同类型的主题内容。总结如如：

1、非GET 、POST请求

2、POST请求的content-type不是常规的三个：application/x- www-form-urlencoded（使用 HTTP 的 POST 方法提交的表单）、multipart/form-data（同上，但主要用于表单提交时伴随文件上传的场合）、text/plain（纯文本）

3、POST请求的payload为text/html

4、设置自定义头部

OPTIONS请求头部中会包含以下头部：Origin、Access-Control-Request-Method、Access-Control-Request-Headers，发送这个请求后，服务器可以设置如下头部与浏览器沟通来判断是否允许这个请求。

Access-Control-Allow-Origin、Access-Control-Allow-Method、Access-Control-Allow-Headers

var xhr = new XMLHttpRequest();
   xhr.onload = function(){
    alert(xhr.responseText);
   };
   xhr.open('POST', 'http://localhost:8888/cors', true);
   xhr.setRequestHeader("Content-Type", "text/html");
   xhr.send("f=json");

if (req.headers.origin) {

      res.writeHead(200, {
        "Content-Type": "text/html; charset=UTF-8",
        "Access-Control-Allow-Origin":'http://localhost',
        'Access-Control-Allow-Methods': 'GET,POST,OPTIONS',
        'Access-Control-Allow-Headers': 'X-Requested-With, Content-Type'/**/
      });
      res.write('cors');
      res.end();
    }

探讨跨域请求资源的几种方式（总结） - 文章图片

如果你在调试状态，你会发现后台代码执行了两遍，说明发送了两次请求。注意一下我们的onload代码只执行了一次，所以说OPTIONS请求对程序来说是透明的，他的请求结果会被缓存起来。

如果我们修改一下后台代码，把Content-Type去掉，你会发现OPTIONS请求失败。

探讨跨域请求资源的几种方式（总结） - 文章图片

通过setRequestHeader('X-Request-With', null)可以避免浏览器发送OPTIONS请求。

　　根据我的测试，当使用cors发送跨域请求时失败时，后台是接收到了这次请求，后台可能也执行了数据查询操作，只是响应头部不合符要求，浏览器阻断了这次请求。

XDR

这是IE8、IE9提供的一种跨域解决方案，功能较弱只支持get跟post请求，而且对于协议不同的跨域是无能为力的，比如在http协议下发送https请求。看一下微软自己的例子就行

<!DOCTYPE html>

<html>
<body>
 <h2>XDomainRequest</h2>
 <input type="text" id="tbURL" value="http://www.contoso.com/xdr.txt" style="width: 300px"><br>
 <input type="text" id="tbTO" value="10000"><br>
 <input type="button" onclick="mytest()" value="Get">   
  <input type="button" onclick="stopdata()" value="Stop">   
  <input type="button" onclick="readdata()" value="Read">
 <br>
 <div id="dResponse"></div>
 <script>
  var xdr;
  function readdata()
  {
   var dRes = document.getElementById('dResponse');
   dRes.innerText = xdr.responseText;
   alert("Content-type: " + xdr.contentType);
   alert("Length: " + xdr.responseText.length);
  }
  
  function err()
  {
   alert("XDR onerror");
  }

  function timeo()
  {
   alert("XDR ontimeout");
  }

  function loadd()
  {
   alert("XDR onload");
   alert("Got: " + xdr.responseText);
  }

  function progres()
  {
   alert("XDR onprogress");
   alert("Got: " + xdr.responseText);
  }

  function stopdata()
  {
   xdr.abort();
  }

  function mytest()
  {
   var url = document.getElementById('tbURL');
   var timeout = document.getElementById('tbTO');
   if (window.XDomainRequest)
   {
    xdr = new XDomainRequest();
    if (xdr)
    {
     xdr.onerror = err;
     xdr.ontimeout = timeo;
     xdr.onprogress = progres;
     xdr.onload = loadd;
     xdr.timeout = tbTO.value;
     xdr.open("get", tbURL.value);
     xdr.send();
    }
    else
    {
     alert("Failed to create");
    }
   }
   else
   {
    alert("XDR doesn't exist");
   }
  }
 </script>
</body>
</html>

以上就是我在实际项目中遇到的跨域请求资源的情况，有一种跨域需要特别注意就是在https协议下发送https请求，除了使用proxy代理外其他方法都无解，会被浏览器直接block掉。如果哪位道友知道解决方法，麻烦你告诉我一声。

最后附上完整的测试demo

iss中：

<!doctype html>
<html>
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>jsonp_test</title>

  <script>
   /*var f = function(data){
    alert(data.name);
   }*/
   var xhr = new XMLHttpRequest();
   xhr.onload = function(){
    alert(xhr.responseText);
   };
   xhr.open('POST', 'http://localhost:8888/cors', true);
   xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
   xhr.setRequestHeader("aaaa","b");
   xhr.send("f=json");
  </script>
  
  <script>
   /* var _script = document.createElement('script');
   _script.type = "text/javascript";
   _script.src = "http://localhost:8888/jsonp?callback=f";
   document.head.appendChild(_script);*/
  </script>
 </head>
 
 <body>
 </body>
</html>

node-html

<!doctype html>
<html>
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>proxy_test</title>

  <script>
   var f = function(data){
    alert(data.name);
   }
   var xhr = new XMLHttpRequest();
   xhr.onload = function(){
    alert(xhr.responseText);
   };
   xhr.open('POST', 'http://localhost:8888/proxy?https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer', true);
   xhr.send("f=json");
  </script>
 </head>
 
 <body>
 </body>
</html>

node-server

var http = require('http');
var url = require('url');
var fs = require('fs');
var qs = require('querystring');
var request = require('request');

http.createServer(function(req, res){
  var _url = url.parse(req.url);
  if (_url.pathname === '/jsonp') {
    var query = _url.query;
    console.log(query);
    var params = qs.parse(query);
    console.log(params);
    var f = "";
  
    f = params.callback;
  
    res.writeHead(200, {"Content-Type": "text/javascript"});
    res.write(f + "({name:'hello world'})");
    res.end();
  } else if (_url.pathname === '/proxy') {
   var proxyUrl = "";
   if (req.url.indexOf('?') > -1) {
     proxyUrl = req.url.substr(req.url.indexOf('?') + 1);
     console.log(proxyUrl);
   }
   if (req.method === 'GET') {
     request.get(proxyUrl).pipe(res);
   } else if (req.method === 'POST') {
     var post = '';   //定义了一个post变量，用于暂存请求体的信息

    req.on('data', function(chunk){  //通过req的data事件监听函数，每当接受到请求体的数据，就累加到post变量中
      post += chunk;
    });
  
    req.on('end', function(){  //在end事件触发后，通过querystring.parse将post解析为真正的POST请求格式，然后向客户端返回。
      post = qs.parse(post);
      request({
           method: 'POST',
           url: proxyUrl,
           form: post
         }).pipe(res);
    });
   }
  } else if (_url.pathname === '/index') {
    fs.readFile('./index.html', function(err, data) {
     res.writeHead(200, {"Content-Type": "text/html; charset=UTF-8"});
      res.write(data);
      res.end();
    });
  } else if (_url.pathname === '/cors') {
    if (req.headers.origin) {

      res.writeHead(200, {
        "Content-Type": "text/html; charset=UTF-8",
        "Access-Control-Allow-Origin":'http://localhost',
        'Access-Control-Allow-Methods': 'GET,POST,OPTIONS',
        'Access-Control-Allow-Headers': 'X-Requested-With, Content-Type,aaaa'/**/
      });
      res.write('cors');
      res.end();
    }
  }
  
}).listen(8888);

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

内容总结

以上是互联网集市为您收集整理的探讨跨域请求资源的几种方式（总结）全部内容，希望文章能够帮你解决探讨跨域请求资源的几种方式（总结）所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

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

内容手机端

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

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

来源：【匿名】

【上一篇】解析Javascript单例模式概念与实例【下一篇】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 - 最热教程