Ajax解決跨域之設定CORS響應頭實現跨域案例詳解
阿新 • • 發佈:2021-08-02
1.設定CORS響應頭實現跨域
跨源資源共享(CORS)
1.1 什麼是CORS
CORS(Cross-Origin Resource Sharing),跨域資源共享。CORS 是官方的跨域解決方 案,它的特點是不需要在客戶端做任何特殊的操作,完全在伺服器中進行處理,支援 get 和 post 請求。跨域資源共享標準新增了一組 HTTP 首部欄位,允許伺服器宣告哪些 源站通過瀏覽器有許可權訪問哪些資源
1.2 CORS 怎麼工作的?
CORS 是通過設定一個響應頭來告訴瀏覽器,該請求允許跨域,瀏覽器收到該響應 以後就會對響應放行。
1.3 CORS 的使用?
ajaxDemo.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>CORS</title> <style> #result { width: 200px; height: 100px; borderhttp://www.cppcns.com: solid 1px #90b; } </style> </head> <body> <button>傳送請求</button> <div id="result"></div> <script> const btn = document.querySelector('button'); btn.onclick = function () { //1. 建立物件 const x = new XMLHttpRequest(); //2. 初始化設定 x.open("GET","http://127.0.0.1:8080/cors-server"); //3. 傳送 x.send(); //4. 繫結事件 x.onreadystatechange = function () { if (x.readyState === 4) { if (x.status >= 200 && x.status < 300) { document.getElementById('result').innerText = x.response; } } } } </script> </body> </html>
server.
//1. 引入express const express = require('exprwww.cppcns.comess'); //2. 建立應用物件 const app = express(); //3. http://www.cppcns.com建立路由規則 // request 是對請求報fhkYREokE文的封裝 // response 是對響應報文的封裝 app.all('/cors-server',(request,response)=>{ //設定響應頭 response.setHeader("Access-Control-Allow-Origin","*");// 允許請求所有跨域 * // response.setHeader("Access-Control-Allow-Origin","http://127.0.0.1:5500"); // 允許指定請求跨域 // response.setHeader("Access-Control-Allow-Headers",'*');// 允許自定義請求頭標籤 // response.setHeader("Access-Control-Allow-Method",'*');// 允許所有的請求跨域 * // response.setHeader(http://www.cppcns.com"Access-Control-Allow-Method",'get');// 允許get請求跨域 response.send('hello CORS'); }); //4. 監聽埠啟動服務 app.listen(8080,() => { console.log("服務已經啟動,8080 埠監聽中...."); });
啟動服務 nodemon server.js
執行結果:
到此這篇關於Ajax解決跨域之設定CORS響應頭實現跨域案例詳解的文章就介紹到這了,更多相關Ajax解決跨域內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!