前言

公司要做一个活动页面,在其过程中发现所有的接口,ajax请求跨域。这里对跨域做个简单介绍以及提供几种解决办法。

由于浏览器实现的同源策略的限制,XmlHttpRequest只允许请求当前源(域名、协议、端口)的资源,所以AJAX是不允许跨域的。这里提供自己常用的三种方法:

jsonp访问

  JSONP(JSON with Padding)是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问;

实现方式

  1)

  1. <script type="text/javascript">
  2. $.ajax({
  3. url:url,
  4. dataType:'jsonp',
  5. data:'',
  6. jsonp:'callback',
  7. success:function(result) {
  8.  
  9. },
  10. });
  11. </script>

  2)

  1. $.getJSON(url+"?callback=?",
  2. function(result) {
  3.  
  4. });

注:

   jsonp只能用get请求,哪怕你用了post请求,也会自动给你转换成get;

   jsonp 不仅可以用来获取数据,也可以用来提交数据。

damain 方法

在主域相同,子域不同的情况下可以用这种方法,修改域名指向,让他们指向同一域名,这种办法也只能解决主域相同而二级域名不同的情况,两个毫无关系的网址是不可以用这种方法的;

  1. document.domain = 'a.com'

注:在实际开发中,很多人会在本地调试接口,localhost的域名和公司的域名完全不一样,所有用了domain这种办法也无法产生效果,解决办法是修改c盘里的host文件,把本地地址localhost修改成公司域名或者公司二级域名,然后这种方法就可以使用了。

下面是修改的域名指向:

  1. #127.0.0.1 localhost
  2. 127.0.0.1 公司.com

之后打开本地localhost,就要用修改后域名来访问。

document.domain无效的情况,端口不同的情况下,domain无效

postMessage

postMessage是h5的一个新功能之一,由于我们是一家做h5游戏的公司,不可避免的要嵌套iframe,方便数据提交等。

这里假设,iframe的Id为 ‘iframe’;

在iframe里面的js里要写上

  1. var message = 'date';
  2. if (parent.document.getElementById(‘iframe‘)) {
  3. //捕获iframe
  4. var iframe = parent.document.getElementById(‘iframe’).contentWindow;
  5. //发送消息
  6. parent.postMessage(message, "*");
  7. }

在iframe外面的js里要写上

  1. window.addEventListener('message',function(e){
  2.  
  3. },false);

然后就可以拿到message的数据了。

ajax跨域的解决方案的更多相关文章

  1. java、ajax 跨域请求解决方案('Access-Control-Allow-Origin' header is present on the requested resource. Origin '请求源' is therefore not allowed access.)

      1.情景展示 ajax调取java服务器请求报错 报错信息如下: 'Access-Control-Allow-Origin' header is present on the requested ...

  2. 【JS】AJAX跨域-JSONP解决方案(一)

    AJAX跨域介绍 AJAX 跨域访问是用户访问A网站时所产生的对B网站的跨域访问请求均提交到A网站的指定页面 由于安全方面的原因, 客户端js使用xmlhttprequest只能用来向来源网站发送请求 ...

  3. ajax跨域问题解决方案

    今天来记录一下关于ajax跨域的一些问题.以备不时之需. 跨域 同源策略限制 同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性.也就是说,受到请求的 URL 的域必须与当前 Web 页面 ...

  4. ajax跨域请求解决方案

    大家好,今天我们学习了js的跨域请求的解决方案,由于JS中存在同源策略,当请求不同协议名,不同端口号.不同主机名下面的文件时,将会违背同源策略,无法请求成功!需要进行跨域处理! 方案一.后台PHP进行 ...

  5. Ajax跨域访问解决方案

    No 'Access-Control-Allow-Origin' header is present on the requested resource. 当使用ajax访问远程服务器时,请求失败,浏 ...

  6. No 'Access-Control-Allow-Origin' Ajax跨域访问解决方案

    No 'Access-Control-Allow-Origin' header is present on the requested resource. 当使用ajax访问远程服务器时,请求失败,浏 ...

  7. ajax跨域问题解决方案(jsonp,cors)

    跨域 跨域有三个条件,满足任何一个条件就是跨域 1:服务器端口不一致 2:协议不一致 3:域名不一致 解决方案: 1.jsonp 在远程服务器上设法动态的把数据装进js格式的文本代码段中,供客户端调用 ...

  8. ajax 跨域请求解决方案

    1.为什么出现跨域: 前端和后端同一个项目下,ajax请求的地址是localhost同一个端口是话,是不会出现跨域问题的,所以相反前端和后端分开时,ajax请求的地址或者端口不是跟后台相同时就会出现跨 ...

  9. PHP下ajax跨域的解决方案之jsonp

    首先要说明一下json和jsonp的区别? json是一种基于文本的数据交换方式,或者叫做描述数据的一种格式. var person = { "name": "test& ...

  10. AJAX 跨域 CORS 解决方案

    本篇文章由:http://xinpure.com/solutions-for-cross-domain-ajax-cors/ 两种跨域方法 在 Javascript 中跨域访问是比较常见的事情 就像现 ...

随机推荐

  1. 在Github里集成Readthedocs服务

    Readthedocs支持Markdown格式和sphinx格式的文档排版,是部署项目文档的绝佳平台.利用Github的托管服务,我们可以方便地将文档托管于Github,并利用Readthedocs查 ...

  2. rabbitmq和ons-rocketmq使用对比

    MQ,其实目的都是一样,就是应对系统的并发可以实现消峰和解耦的作用,类似于创建了一个线程异步操作,这一点可以了解一下一款优秀的并发框架(Disruptor),据说是每秒可以处理十万级数据, 目前据本人 ...

  3. 修改centos地址连接为自动连接

    1.进入目录/etc/sysconfig/network-scripts/ 2.修改ifcfg-etn0 文件   (即你的网卡标识命名的配置文件) 3.将ONBOOT=no改成yes 4.保存后重启 ...

  4. JSON-lib的api的使用

    List<Object> list = new ArrayList<Object>(); Map<String,Object> map1 = new HashMap ...

  5. 前端读者 | 从一行代码里面学点JavaScript

    本文来自 @张小俊128:链接:http://www.html-js.com/article/A-day-to-learn-from-a-line-of-code-inside-the-JavaScr ...

  6. win 10 下面安装 mysql-8.0.12-winx64 的过程

    win 10 下面安装 mysql-8.0.12-winx64 的过程 1.官网下载 mysql 2.解压到你要安装的目录 3.在mysql目录D:\Programming\mysql-8.0.12- ...

  7. python 理解高阶函数

    高阶函数 高阶函数英文叫Higher-order function.什么是高阶函数? 变量可以指向函数 以Python内置的求绝对值的函数abs()为例,调用abs(): >>> a ...

  8. 洛谷——P1626 象棋比赛

    P1626 象棋比赛 题目描述 有N个人要参加国际象棋比赛,该比赛要进行K场对弈.每个人最多参加两场对弈,最少参加零场对弈.每个人都有一个与其他人不相同的等级(用一个正整数来表示). 在对弈中,等级高 ...

  9. Sqli-labs less 5

    Less-5 这里说一下,有很多的blog是翻译或者copy的,这关正确的思路是盲注.从源代码中可以看到,运行返回结果正确的时候只返回you are in....,不会返回数据库当中的信息了,所以我们 ...

  10. bzoj 3203: [Sdoi2013]保护出题人 凸包

    题目大意: http://www.lydsy.com/JudgeOnline/problem.php?id=3203 题解 首先我们考虑对一大波僵尸来袭的情况进行分析 假设来袭的僵尸是\(\{ a_1 ...