9種跨域方式實現原理

来源:https://www.cnblogs.com/huaweiyun/archive/2023/02/07/17098754.html
-Advertisement-
Play Games

摘要：當協議、子功能變數名稱、主功能變數名稱、埠號中任意一個不相同時，都算作不同域。不同域之間相互請求資源，就算作“跨域”。 本文分享自華為雲社區《九種跨域方式實現原理咋回事》，作者：龍哥手記 一、什麼是跨域？ 1.什麼是同源策略及其限制內容？ 同源策略是一種約定，它是瀏覽器最核心也最基本的安全功能，如果缺少了同 ...


摘要：當協議、子功能變數名稱、主功能變數名稱、埠號中任意一個不相同時，都算作不同域。不同域之間相互請求資源，就算作“跨域”。

本文分享自華為雲社區《九種跨域方式實現原理咋回事》，作者：龍哥手記

一、什麼是跨域？

1.什麼是同源策略及其限制內容？

同源策略是一種約定，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，瀏覽器很容易受到XSS、CSRF等攻擊。所謂同源是指"協議+功能變數名稱+埠"三者相同，即便兩個不同的功能變數名稱指向同一個ip地址，也非同源。

同源策略限制內容有：

  • Cookie、LocalStorage、IndexedDB 等存儲性內容
  • DOM 節點
  • AJAX 請求發送後，結果被瀏覽器攔截了

但是有三個標簽是允許跨域載入資源：

  • <img src=XXX>
  • <link href=XXX>
  • <script src=XXX>

2.常見跨域場景

當協議、子功能變數名稱、主功能變數名稱、埠號中任意一個不相同時，都算作不同域。不同域之間相互請求資源，就算作“跨域”。

特別說明兩點：

第一：如果是協議和埠造成的跨域問題“前臺”是無能為力的。

第二：在跨域問題上，僅僅是通過“URL的首部”來識別而不會根據功能變數名稱對應的IP地址是否相同來判斷。“URL的首部”可以理解為“協議, 功能變數名稱和埠必須匹配”。

這裡你或許有個疑問：請求跨域了，那麼請求到底發出去沒有？

跨域並不是請求發不出去，請求能發出去，服務端能收到請求並正常返回結果，只是結果被瀏覽器攔截了。你可能會疑問明明通過表單的方式可以發起跨域請求，為什麼 Ajax 就不會?因為歸根結底，跨域是為了阻止用戶讀取到另一個功能變數名稱下的內容，Ajax 可以獲取響應，瀏覽器認為這不安全，所以攔截了響應。但是表單並不會獲取新的內容，所以可以發起跨域請求。同時也說明瞭跨域並不能完全阻止 CSRF，因為請求畢竟是發出去了。

二、跨域解決方案

1.jsonp

1) JSONP原理

利用 <script> 標簽沒有跨域限制的漏洞，網頁可以得到從其他來源動態產生的 JSON 數據。JSONP請求一定需要對方的伺服器做支持才可以。

2) JSONP和AJAX對比

JSONP和AJAX相同，都是客戶端向伺服器端發送請求，從伺服器端獲取數據的方式。但AJAX屬於同源策略，JSONP屬於非同源策略（跨域請求）

3) JSONP優缺點

JSONP優點是簡單相容性好，可用於解決主流瀏覽器的跨域數據訪問的問題。缺點是僅支持get方法具有局限性,不安全可能會遭受XSS攻擊。

4) JSONP的實現流程

  • 聲明一個回調函數，其函數名(如show)當做參數值，要傳遞給跨域請求數據的伺服器，函數形參為要獲取目標數據(伺服器返回的data)。
  • 創建一個<script>標簽，把那個跨域的API數據介面地址，賦值給script的src,還要在這個地址中向伺服器傳遞該函數名（可以通過問號傳參:?callback=show）。
  • 伺服器接收到請求後，需要進行特殊的處理：把傳遞進來的函數名和它需要給你的數據拼接成一個字元串,例如：傳遞進去的函數名是show，它準備好的數據是show('我不愛你')。
  • 最後伺服器把準備的數據通過HTTP協議返回給客戶端，客戶端再調用執行之前聲明的回調函數（show），對返回的數據進行操作。

在開發中可能會遇到多個 JSONP 請求的回調函數名是相同的，這時候就需要自己封裝一個 JSONP函數。

