【API設計スタイル—RESTful】:番外編:クロスドメイン問題(四)

10162 ワード
国境をまたぐ アングラーJS ionic
問題の説明:
Ionic serveブラウザでデバッグする時のIPは:http://localhost:8100 私の本機のサービス端末のIPは:http://localhost:8080 だから、ドメインをまたいで訪問する問題があります.
解決方法
【1】レスポンスを設定します.
レスポンス.set Header(「Access-Coontrol-Origin」);
@RequestMapping(value="/course/{id}",method=RequestMethod.GET)
public @ResponseBody Course GetCourse(@PathVariable("id") String courseid,HttpServletResponse response){        
    Course course=new Course();
    course.setId(courseid);
    //course.setCode(coursecode);
    course.setCourseName("    ");
    response.setHeader("Access-Control-Allow-Origin", "*"); //    url         
    return course;
}
このような解決方法の欠点:このようにすると、各方法は、パラメータとしてHttpServletResonseに導入されます.
public class ResponseInterceptor implements HandlerInterceptor {    

    public boolean preHandle(HttpServletRequest request, HttpServletResponse response,
        Object obj) throws Exception {
        response.setHeader("Access-Control-Allow-Origin", "*"); //      url         ，*    
        return true;
    }
    public void postHandle(HttpServletRequest request, HttpServletResponse response,
        Object obj, ModelAndView mv) throws Exception { 

    }
    public void afterCompletion(HttpServletRequest request,
        HttpServletResponse response, Object obj, Exception ex)
        throws Exception {
        // TODO Auto-generated method stub

    }
}
スクリーンショットの設定(spring MVC.xmlで)
    <!--      -->
    <mvc:interceptors>
        <!--      ，         -->
        <mvc:interceptor>
            <mvc:mapping path="/**"/>
            <bean class="com.tgb.itoo.interceptor.ResponseInterceptor"></bean>
        </mvc:interceptor>
    </mvc:interceptors>
質問:GET要求以外に、POSTとDELETE要求はまだドメインをまたいでアクセスできません.エラーメッセージ:XMLHttp Request cannot load Resonse to preflight request doesn’t pass access control check:No‘Access-Olle-Oright-Origin’header theress.therecentes.に対して、シンプルなGEress.Theress.HTTP Resonseの後にAccess-Coontrol-Originを追加するだけです.b.簡単でない要求に対しては、POST、PUT、DELETEなど、ブラウザは2回に分けて応答します.最初のpreflight(method:OPTTIONS)は、主にソースが合法かどうかを検証し、許可されたHeaderなどを返します.二回目は本当のHTTP応答です.だからサーバーはOPTTIONS応答を処理しなければなりません.この問題の解決方法:
save: {method:'POST',isArray:false，headers: {'Content-Type': 'application/x-www-form-urlencoded'}},
しかし、これはあなたがサービスに送るデータがJSON形式ではないことを示しています.これは私達の需要に合わないです.DELETE要求はまだドメインを越えてアクセスできません.参考資料:http://blog.csdn.net/freshlover/article/details/44223467
2.プロキシサーバの設定(最終ソリューション)
注意してください.これらの設定は、ionic serveとionic run-lを通じてのみ適用されます.
全体説明
1.まず、私達はionic.projectファイルに私達の代理店を設置する必要があります.これは私達のIonicローカルサーバにこれらの住所を傍受して、これらの要求を私達の目標住所に送ります.2.私たちのアプリケーションでは、serveまたはrun-lを実行するとき、私たちは訪問する結点アドレスをプロキシのアドレスに置き換える必要があります.3.gulpタスクのreplaceモジュールを使って、輸出先の住所を変えるのは簡単です.4.推奨の方法は、Anglar Contentを設定して、代理しようとするAPIの位置を特定することです.これが私たちが以下に採用する方法です.私たちは同時にAnglar Serviceを設置してAPIノードからデータを取得します.
詳細な流れ
プロキシパスを設定
例えば私たちは訪問したいです.http://cors.api.com/apiしかし、私たちはlocal hostからのオリジンを許可してくれません.プロキシの設定には2つのことが含まれています.あなたのローカルIonicサーバーでアクセスするべきパスは、最終的にAPIのproxyUrlにアクセスする必要があります.あなたのionic.projectでこのように設定します.
【API设计风格—RESTful】：番外篇：跨域问题（四）_第1张图片
{
  "name": "proxy-example",
  "app_id": "",
  "proxies": [ { "path": "/api", "proxyUrl": "http://cors.api.com/api" } ] }
ionic serveを通じてあなたのサーバーを起動します.
上で指定したように、あなたがIonicサーバの住所を訪問する時に.http://localhost:8100/api あなたの名前で訪問します.http://cors.api.com/api. これでCORSはいらないです.
Anglar Contentを設定します.
あなたのAPIの接合点をAnglar Contntsに設定するのはとても簡単なことです.APIの結点を私たちの代理URLに指定します.その後、正式な住所をコンサート・イベントとします.
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])
.constant('ApiEndpoint', {
  url: 'http://localhost:8100/api'
}) // For the real endpoint, we'd use this // .constant('ApiEndpoint', { // url: 'http://cors.api.com/api' // })
設定したら次のようにアプリにアプリアプリを導入して依存して、勝手にこのコンサートを呼び出すことができます.Anglar 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
  };
})
Gulpでアドレスを自動変換する
この過程で、私たちは2つのタスクを追加するためにGulpfile.jsを変更したいです.プロキシを追加し、プロキシを削除します.まずreplaceモジュールnpm install–save replaceをインストールします.
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,
  });
})
参考資料:http://ionichina.com/topic/54f051698cbbaa7a56a49f98
jqGrid使用まとめ