表題の通り、ajax通信時にエラーが発生します。
自分なりに調べてみるとクロスオリジンやらブラウザのキャッシュやら幾つか可能性のありそうなものがヒットしましたが、私の環境がどのケースに該当するかは検証の仕方も含め特定出来ておりません。
どなたかご教示いただければ幸いです。
状況ですが、VUEJSでAxiosというライブラリを用いてAjax通信をしています。
具体的な使用例はモーダルウィンドウやショッピングカートなどです。
商品購入ボタン→右上のカートに「+1」といった(Amazonのような)、画面遷移をせずにコンテンツにデータを再セットする部分があるのですが、こういった箇所がすべてダメでした。(Chrome,firefoxどちらもNG)
原因と対策について、どなたかお力添えいただけないでしょうか。
よろしくお願いいたします。
追記
エラー内容については下記になります。
他に必要な情報等ありましたら、お手数ですがご指示頂ければと思います。
photo:1 Mixed Content: The page at 'https://golden-bear-83769-stg.herokuapp.com/photo' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://golden-bear-83769-stg.herokuapp.com/api/favorite'. This request has been blocked; the content must be served over HTTPS.
javascript
1 addFavorite() { 2 const form = objectToFormData({user_id: this.user_id}) 3 post(`/api/favorite/`, form) 4 .then((res) => { 5 // 6 }) 7 .catch((err) => { 8 // 9 }) 10 },
javascript
1 2export function toMulipartedForm(form, mode) { 3 .... 4 return objectToFormData(form) 5} 6 7export function objectToFormData(obj, form, namespace) { 8 let fd = form || new FormData() 9 let formKey 10 for(var property in obj) { 11 if(obj.hasOwnProperty(property)) { 12 if(namespace) { 13 formKey = namespace + '[' + property + ']'; 14 } else { 15 formKey = property; 16 } 17 if(obj[property] instanceof Array) { 18 for (var i = 0; i < obj[property].length; i++) { 19 objectToFormData(obj[property][i], fd, `${property}[${i}]`); 20 } 21 } else if(typeof obj[property] === 'object' && !(obj[property] instanceof File)) { 22 objectToFormData(obj[property], fd, property); 23 } else { 24 fd.append(formKey, obj[property]); 25 } 26 } 27 } 28 return fd 29}
回答2件
あなたの回答
tips
プレビュー