[問題] api串接與跨域問題

[BOMBGUY (Romeo)]

初學前端兩個月，想試試看從氣象局api串接資料(JSON)來玩玩。

有金鑰已經取得url，可是遇到跨域的問題，上網找了許多解決方法，

不過似乎很多都要需要後端配合?最後找到了jsonp這個方法。

1.

創建一個script用src屬性傳入，但是又出錯了:

Cross-Origin Read Blocking (CORB) blocked cross-origin response

(我的URL) with MIME type application/json.


這個error的意思是因為我檔案格式是JSON所以不能引入嗎?


2.

我試過的第二個方法是直接用jquery以jsonp的方式取得:

$.ajax({

      url: api,
      type: "GET",
      dataType: "jsonp",
      success: function (data) {
        console.log(data);
      },
      error: function(){
        alert("false")
      }
  });

又是出現一樣的error


3.

唯一成功的方法是安裝google的小套件: allow-control-allow-origin: *

並把上面的dataType改成json就能成功。但覺得有點旁門左道哈哈哈



請問版上各位高手應該怎麼解決這個問題呢?

希望能盡量以純前端解決這個問題(小弟只會前端語言QQ)



--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 111.252.155.253
※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1542261929.A.A06.html
※ 編輯: BOMBGUY (111.252.155.253), 11/15/2018 14:23:44
推 kyrc: https://developer.mozilla.org/zh-TW/docs/Web/HTTP/CORS
感謝k大，找方法時有找到這篇文，但是有看沒有懂，我再仔細看個清楚^  _  ^
→ ssccg: 初學的話你Y先搞懂為什麼要限制cross origin存取
14:51
→ ssccg: 不是怎麼解決這問題，而是你不該這麼做
Yes, sir!
推 pm2001: 後端唯一解
QAQ
※ 編輯: BOMBGUY (223.141.123.247), 11/15/2018 17:55:52
推 vi000246: 我記得google已經把前端跨域的各種方式都擋死了
→ vi000246: 這是client端的問題 你的瀏覽器幫你擋的
推 shter: 我串火車的 ptx API 倒沒碰過這種問題
今天用ptx API真的暢行無阻www
推 shter: 但是串接這種資料不應該用 Script src 弄進來吧
→ shter: 用var xhr = new XMLHttpRequest()再 xhr.open('GET', url)
→ taitzyhwan: 後端要設定允許跨域的網域
→ inxbone: 同五樓所說安全性問題 瀏覽器擋掉了 唯一解就是後端回傳
→ inxbone: 的表頭宣告允許 如果你只是練習用你原本的插件就夠了
感謝各位前輩回覆，已選擇使用插件。
※ 編輯: BOMBGUY (42.76.148.168), 11/16/2018 17:48:39
※ 編輯: BOMBGUY (42.76.148.168), 11/16/2018 17:49:22