簡單的ajax+express+superagent抓取cnode.js的圖片（瞎幾把抓）
阿新 • • 發佈：2018-12-13
寫這篇部落格的原因：
本小白學完在cnode的node課程中學到正則的應用，30分鐘 入門正則，看著樣例手癢，於是抓了cnode上的所有圖片，也不知道有沒有侵犯肖像權，23333，無意冒犯~~抓取的物件：
利用原生AJAX進行互動的時候，多次卡在響應頭設定，導致出現Access-Control-Allow-Origin未指定,特此寫下此部落格日後好翻查，~~~
頁面index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> img{ width: 200px } </style> <script> function loadXMLDoc(){ var xmlhttp=new XMLHttpRequest() xmlhttp.onreadystatechange=function(){ if(xmlhttp.status==200&&xmlhttp.readyState==4){ var imgs=JSON.parse(xmlhttp.responseText) document.getElementById('myDiv').innerHTML=imgs } } xmlhttp.open('GET',"http://127.0.0.1:8080",true) xmlhttp.send() } </script> </head> <body> <div id="myDiv"><h2>使用 AJAX 修改該文字內容</h2></div> <button type="button" onclick="loadXMLDoc()">修改內容</button> </body> </html>
後端使用node
var express=require('express') var superagent=require('superagent') var app=express() var cnode='http://cnodejs.org' superagent.get(cnode) .end(function(err,res){ if(err)throw err var str=res.text.match(/<img\ssrc="http.*/gi) str=str.map(function(url,index){ return url+'/>' }) app.get('/',function(req,res){ res.setHeader('Access-Control-Allow-Origin','*') res.end(JSON.stringify(str)) }).listen(8080) })
遇到的問題：
使用原生ajax時需要設定origin，但是使用jquery中的ajax就不用在後端設定；
資料互動的型別都為String，陣列需要用JSON.stringify裝換為JSON格式的字串；
效果如下：
