標籤：分享圖片 title back server 問題 lang style UNC jquery
前端
同源策略並不會攔截靜態資源請求，那麼就將介面偽裝成資源，然後後端配合返回一個前端預定義的方法調用，將傳回值放入調用該函數的形參即可
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script> //前端預定義 function getName(rep){ document.write(rep.name) console.log(rep) } </script></head><body> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script src="http://localhost:8082?callback=getName"></script></body></html>
後端
後端以node為例，其他語言大同小異
var http = require("http");const url = require("url");http.createServer(function (request, response) { let params = url.parse(request.url,true); response.end(params.query.callback + `(${JSON.stringify({name:"abc"})})`);}).listen(8082);
效果
補充
當然了，如果你覺得麻煩，你可以用jq的jsonp或者其他封裝ajax支援jsonp的外掛程式，效果一樣
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script> let url=‘http://localhost:8082?callback=getName‘; $.ajax({ url: url, type: "get", dataType: "jsonp", jsonpCallback: "getName", success: function (rep) { document.write(rep.name) console.log(rep) } }) </script></head><body></body></html>
跨域問題-jsonp
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