// index.html
function jsonp({ url, params, callback }) {
 return new Promise((resolve, reject) => {
 let script = document.createElement('script')
    window[callback] = function(data) {
 resolve(data)
 document.body.removeChild(script)
 }
    params = { ...params, callback } // wd=b&callback=show
 let arrs = []
 for (let key in params) {
 arrs.push(`${key}=${params[key]}`)
 }
 script.src = `${url}?${arrs.join('&')}`
 document.body.appendChild(script)
 })
}
jsonp({
  url: 'http://localhost:3000/say',
  params: { wd: 'Iloveyou' },
  callback: 'show'
}).then(data => {
  console.log(data)
})

上面這段代碼相當於向http://localhost:3000/say?wd=Iloveyou&callback=show這個地址請求數據，然後後臺返回show('我不愛你')，最後會運行show()這個函數，列印出'我不愛你'

// server.js
let express = require('express')
let app = express()
app.get('/say', function(req, res) {
 let { wd, callback } = req.query
  console.log(wd) // Iloveyou
  console.log(callback) // show
 res.end(`${callback}('我不愛你')`)
})
app.listen(3000)

5) jQuery的jsonp形式

JSONP都是GET和非同步請求的，不存在其他的請求方式和同步請求，且jQuery預設就會給JSONP的請求清除緩存。

$.ajax({
url:"http://crossdomain.com/jsonServerResponse",
dataType:"jsonp",
type:"get",//可以省略
jsonpCallback:"show",//->自定義傳遞給伺服器的函數名，而不是使用jQuery自動生成的，可省略
jsonp:"callback",//->把傳遞函數名的那個形參callback，可省略
success:function (data){
console.log(data);}
});

2.cors

CORS 需要瀏覽器和後端同時支持。IE 8 和 9 需要通過 XDomainRequest 來實現。

瀏覽器會自動進行 CORS 通信，實現 CORS 通信的關鍵是後端。只要後端實現了 CORS，就實現了跨域。

服務端設置 Access-Control-Allow-Origin 就可以開啟 CORS。 該屬性表示哪些功能變數名稱可以訪問資源，如果設置通配符則表示所有網站都可以訪問資源。

雖然設置 CORS 和前端沒什麼關係，但是通過這種方式解決跨域問題的話，會在發送請求時出現兩種情況，分別為簡單請求和複雜請求。

1) 簡單請求

只要同時滿足以下兩大條件，就屬於簡單請求

條件1：使用下列方法之一：

  • GET
  • HEAD
  • POST

條件2：Content-Type 的值僅限於下列三者之一：

  • text/plain
  • multipart/form-data
  • application/x-www-form-urlencoded

請求中的任意 XMLHttpRequestUpload 對象均沒有註冊任何事件監聽器； XMLHttpRequestUpload 對象可以使用 XMLHttpRequest.upload 屬性訪問。

2) 複雜請求

不符合以上條件的請求就肯定是複雜請求了。

複雜請求的CORS請求，會在正式通信之前，增加一次HTTP查詢請求，稱為"預檢"請求,該請求是 option 方法的，通過該請求來知道服務端是否允許跨域請求。

我們用PUT向後臺請求時，屬於複雜請求，後臺需做如下配置：

// 允許哪個方法訪問我
res.setHeader('Access-Control-Allow-Methods', 'PUT')
// 預檢的存活時間
res.setHeader('Access-Control-Max-Age', 6)
// OPTIONS請求不做任何處理
if (req.method === 'OPTIONS') {
 res.end() 
}
// 定義後臺返回的內容
app.put('/getData', function(req, res) {
  console.log(req.headers)
 res.end('我不愛你')
})

接下來我們看下一個完整複雜請求的例子，並且介紹下CORS請求相關的欄位

