关闭

web网站ajax跨域方法总结与解决方案

时间: 2017-10-30阅读: 1177标签: 跨域

web前端的同学如果使用ajax,如果请求后端地址和页面访问的地址“URL的首部”不同就会出现访问被拒绝的情况,这就需要跨域来解决前后端的通讯问题,下面将列举一些在实际项目中应用也是比较多的方法。


服务器反向代理解决跨域

指以代理服务器来接受internet上的连接请求,然后将请求转发给内部网络上的服务器,并将从服务器上得到的结果返回给internet上请求连接的客户端,此时代理服务器对外就表现为一个反向代理服务器。  这里已nginx和node来实现如下:

//文件ngix.conf添加代码

location ~ /api {
       //请求后端的地址
	proxy_pass   http://www.b.com:8080;
}

//node的代理如下

proxyTable: {
      '/api': {
        target: 'http://www.b.com:8080/',
        changeOrigin: true,
        //pathRewrite: {'^/api': '/'}是否重写
      }
    },

说明:如果页面url为http://www.a.com的页面需要ajax请求后端http://www.b.com:8080/api/dothis.do的地址。如果设置了反向代理,即可通过http://www.a.com/api/dothis.do来获取数据,就很好的解决了跨域问题的同时并未暴露后端地址给用户。


后端通过Access-Control-Allow-Origin来解决

Access-Control-Allow-Origin是html5中定义的一种解决资源跨域的策略。他是通过服务器端返回带有Access-Control-Allow-Origin标识的Response header,用来解决资源的跨域权限问题。

如果应许所有域名的访问,我们可以在header中设置Access-Control-Allow-Origin: * 。

如果应许部分域名访问,这里将已php为例子实现如下,这里将只应许前端URL为http://www.a.com才能访问:

$origin = isset($_SERVER['HTTP_ORIGIN'])? $_SERVER['HTTP_ORIGIN'] : '';
        $allow_origin = array(
            'http://www.a.com',
        );
        if(in_array($origin, $allow_origin)){
            header('Access-Control-Allow-Origin:'.$origin);
        }


jsonp解决get请求的跨域

json是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过JavaScript callback的形式实现跨域访问。它的局限性主要是支持Get,

这里已php为例返回如下:

<?php
   $data = array();//需要返回的数据
   $callback = $_GET['callback'];
   echo $callback.'('.json_encode($data).')';
   exit;
?>

前端已jquery的ajax请求为例,它封装了jsonp的实现

$.ajax({
    type : "get"//如果
    url : "www.b.com:8080",
    dataType : "jsonp",
    jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名
    success:function(json){},
    error:function(){}
});

这里网上找了一篇原生JS的实现,代码如下:

function ajax(params) {  
 params = params || {};  
 params.data = params.data || {};  
 var json = params.jsonp ? jsonp(params) : json(params);   
 // jsonp请求  
 function jsonp(params) {  
  //创建script标签并加入到页面中  
  var callbackName = params.jsonp;  
  var head = document.getElementsByTagName('head')[0];  
  // 设置传递给后台的回调参数名  
  params.data['callback'] = callbackName;  
  var data = formatParams(params.data);  
  var script = document.createElement('script');  
  head.appendChild(script);  
  //创建jsonp回调函数  
  window[callbackName] = function(json) {  
  head.removeChild(script);  
  clearTimeout(script.timer);  
  window[callbackName] = null;  
  params.success && params.success(json);  
  };  
  //发送请求  
  script.src = params.url + '?' + data;  
  //为了得知此次请求是否成功,设置超时处理  
  if(params.time) {  
   script.timer = setTimeout(function() {  
    window[callbackName] = null;  
    head.removeChild(script);  
    params.error && params.error({  
     message: '超时' 
    });  
   }, time);  
  }  
 };  
 //格式化参数  
 function formatParams(data) {  
  var arr = [];  
  for(var name in data) {  
   arr.push(encodeURIComponent(name) + '=' + encodeURIComponent(data[name]));  
  };  
  // 添加一个随机数,防止缓存  
  arr.push('v=' + random()); 
  return arr.join('&');  
 }  
 // 获取随机数  
 function random() {  
  return Math.floor(Math.random() * 10000 + 500);  
 }
}


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/27

关闭

总结解决跨域的几个方法

跨域:指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对 javascript 施加的安全限制。同源策略:是指协议,域名,端口都要相同

你应该了解的CORS

如果你和我一样,第一次遇到 CORS (跨域资源共享),你想让服务器接收那些你拼接的 Ajax 请求并处理他们。所以你去 stackoverflow.com 复制一段代码来设置一些 HTTP Headers ,让请求可以正常工作

缓存竟也能导致跨域问题!

由于页面设计需要,页面展示图片,并可点击下载按钮进行下载(需要前端打包多个图片,所以需要使用ajax请求图片获得二进制内容,不能直接使用img或a进行下载),如图:

vue-cli3 中跨域解决方案

此方案只能用于开发环境,线上最好设置同源策略(遇到个后端,装你妈批),前后端不在同一服务器的情况下,前端要访问后端API,可通过在vue.config.js中配置代理服务器。

jsonp跨域原理,jsonp和ajax的区别?

Jsonp原理是动态创建一个script标签,利用script标签src属性访问没有限制,实现跨域。Ajax是页面无刷新请求数据操作,Jsonp不是真正的ajax请求。讲解Ajax 和 jsonp的区别,在jquery中使用jsonp

js跨域访问问题

这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据。只要协议、域名、端口有任何一个不同,都被当作是不同的域。如果进行跨域访问

node.js如何配置跨域?

在node.js中可以使用res.header()方法来配置跨域。res.header()方法可以用来设置允许跨域的域名、允许的header类型、跨域允许的请求方式等。

Angular怎么实现跨域?

跨域,前端开发中常常遇到的问题。AngularJS实现跨域方式类似于Ajax,使用CORS机制。以下阐述一下AngularJS中使用$http实现跨域请求数据。指定callback和回调函数名,函数名为JSON_CALLBACK时,会调用success回调函数。JSON_CALLBACK必须全为大写。

Js通过Web代理发起跨域请求

XMLHttpRequest对象(IE中为XMLHTTP对象)是AJAX应用的核心。由于现代浏览器对跨域请求的限制,在使用时需多加注意。本教程尽量用简单易懂的话描述(跨域)问题,并提供一个方案:通过Web代理(Web Proxy)

JSONP跨域请求数据的三种方式

原生方式需要定义一个回调函数,用来接收和处理数据。获取数据的地址包含这个回调函数名。新建一个<script>标签,地址赋值给标签的src。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!