在進行網站開發的過程中經常會用到第三方的數據，但是由於同源策略的限制導致ajax不能發送請求，因此也無法獲得數據。解決ajax的跨域問題有兩種方法：
一、jsonp
二、XMLHttpRequest2中可以配合服務端來解決，在響應頭中加入Access-Control-Allow-Origin:*
1、同源：
同源策略是瀏覽器的一種安全策略，所謂同源是指，域名，協議，端口號完全相同
1.1目的：保護用戶信息安全
1.2限制：cookie、localStorage和IndexDB無法讀取
無法操作跨域的iframe里的dom元素
ajax請求不能發送
2、跨域：
不同源則為跨域
http://api.example.com/detail.html 不同源 域名不同
2 https//www.example.com/detail.html 不同源 協議不同
3 http://www.example.com:8080/detail.html 不同源 端口不同
4 http://api.example.com:8080/detail.html 不同源 域名、端口不同
5 https://api.example.com/detail.html 不同源 協議、域名不同
6 https://www.example.com:8080/detail.html 不同源 端口、協議不同
7 http://www.example.com/detail/index.html 同源 只是目錄不同
3、jsonp原理：
其本質是利用了標簽具有可跨域的特性，由服務端返回預先定義好的javascript函數的調用，並且將服務端數據以該函數參數的形式傳遞過來
4、案例
views.py from django.shortcuts import render import requests def jsonp(request): response = requests.get('http://weatherapi.market.xiaomi.com/wtr-v2/weather?cityId=101121301') #通過這個天氣的API接口獲得天氣信息 #print(response.content) # 字節 response.encoding = 'utf-8' #將其轉化為中文字符 #print(response.text) # 字符串 return render(request,'jsonp.html',{'result': response.text}) #向前端發送result
urls.py from app01 import views from django.contrib.staticfiles.urs from django.urls import path urlpatterns = [ path('jsonp/', views.jsonp), ]
jsonp.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>后台獲取的結果</h1> {{ result }} <h1>js直接獲取結果</h1> <input type="button" value="獲取數據" onclick="getContent();" /> <div id="container"></div> <script src="/static/js/jquery-1.12.4.js"></script> <script> function getContent(){ /* ajax原生方式發送 var xhr = new XMLHttpRequest(); xhr.open('GET','http://wupeiqi.com:8001/jsonp.html?k1=v1&k2=v2'); xhr.onreadystatechange = function(){ console.log(xhr.responseText); }; xhr.send(); */ /* var tag = document.createElement('script'); tag.src = 'http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1454376870403'; document.head.appendChild(tag); document.head.removeChild(tag); */ $.ajax({ url: 'http://www.jxntv.cn/data/jmd-jxtv2.html', //江西電視台的url type: 'POST', //請求方式為POST dataType: 'jsonp', //數據格式為jsonp jsonp: 'callback', jsonpCallback: 'list' //表示url的callback等於list,會額外的通過url發過去 }) } function list(arg){ console.log(arg); } </script> </body> </html>
案例前端結果：