// index.html
let xhr = new XMLHttpRequest()
document.cookie = 'name=xiamen' // cookie不能跨域
xhr.withCredentials = true // 前端設置是否帶cookie
xhr.open('PUT', 'http://localhost:4000/getData', true)
xhr.setRequestHeader('name', 'xiamen')
xhr.onreadystatechange = function() {
 if (xhr.readyState === 4) {
 if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
      console.log(xhr.response)
 //得到響應頭，後臺需設置Access-Control-Expose-Headers
      console.log(xhr.getResponseHeader('name'))
 }
 }
}
xhr.send()
//server1.js
let express = require('express');
let app = express();
app.use(express.static(__dirname));
app.listen(3000);
//server2.js
let express = require('express')
let app = express()
let whitList = ['http://localhost:3000'] //設置白名單
app.use(function(req, res, next) {
 let origin = req.headers.origin
 if (whitList.includes(origin)) {
 // 設置哪個源可以訪問我
 res.setHeader('Access-Control-Allow-Origin', origin)
 // 允許攜帶哪個頭訪問我
 res.setHeader('Access-Control-Allow-Headers', 'name')
 // 允許哪個方法訪問我
 res.setHeader('Access-Control-Allow-Methods', 'PUT')
 // 允許攜帶cookie
 res.setHeader('Access-Control-Allow-Credentials', true)
 // 預檢的存活時間
 res.setHeader('Access-Control-Max-Age', 6)
 // 允許返回的頭
 res.setHeader('Access-Control-Expose-Headers', 'name')
 if (req.method === 'OPTIONS') {
 res.end() // OPTIONS請求不做任何處理
 }
 }
 next()
})
app.put('/getData', function(req, res) {
  console.log(req.headers)
 res.setHeader('name', 'jw') //返回一個響應頭，後臺需設置
 res.end('我不愛你')
})
app.get('/getData', function(req, res) {
  console.log(req.headers)
 res.end('我不愛你')
})
app.use(express.static(__dirname))
app.listen(4000)

上述代碼由http://localhost:3000/index.html向http://localhost:4000/跨域請求，正如我們上面所說的，後端是實現 CORS 通信的關鍵。

3.postMessage

postMessage是HTML5 XMLHttpRequest Level 2中的API，且是為數不多可以跨域操作的window屬性之一，它可用於解決以下方面的問題：

  • 頁面和其打開的新視窗的數據傳遞
  • 多視窗之間消息傳遞
  • 頁面與嵌套的iframe消息傳遞
  • 上面三個場景的跨域數據傳遞

postMessage()方法允許來自不同源的腳本採用非同步方式進行有限的通信，可以實現跨文本檔、多視窗、跨域消息傳遞。

otherWindow.postMessage(message, targetOrigin, [transfer]);
  • message: 將要發送到其他 window的數據。
  • targetOrigin:通過視窗的origin屬性來指定哪些視窗能接收到消息事件，其值可以是字元串"*"（表示無限制）或者一個URI。在發送消息的時候，如果目標視窗的協議、主機地址或埠這三者的任意一項不匹配targetOrigin提供的值，那麼消息就不會被髮送；只有三者完全匹配，消息才會被髮送。
  • transfer(可選)：是一串和message 同時傳遞的 Transferable 對象. 這些對象的所有權將被轉移給消息的接收方，而發送一方將不再保有所有權。

接下來我們看個例子： http://localhost:3000/a.html頁面向http://localhost:4000/b.html傳遞“我愛你”,然後後者傳回"我不愛你"。

// a.html
 <iframe src="http://localhost:4000/b.html" frameborder="0" id="frame" onload="load()"></iframe> //等它載入完觸發一個事件
 //內嵌在http://localhost:3000/a.html
 <script>
 function load() {
 let frame = document.getElementById('frame')
 frame.contentWindow.postMessage('我愛你', 'http://localhost:4000') //發送數據
 window.onmessage = function(e) { //接受返回數據
          console.log(e.data) //我不愛你
 }
 }
 </script>
// b.html
 window.onmessage = function(e) {
    console.log(e.data) //我愛你
 e.source.postMessage('我不愛你', e.origin)
 }

4.websocket

Websocket是HTML5的一個持久化的協議，它實現了瀏覽器與伺服器的全雙工通信，同時也是跨域的一種解決方案。WebSocket和HTTP都是應用層協議，都基於 TCP 協議。但是 WebSocket 是一種雙向通信協議，在建立連接之後，WebSocket 的 server 與 client 都能主動向對方發送或接收數據。同時，WebSocket 在建立連接時需要藉助 HTTP 協議，連接建立好了之後 client 與 server 之間的雙向通信就與 HTTP 無關了。

