2

私はcropper.jsを使用して画像をトリミングしています画像のsrcを取るディレクティブを書きました

return {
        restrict: 'A',
        controller: _cropperController,
        bindToController: {
            imagesrc:"=?"
        },
        link:function($scope, $element, $attrs, ctrl){
            var img = document.createElement("img");
            img.src = ctrl.imagesrc;
            img.id='image';
            document.getElementsByTagName("body")[0].appendChild(img);
            Cropper.setDefaults({
                checkCrossOrigin: false
            });
            var cropper = new Cropper(img, {
                aspectRatio: 1 / 1,
                checkCrossOrigin: false,
                crop: function(e) {
                    console.log(e.detail.x);
                    console.log(e.detail.y);
                }
            });
            if(cropper.getCroppedCanvas()){
                var imgurl =  cropper.getCroppedCanvas().toDataURL();
                ctrl.imagesrc= imgurl;
            }

        }
    };

次に、画像要素を作成し、それを dom に追加して、画像をクロッパー コンストラクターに渡します。

デフォルト オプション checkCrossOrigin を false に設定しましたが、それでもエラーが発生します

要求されたリソースに「Access-Control-Allow-Origin」ヘッダーがありません。したがって、オリジン「http://localhost:9090」へのアクセスは許可されていません。

どんな助けでも大歓迎です。

4

2 に答える 2

2

クライアントがサーバーにリクエストを送信するときはいつでも、クライアントとサーバーのプロトコル、ドメイン、およびポートが同じでなければなりません。これらの属性のいずれかが異なる場合、クロス オリジンの問題が発生します。

クライアントのサイトで修正を行うことはできませんが、サーバー側で行う必要があります。サーバーでは、すべてのサイトからのリクエストが受け入れられることを確認する必要があります。応答のヘッダーを変更する必要があります。

Vertx をサーバーとして使用していますが、これが Cross Origin の応答を処理する方法です

routingContext.response().putHeader("content-type", "application/json")
      .putHeader("Access-Control-Allow-Origin", "*")
      .putHeader("Access-Control-Allow-Headers", "Content-Type")
      .putHeader("Access-Control-Allow-Headers", "Authorization")
      .putHeader("Access-Control-Allow-Methods", "GET, POST, PUT , OPTIONS");

クライアント側から修正することはできませんので、頭をぶつけないでください。知らず知らずのうちに多くの時間を過ごしてきました。

ありがとう。

于 2017-09-07T05:42:09.237 に答える
-1

Chrome 拡張機能の例を見てみましょう。著者の URL を許容される URL に配置すると、クロス モジュールの呼び出しは停止しません。

それ以外の場合は、常に POST/GET ではなく OPTIONS になります。

于 2017-09-07T05:41:03.123 に答える