如何避免混合内容尝试上传图片

Question

“我正在尝试使用 tinyMce 上传图像，但不断收到混合内容错误，我知道这是因为它试图使用 'http://' 而不是 https:// 进行 api 调用，问题是我不知道在哪里解决这个问题。”我已经尝试了我能想到的一切，请我是 laravel 和 vue 的新手，这是我第一次使用 tinymce 编辑器。 这是错误消息： “混合内容：'https://bizguruh.com/admin/add/product/117/ARTICLES' 处的页面通过 HTTPS 加载，但请求了不安全的 XMLHttpRequest 端点 'http://bizguruh.com/api/image-upload'。此请求已被阻止；内容必须通过 HTTPS 提供。”

<app-editor 
                     :init="{
                         plugins: 'advlist autolink lists link image imagetools charmap print preview anchor textcolor insertdatetime media table paste code help wordcount',

                             toolbar: 'undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat |image help',
                             image_title: true,

                        height: 300,


                        images_upload_url: '/api/image-upload/',

                        file_picker_types: 'image',
                        automatic_uploads:false,
                        relative_urls:false,
                       convert_urls:false,
                        file_picker_callback:function(callback, value, meta) {
                              loadFile(callback, value)        

                    }, }" class="form-control" v-model="product.articles.description">
                    </app-editor>

 loadFile(cb,mt){
              if (mt.filetype === 'image') {
                              let up = this.$refs.upload


                          up.onchange = function() {
                        let file = this.files[0];
                        let reader = new FileReader();
                        reader.onload = (e)=> {
                           let id = 'blobid' + (new Date()).getTime();
                            let blobCache =  tinymce.activeEditor.editorUpload.blobCache;
                            let base64 = reader.result.split(',')[1];
                            let blobInfo = blobCache.create(id, file, base64);
                            blobCache.add(blobInfo);

                     /* call the callback and populate the Title field with the file name */
                        cb(blobInfo.blobUri(), { title: file.name });
                        };
                        reader.readAsDataURL(file);
                        }

                        up.click()


                    }



   public function imageUpload(Request $request){

       $file = $request->file('file');


      $path= url('images/').'/'.$file->getClientOriginalName();
    $imgpath = $file->move(public_path('images/'),$file->getClientOriginalName());
    $fileNameToStore = $path;

    return json_encode(['location' => $fileNameToStore]); 
 }

Answer 1

替换

images_upload_url: '/api/image-upload/'

与

images_upload_url: '{{ secure_url('api/image-upload') }}'

它将强制生成一个secured URL。 这同样适用于

$path= secure_url('images/').'/'.$file->getClientOriginalName();