原生WebSocket API使用起來不太方便，我們使用Socket.io，它很好地封裝了webSocket介面，提供了更簡單、靈活的介面，也對不支持webSocket的瀏覽器提供了向下相容。

我們先來看個例子：本地文件socket.html向localhost:3000發生數據和接受數據

// socket.html
<script>
 let socket = new WebSocket('ws://localhost:3000');
 socket.onopen = function () {
 socket.send('我愛你');//向伺服器發送數據
 }
 socket.onmessage = function (e) {
      console.log(e.data);//接收伺服器返回的數據
 }
</script>
// server.js
let express = require('express');
let app = express();
let WebSocket = require('ws');//記得安裝ws
let wss = new WebSocket.Server({port:3000});
wss.on('connection',function(ws) {
 ws.on('message', function (data) {
    console.log(data);
 ws.send('我不愛你')
 });
})

5. Node中間件代理(兩次跨域)

實現原理：同源策略是瀏覽器需要遵循的標準，而如果是伺服器向伺服器請求就無需遵循同源策略。
代理伺服器，需要做以下幾個步驟：

  • 接受客戶端請求 。
  • 將請求 轉發給伺服器。
  • 拿到伺服器 響應 數據。
  • 將 響應 轉發給客戶端。

我們先來看個例子：本地文件index.html文件，通過代理伺服器http://localhost:3000向目標伺服器http://localhost:4000請求數據。

// index.html(http://127.0.0.1:5500)
 <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
 <script>
 $.ajax({
        url: 'http://localhost:3000',
        type: 'post',
        data: { name: 'xiamen', password: '123456' },
 contentType: 'application/json;charset=utf-8',
 success: function(result) {
          console.log(result) // {"title":"fontend","password":"123456"}
 },
 error: function(msg) {
          console.log(msg)
 }
 })
 </script>
// server1.js 代理伺服器(http://localhost:3000)
const http = require('http')
// 第一步：接受客戶端請求
const server = http.createServer((request, response) => {
 // 代理伺服器，直接和瀏覽器直接交互，需要設置CORS 的首部欄位
 response.writeHead(200, {
 'Access-Control-Allow-Origin': '*',
 'Access-Control-Allow-Methods': '*',
 'Access-Control-Allow-Headers': 'Content-Type'
 })
 // 第二步：將請求轉發給伺服器
 const proxyRequest = http
 .request(
 {
        host: '127.0.0.1',
        port: 4000,
        url: '/',
        method: request.method,
        headers: request.headers
 },
 serverResponse => {
 // 第三步：收到伺服器的響應
 var body = ''
 serverResponse.on('data', chunk => {
          body += chunk
 })
 serverResponse.on('end', () => {
 console.log('The data is ' + body)
 // 第四步：將響應結果轉發給瀏覽器
 response.end(body)
 })
 }
 )
 .end()
})
server.listen(3000, () => {
 console.log('The proxyServer is running at http://localhost:3000')
})
// server2.js(http://localhost:4000)
const http = require('http')
const data = { title: 'fontend', password: '123456' }
const server = http.createServer((request, response) => {
 if (request.url === '/') {
 response.end(JSON.stringify(data))
 }
})
server.listen(4000, () => {
 console.log('The server is running at http://localhost:4000')
})

上述代碼經過兩次跨域，值得註意的是瀏覽器向代理伺服器發送請求，也遵循同源策略，最後在index.html文件列印出{"title":"fontend","password":"123456"}

6.nginx反向代理

實現原理類似於Node中間件代理，需要你搭建一個中轉nginx伺服器，用於轉發請求。

使用nginx反向代理實現跨域，是最簡單的跨域方式。只需要修改nginx的配置即可解決跨域問題，支持所有瀏覽器，支持session，不需要修改任何代碼，並且不會影響伺服器性能。

實現思路：通過nginx配置一個代理伺服器（功能變數名稱與domain1相同，埠不同）做跳板機，反向代理訪問domain2介面，並且可以順便修改cookie中domain信息，方便當前域cookie寫入，實現跨域登錄。

先下載nginx，然後將nginx目錄下的nginx.conf修改如下:

