今天试着用Hbuilder写app的前段显示页面,在第一步时就被打住了,ajax异步调用服务器的登录接口时,报错,

显示这样的错误

XMLHttpRequest cannot loadhttp://www.baidu.com/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

这个百度的网址是我自己试着玩的,然后我就开始寻找解决的办法。

网上给出的办法好像有两种,我给出我选用的这种,并且亲测成功。

document.getElementById("submitBut").addEventListener('tap',function ajaxPost(){
mui.ajax('http://localhost:8080/demo01/user_service', {
data: { },
dataType: 'json', //服务器返回json格式数据
type: 'post', //HTTP请求类型
timeout: 10000, //超时时间设置为10秒;
success: function(data) {
mui.openWindow('index.html', 'id', {}) },
error: function(xhr, type, errorThrown) { }
});
});

这个是我App端js的访问代码,如果访问成功就跳转到主界面。

服务器端的话,我是用的struts2,写了一个void action方法来接收ajax的访问,并且返回json格式的数据。

action中的代码如下:

  

HttpServletResponse response = ServletActionContext.getResponse();
/**
*需要添加下面三行header头
*/
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Methods","POST,GET,OPTIONS,DELETE"); //支持的http 动作
response.setHeader("Access-Control-Allow-Headers","x-requested-with,content-type"); //响应头 请按照自己需求添加。 Map<String,Object> result=new HashMap<String,Object>();
ServletOutputStream out = response.getOutputStream();
result.put("result","success");
result.put("message","message");
result.put("description","description");
JSONObject json = new JSONObject(result);
out.println(json.toString());

然后就可以ajax跨域访问了。

网上还有一种方法是 把ajax中的数据格式从json改成jsonp,我没测试;

还有一种说的是 把mui.js中的代码注释掉一行,这个我测试失败。

还有一种说法,测试项目的时候,不要把地址写成localhost或者127.0.0.1,win+R,输入cmd,输入ipconfig,然后查看自己的ipv4地址,没有测试,大家想要测试的可以试一试,玩意对了呢?

Hbuilder编辑App时,ajax跨域访问失败问题的更多相关文章

  1. 浅析JSONP-解决Ajax跨域访问问题

    浅析JSONP-解决Ajax跨域访问问题 很久没有写随笔了,总是感觉没时间,其实时间就是...废话少说,前几天,工作上有一新需求,需要前端web页面异步调用后台的Webservice方法返回信息.实现 ...

  2. 关于JQuery Ajax 跨域 访问.net WebService

    关于这个 jQuery Ajax跨域访问 WebService 前天整了好几个小时没整明白 今天再看一下 结果突然就顿悟了 1.建一个空webApplication --添加--新建项--web服务( ...

  3. ajax跨域访问http服务--jsonp

    在前面一篇文章<Spring Cloud 前后端分离后引起的跨域访问解决方案>里我们提到使用ajax跨域请求其他应用的http服务,使用的是后台增加注解@CrossOrigin或者增加Co ...

  4. ajax跨域访问的解决方案

    今天的工作中要访问摄像机内部的一个web站点,这就涉及到jquery的ajax跨域访问的问题.我使用的是jquery1.7的版本,下面总结如下: 问题一:一开始用IE调试,总是返回No Transpo ...

  5. Ajax跨域访问解决办法

    方法1. jsonp实现ajax跨域访问示例 jsp代码: <body> <input type="button" onclick="testJsonp ...

  6. Web Api 2(Cors)Ajax跨域访问

    支持Ajax跨域访问ASP.NET Web Api 2(Cors)的简单示例教程演示   随着深入使用ASP.NET Web Api,我们可能会在项目中考虑将前端的业务分得更细.比如前端项目使用Ang ...

  7. ajax 跨域访问的解决方案

    ajax 跨域访问的解决方案 一.什么是跨域: 1.什么样的请求属于跨域: 域名,端口有任何一个不相同都属于跨域: 二.跨域的常用几种解决方案: 1.jsonp: 2.iframe: 3.webcon ...

  8. JS Ajax跨域访问

    js ajax跨域访问报"No 'Access-Control-Allow-Origin' header is present on the requested resource 如果请求的 ...

  9. html5 app开发实例 Ajax跨域访问C# webservices服务

    通过几天的研究效果,如果在vs2010工具上通过webservice还是比较简单的,毕竟是一个项目. 如果您想通过HTML5 做出来的移动APP去访问c#做出来的webservice,那么就没那么简单 ...

随机推荐

  1. ASP.NET程序从IIS6移植到IIS7时出现500.22错误(转)

    最可能的原因: •    此应用程序在 system.web/httpModules 节中定义配置. 可尝试的操作: •    将配置迁移到 system.webServer/modules 节.也可 ...

  2. openedx使用中可能用到的一些资源

    这几天一直在弄openedx,你会发现安装好只是第一步,后面还有很多东西在等着你,那么哪里可以看到较新的资料了,分享几个站点: 1.https://readthedocs.org/projects/e ...

  3. nowcoder(牛客网)提高组模拟赛第一场 解题报告

    T1 中位数(二分) 这个题是一个二分(听说是上周atcoder beginner contest的D题???) 我们可以开一个数组b存a,sort然后二分b进行check(从后往前直接遍历check ...

  4. 【English】20190430

    Network security网络安全[ˈnetwɜːrk] [sɪˈkjʊrəti]  Teradata Generic Security Service 通用安全服务[dʒəˈnerɪk] [s ...

  5. 极光开发者沙龙 JIGUANG MEETUP —— 移动应用性能优化实践

    活动背景 移动互联网时代,各大互联网公司都已将自己的产品和服务全面移动化,各类新产品功能都会优先在移动 App 上尝试. 应用性能作为影响用户体验最重要的因素,在开发过程中显得尤为重要. 用户网络环境 ...

  6. [转]iOS系列译文:深入理解 CocoaPods

    Cocoapods是 OS X 和 iOS 下的一个第三方库管理工具.你能使用CocoaPods添加被称作“Pods”的依赖库,并轻松管理它们的版本,而不用考虑当前的时间和开发环境. Cocoapod ...

  7. P5030 长脖子鹿放置 最小割

    $ \color{#0066ff}{ 题目描述 }$ 如图所示,西洋棋的"长脖子鹿",类似于中国象棋的马,但按照"目"字攻击,且没有中国象棋"别马腿& ...

  8. 设计模式 — 建造者(生成器)模式(Builder)

    考虑这样一种业务场景,我们构建一个业务对象,但是这个业务对象及其复杂.为了代码的根号的可读性,我们会把这个对象的构建过程根据精密联系的程度来拆分成几个类来完成.最后再放到一起使用来生成复杂对象.这个业 ...

  9. react-router的简单使用

    React Router是一个基于React之上的强大路由库,可以让你向应用中快速的添加视图和数据流,同时保持页面与URL间的同步. 1.安装: npm install --save react-ro ...

  10. 高阶篇:4.2.1)DFMEA框架搭建,填写项目与要求

    本章目的:明确DFMEA的数量及目标,搭建框架,填写项目与要求. 1.步骤: 1)明确DFMEA的数量及目标: 2)搭建框架(所有DFMEA的): 3)填写项目与要求: 2.1明确DFMEA的数量及目 ...