• ionic1跨域问题


    在使用ionic是遇到跨域问题

    我自己尝试简单的单间一个能返回数据的后台服务器,ionic的www目录我使用一个ionic的livereload 来当做一个简易的web服务器,在使用ionic serve 或者ionic build的时候会发生跨域的问题,参考@donghongfei的分享解决了这个问题,记录一下,再次遇到就不怕。

    解决过程:我使用的是他介绍代理服务器方法
    1. 将你的ionic.project 改造成这样(现在ionic.project改名为ionic.config.json),path相当于proxyUrl的一个简称,也就是在页面中使用path的时候回去调用proxyUrl
        {
          "name": "proxy-example",
          "app_id": "",
          "proxies": [
            {
              "path": "/api",//
              "proxyUrl": "http://cors.api.com/api"
            }
          ]
        }
    
    1. 然后把你的API节点设置成angular constant,吧API节点指定为我们的代理url,这样就可以在需要的页面引入ApiEndpoint依赖,来使用这个模块
        angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])
        .constant('ApiEndpoint', {
          url: 'http://localhost:8100/api'
        })
    

    3.设置angular的service

        angular.module('starter.services', [])
    
        //NOTE: We are including the constant `ApiEndpoint` to be used here.
        .factory('Api', function($http, ApiEndpoint) {
          console.log('ApiEndpoint', ApiEndpoint)
    
          var getApiData = function() {
            return $http.get(ApiEndpoint.url + '/tasks')
              .then(function(data) {
                console.log('Got some data: ', data);
                return data;
              });
          };
    
          return {
            getApiData: getApiData
          };
        })
    

    4.通过gulp自动转化地址,修改gulpfile添加两个任务,同时需要先下载replace插件
    npm install replace --save

    var replace = require('replace');
    var replaceFiles = ['./www/js/app.js'];
    
    gulp.task('add-proxy', function() {
      return replace({
        regex: "http://cors.api.com/api",
        replacement: "http://localhost:8100/api",
        paths: replaceFiles,
        recursive: false,
        silent: false,
      });
    })
    
    gulp.task('remove-proxy', function() {
      return replace({
        regex: "http://localhost:8100/api",
        replacement: "http://cors.api.com/api",
        paths: replaceFiles,
        recursive: false,
        silent: false,
      });
    })
    

    5.上面的第二步是他的方法,放在我的项目中不方便,我就单独写了一个proxy文件,然后在需要的模块中引入,调用即可,但是url我这里需要使用服务器地址,而不是livereload地址,这个需要注意
    最后补充:)我的www目录结构已经发布到github,地址

  • 相关阅读:
    vue-指令
    VueMusic-14搜索实现
    VueMusic-13歌手列表
    VueMusic-12歌词滚动
    VueMusic-11播放-歌词适配
    VueMusic-10.播放-歌词加载
    VueMusic-9.播放-播放功能
    VueMusic-8更多-下拉刷新
    VueMusic-7更多-数据适配
    VueMusic-6首页-热门榜单
  • 原文地址:https://www.cnblogs.com/ytg-share/p/6049574.html
Copyright © 2020-2023  润新知