// proxy伺服器
server {
    listen       80;
 server_name  www.domain1.com;
    location / {
 proxy_pass   http://www.domain2.com:8080;  #反向代理
 proxy_cookie_domain www.domain2.com www.domain1.com; #修改cookie里功能變數名稱
 index  index.html index.htm;
        # 當用webpack-dev-server等中間件代理介面訪問nignx時，此時無瀏覽器參與，故沒有同源限制，下麵的跨域配置可不啟用
 add_header Access-Control-Allow-Origin http://www.domain1.com;  #當前端只跨域不帶cookie時，可為*
 add_header Access-Control-Allow-Credentials true;
 }
}

最後通過命令行nginx -s reload啟動nginx

// index.html
var xhr = new XMLHttpRequest();
// 前端開關：瀏覽器是否讀寫cookie
xhr.withCredentials = true;
// 訪問nginx中的代理伺服器
xhr.open('get', 'http://www.domain1.com:81/?user=admin', true);
xhr.send();
// server.js
var http = require('http');
var server = http.createServer();
var qs = require('querystring');
server.on('request', function(req, res) {
 var params = qs.parse(req.url.substring(2));
 // 向前臺寫cookie
 res.writeHead(200, {
 'Set-Cookie': 'l=a123456;Path=/;Domain=www.domain2.com;HttpOnly' // HttpOnly:腳本無法讀取
 });
 res.write(JSON.stringify(params));
 res.end();
});
server.listen('8080');
console.log('Server is running at port 8080...');

7.window.name + iframe

window.name屬性的獨特之處：name值在不同的頁面（甚至不同功能變數名稱）載入後依舊存在，並且可以支持非常長的 name 值（2MB）。

其中a.html和b.html是同域的，都是http://localhost:3000;而c.html是http://localhost:4000

 // a.html(http://localhost:3000/b.html)
 <iframe src="http://localhost:4000/c.html" frameborder="0" onload="load()" id="iframe"></iframe>
 <script>
 let first = true
 // onload事件會觸發2次，第1次載入跨域頁，並留存數據於window.name
 function load() {
 if(first){
 // 第1次onload(跨域頁)成功後，切換到同域代理頁面
 let iframe = document.getElementById('iframe');
 iframe.src = 'http://localhost:3000/b.html';
        first = false;
 }else{
 // 第2次onload(同域b.html頁)成功後，讀取同域window.name中數據
        console.log(iframe.contentWindow.name);
 }
 }
 </script>

b.html為中間代理頁，與a.html同域，內容為空。

 // c.html(http://localhost:4000/c.html)
 <script>
    window.name = '我不愛你' 
 </script>

總結：通過iframe的src屬性由外域轉向本地域，跨域數據即由iframe的window.name從外域傳遞到本地域。這個就巧妙地繞過了瀏覽器的跨域訪問限制，但同時它又是安全操作。

8.location.hash + iframe

實現原理： a.html欲與c.html跨域相互通信，通過中間頁b.html來實現。 三個頁面，不同域之間利用iframe的location.hash傳值，相同域之間直接js訪問來通信。

具體實現步驟：一開始a.html給c.html傳一個hash值，然後c.html收到hash值後，再把hash值傳遞給b.html，最後b.html將結果放到a.html的hash值中。

同樣的，a.html和b.html是同域的，都是http://localhost:3000;而c.html是http://localhost:4000

 // a.html
 <iframe src="http://localhost:4000/c.html#iloveyou"></iframe>
 <script>
 window.onhashchange = function () { //檢測hash的變化
      console.log(location.hash);
 }
 </script>
 // b.html
 <script>
 window.parent.parent.location.hash = location.hash 
 //b.html將結果放到a.html的hash值中，b.html可通過parent.parent訪問a.html頁面
 </script>
 // c.html
 console.log(location.hash);
 let iframe = document.createElement('iframe');
 iframe.src = 'http://localhost:3000/b.html#idontloveyou';
 document.body.appendChild(iframe);

9.document.domain + iframe

該方式只能用於二級功能變數名稱相同的情況下，比如 a.test.com 和 b.test.com 適用於該方式。
只需要給頁面添加 document.domain ='test.com' 表示二級功能變數名稱都相同就可以實現跨域。

實現原理：兩個頁面都通過js強制設置document.domain為基礎主域，就實現了同域。

我們看個例子：頁面a.zf1.cn:3000/a.html獲取頁面b.zf1.cn:3000/b.html中a的值

