Ajax解決跨域之設置CORS響應頭實現(xiàn)跨域案例詳解
1.設置CORS響應頭實現(xiàn)跨域
跨源資源共享(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; border: solid 1px #90b; } </style> </head> <body> <button>發(fā)送請求</button> <div id="result"></div> <script> const btn = document.querySelector('button'); btn.onclick = function () { //1. 創(chuàng)建對象 const x = new XMLHttpRequest(); //2. 初始化設置 x.open("GET", "http://127.0.0.1:8080/cors-server"); //3. 發(fā)送 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.js
//1. 引入express const express = require('express'); //2. 創(chuàng)建應用對象 const app = express(); //3. 創(chuàng)建路由規(guī)則 // request 是對請求報文的封裝 // 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("Access-Control-Allow-Method", 'get');// 允許get請求跨域 response.send('hello CORS'); }); //4. 監(jiān)聽端口啟動服務 app.listen(8080, () => { console.log("服務已經(jīng)啟動, 8080 端口監(jiān)聽中...."); });
啟動服務 nodemon server.js
運行結果:
到此這篇關于Ajax解決跨域之設置CORS響應頭實現(xiàn)跨域案例詳解的文章就介紹到這了,更多相關Ajax解決跨域內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
javascript開發(fā)技術大全 第4章 直接量與字符集
直接量就是在程序中顯示出來的數(shù)值。javascript直接量包括:字符串、數(shù)字、布爾、數(shù)組、函數(shù)、對象、和特殊直接2011-07-07JavaScript substr() 字符串截取函數(shù)使用詳解
substr() 方法可在字符串中抽取從 start 下標開始的指定數(shù)目的字符,文中配有大量實例代碼2013-04-04ECMAScript 5嚴格模式(Strict Mode)介紹
這篇文章主要介紹了ECMAScript 5嚴格模式(Strict Mode)介紹,本文講解了如何啟用嚴格模式、啟用嚴格模式后對變量和屬性、函數(shù)、with語句的影響,需要的朋友可以參考下2015-03-03