PhoneGap开发跨平台移动APP - 解决跨域资源共享

解决跨域资源共享

一、WebApi解决跨域资源共享。

  开发中选择WebApi来作为服务端的数据接口,由于使用PhoneGap,就需要通过js来获取远程远程数据服务器的数据,由于同源策略的限制,这就涉及到跨域资源共享问题。

  首先新建一个简单的WebApi项目,

  使用微软的CORS解决方案,再Nugget中下载microsoft.aspnet.webapi.cors

  配置WebApiConfig:

//这里先用*来测试,生产环境下,这样配置是不安全的,需要做一些限制。config.EnableCors(new EnableCorsAttribute("*", "*", "*"));

// Web API configuration and services
// Configure Web API to use only bearer token authentication.
config.SuppressDefaultHostAuthentication();
config.Filters.Add(new HostAuthenticationFilter(OAuthDefaults.AuthenticationType));

// Web API routes
config.MapHttpAttributeRoutes();

config.Routes.MapHttpRoute(
    name: "DefaultApi",
    routeTemplate: "api/{controller}/{id}",
    defaults: new { id = RouteParameter.Optional }
);

  创建一个APIController,默认的就可以:

好了,服务端就算简单的配置好了,

重新开个项目,写一个简单的Ajax访问:

<script type="text/javascript">
    $(function(){
      $.ajax({
        type: "Put",
        url: "http://localhost:10734/api/Charging/2",  //这里的http://localhost:10734 就是WebApi运行的服务地址
        data: { "": "post方法2" },
        success: function (data) {
          console.debug(data);
          $("#divcontent").text(data);
        }
      });
    })
  </script>

好了,测试一下,发现可以获得返回数据。

这是一个极度简单的同源策略解决方案。

还有更多、更详细的解决方案,以后慢慢更新。。。

时间: 2024-11-09 19:23:26

PhoneGap开发跨平台移动APP - 解决跨域资源共享的相关文章

vue-webpack项目本地开发环境设置代理解决跨域问题

前言: 一般跨域问题只要后端配置好的话,是不需要前端做处理的,但也不能保证你遇到的所有后端都能很好的处理这个问题,这个时候可能就需要前端设置代理解决这个问题了. 配置方法: 1. config/index.js proxyTable: { '/api': { target: 'http://192.168.8.8:8080', // 要访问接口的域名 // secure: false, // 如果是https接口,需要配置这个参数 changeOrigin: true, // 如果接口跨域,需要

vue开发环境和生产环境里面解决跨域的几种方法

  跨域指浏览器不允许当前页面的所在的源去请求另一个源的数据.源指协议,端口,域名.只要这个3个中有一个不同就是跨域. 这里列举一个经典的列子: #协议跨域 http://a.baidu.com访问https://a.baidu.com: #端口跨域 http://a.baidu.com:8080访问http://a.baidu.com:80: #域名跨域 http://a.baidu.com访问http://b.baidu.com:   现在很多公司都是采用前后分离的方式开发.那么出现经常和会

解决前端开发环境中的的跨域问题

一.为什么会有跨越问题是客户端浏览器同源策略导致的,就是浏览器不允许不同源的站点相互访问.试想一下要是没有这个,那站点里的安全信息如cookie,账号/密码等是不是很容易被其它站点获取.二.解决思路知道是客户端浏览器为了安全使用同源策略导致的,而服务端是没有这个限制的,那我们就只能通过服务端进行跨域了.不管是jsonp,core,还是代理的方式,都是需要服务配合的.哈哈,这也是为啥后端和生产环境下比较少听说跨域的问题,所以这里介绍前端开发环境中的几种解决方法.三.解决方案1.完全交予后端解决,配

修改浏览器属性配置的作用---开发机上解决跨域的方式

开发阶段解决跨域问题,可以通过修改浏览器属性配置,来关闭浏览器的同源策略保护机制,从而实现解决跨域问题,有下面三种方式:1. MAC系统,终端输入代码段 "open -n /Applications/Google\ Chrome.app/ --args --disable-web-security --user-data-dir=/Users/admin/MyChromeDevUserData/" 2.window系统,cmd输入代码段 "C:\Program Files (

前端开发如何独立解决跨域问题

背景 跨域是由浏览器同源策略引起的,是指页面请求的接口地址,必须与页面url地址处于同域上(即域名,端口,协议相同).这是为了防止某域名下的接口被其他域名下的网页非法调用,是浏览器对JavaScript施加的安全限制. 这个措施出发点是好的,但在项目开发的过程中,常常给前端开发者带来麻烦. 由于页面开发中,静态资源是放在本地电脑上的,访问这些资源通常通过IP方式(127.0.0.1)或者localhosts来访问,与线上服务器所在域名不符,不能顺利进行接口调用. 解决跨域问题常用的解决方案有两个

vue项目开发,用webpack配置解决跨域问题

今天在本地开发时候碰到了跨域的问题,突然觉着跨域问题在所难免啊,之前没有没有碰到总觉着解决跨域很高大上的样纸,其实就是受限于网络的同源策略,跨域前后端都可以进行处理. 1,后端更改header header('Access-Control-Allow-Origin:*');//允许所有来源访问 header('Access-Control-Allow-Method:POST,GET');//允许访问的方式 2,使用jsonp进行跨域 getData () { var self = this $.

血淋淋的教训—将Vue项目打包成app的跨域问题

1 devServer: { 2 host: '192.168.1.58', 3 port: 9999, 4 historyApiFallback: true, 5 noInfo: true, 6 overlay: true, 7 // 配置服代理务器 8 9 proxy: { 10 '/hydro/': { // 只要指向/hydro/的请求,都会自动代理到下面的target的地址 11 target: "http://192.168.1.180:8081", //对方服务器地址 1

Flask解决跨域

Flask解决跨域 问题:网页上(client)有一个ajax请求,Flask sever是直接返回 jsonify. 然后ajax就报错:No 'Access-Control-Allow-Origin' header is present on the requested 原因:ajax跨域访问是一个老问题了,解决方法很多,比较常用的是JSONP方法,JSONP方法是一种非官方方法,而且这种方法只支持GET方式,不如POST方式安全. 即使使用jquery的jsonp方法,type设为POST

Spring Boot中通过CORS解决跨域问题

今天和小伙伴们来聊一聊通过CORS解决跨域问题. 同源策略 很多人对跨域有一种误解,以为这是前端的事,和后端没关系,其实不是这样的,说到跨域,就不得不说说浏览器的同源策略. 同源策略是由Netscape提出的一个著名的安全策略,它是浏览器最核心也最基本的安全功能,现在所有支持JavaScript的浏览器都会使用这个策略.所谓同源是指协议.域名以及端口要相同.同源策略是基于安全方面的考虑提出来的,这个策略本身没问题,但是我们在实际开发中,由于各种原因又经常有跨域的需求,传统的跨域方案是JSONP,