// a.html
<body>
 helloa
 <iframe src="http://b.zf1.cn:3000/b.html" frameborder="0" onload="load()" id="frame"></iframe>
 <script>
 document.domain = 'zf1.cn'
 function load() {
      console.log(frame.contentWindow.a);
 }
 </script>
</body>
// b.html
<body>
 hellob
 <script>
 document.domain = 'zf1.cn'
 var a = 100;
 </script>
</body>

三、總結

  • CORS支持所有類型的HTTP請求，是跨域HTTP請求的根本解決方案
  • JSONP只支持GET請求，JSONP的優勢在於支持老式瀏覽器，以及可以向不支持CORS的網站請求數據。
  • 不管是Node中間件代理還是nginx反向代理，主要是通過同源策略對伺服器不加限制。
  • 日常工作中，用得比較多的跨域方案是cors和nginx反向代理

 

點擊關註，第一時間瞭解華為雲新鮮技術~


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Docker容器使用 (入門到精通)
    Docker 是一個開源的應用容器引擎，讓開發者可以打包他們的應用以及依賴包到一個可移植的鏡像中，然後發佈到任何流行的 Linux或Windows操作系統的機器上，也可以實現虛擬化。容器是完全使用沙箱機制，相互之間不會有任何介面。 ...
  • InnoDB在RR隔離級別下的幻讀問題的分析
    (目錄) 概述 筆者在學習資料庫相關內容時，發現關於innoDB在RR級別下究竟能不能保證不發生幻讀這個問題，網上的資料眾說紛紜，筆者在經過總結和自己的試驗之後，在這裡結合自己的理解分析一下這個問題，若有謬誤，歡迎指正。筆者在這裡預設讀者都瞭解了關於幻讀以及innoDB中MVCC和鎖機制的情況，僅對 ...
  • DataX插件二次開髮指南
    ##一、 DataX為什麼要使用插件機制？ 從設計之初，DataX就把異構數據源同步作為自身的使命，為了應對不同數據源的差異、同時提供一致的同步原語和擴展能力，DataX自然而然地採用了框架 + 插件 的模式： 插件只需關心數據的讀取或者寫入本身。 而同步的共性問題，比如：類型轉換、性能、統計，則交 ...
  • 用戶行為分析模型實踐（三）——H5通用分析模型
    本文從提升用戶行為分析效率角度出發，詳細介紹了H5埋點方案規劃，埋點數據採集流程，提供可借鑒的用戶行為數據採集方案；且完整呈現了針對頁面分析，留存分析的數倉模型規劃方案。 ...
  • 數據湖Hudi與對象存儲Minio及Hive\Spark\Flink的集成
    本文主要記錄對象存儲組件Minio、數據湖組件Hudi及查詢引擎Hive\Spark之間的相容性配置及測試情況，Spark及Hive無需多言，這裡簡單介紹下Minio及Hudi。 MinIO 是在 GNU Affero 通用公共許可證 v3.0 下發佈的高性能對象存儲。 它是與 Amazon S3 ...
  • 關於移動開發平臺，你想知道的這些事
    Flutter是Google推出的一款UI工具包，可以通過一套代碼同時在iOS和Android上構建媲美原生體驗的精美應用。它使用Dart作為開發語言，不依賴原生控制項，而是將自有的控制項庫，通過Skia圖形引擎直接繪製在平臺所提供的畫布上。簡單來說，它擁有以下特性：不依賴平臺、組件庫原生實現、能高速渲... ...
  • 一篇文章帶你掌握Flex佈局的所有用法
    Flex 佈局目前已經非常流行了,現在幾乎已經相容所有瀏覽器了。在文章開始之前我們需要思考一個問題:我們為什麼要使用 Flex 佈局? 其實答案很簡單,那就是 Flex 佈局好用。一個新事物的出現往往是因為舊事物不那麼好用了,比如,如果想讓你用傳統的 css 佈局來實現一個塊元素垂直水平居中你會怎麼 ...
  • 記錄--實時音視頻功能簡析(live-pusher與live-player)
    這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 使用須知 2017年下半年，微信6.5.21版本支持線上音視頻功能。開發者可以通過兩個音視頻組件 和 實現實時地線上直播、視頻通話、語音通話等功能。 上述功能需要用到兩個小程式媒體組件中的兩個： live-pusher 與 live-pl ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類