ajax請求限制:
ajax只能向同源發送請求,而不同源無法發送請求
解決方法
1 - JSONP(前後端配合)
JOSONP並不是AJAX的一種,而是繞過伺服器的方法,達到和AJAX同樣的效果
前端在
<script>
function fn2 (data) {
console.log('客户端的fn函数被调用了')
console.log(data);
}
</script>
<script src='http//:localhost:3000/test'> </script>
後端
已node為範例
app.get('/test',(req,res)=>{
const result='fn({name:jack})'
send(fn)
}
CROS(cross–origin-resource-sharing) (只需後端)
即跨域資源共享,它允許瀏覽器向跨域資源的服務器發出請求,這種作法只要服務器端設定後即可讓他人訪問
只要服務器在代碼裡加上 Access-Control-Allow-Origin 和 Access-Control-Allow-Methods 表示誰可以訪問服務器 和 用哪種方式(get/post)即可讓其他人使用ajax發送請求
// 拦截所有请求
app.use((req, res, next) => {
// 1.允许哪些客户端访问我
// * 代表允许所有的客户端访问我
// 注意:如果跨域请求中涉及到cookie信息传递,值不可以为*号 比如是具体的域名信息
res.header('Access-Control-Allow-Origin', 'http://localhost:3000')
// 2.允许客户端使用哪些请求方法访问我
res.header('Access-Control-Allow-Methods', 'get,post')
// 允许客户端发送跨域请求时携带cookie信息
res.header('Access-Control-Allow-Credentials', true);
next();
});
app.get('/cross', (req, res) => {
res.send('ok')
});
案例:openweather
常見的獲取天氣api在openweather裡就是使用此方式
伺服器請求伺服器(只需後端)
AJAX的同源限制是瀏覽器給AJAX,但是伺服器跟伺服器之間是沒有同源限制的
換句話說,我們可以像自己的伺服器發送請求,再讓自己的伺服器向第三方發送請求!!
後端:
後端部分已NODE為主,需要安裝 request插件
app.get('/server', (req, res) => {
request('http://localhost:3001/cross', (err, response, body) => {
res.send(body);
})
});
前端:
前端部分就和平常調用ajax那樣就可以
btn.onclick = function () {
ajax({
type: 'get',
url: 'http://localhost:3000/server',
success: function (data) {
console.log(data);
}
})
};