CORS跨域請求的限制和解決
阿新 • • 發佈：2018-11-30
我們模擬一個跨域的請求，一個是8888，一個是8887
//server.js const http = require('http'); const fs = require('fs');
http.createServer(function(req,res){ console.log('req come', req.url); const html = fs.readFileSync('test.html', 'utf8'); res.writeHead(200,{ 'Content-Type': 'text/html' }) res.end(html); }).listen(8888);
//server2.js const http = require('http'); http.createServer(function(req,res){ console.log('req come', req.url); res.end('123'); }).listen(8887);
然後分別啟動這兩個服務
<!--test.html--> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <html裡面傳送了一個8887的get請求，在server 8888端口裡面讀取了html的內容併發送8887的請求，就製造了一個跨域請求meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <script> var xhr = new XMLHttpRequest(); xhr.open('GET', 'http://127.0.0.1:8887'); xhr.send(); </script> </body> </html>
// server2.js const http = require('http'); http.createServer(function(req,res){ console.log('req come', req.url); res.writeHead(200, { 'Access-Control-Allow-Origin': '*' }) res.end('345'); }).listen(8887);在server2.js裡面設定這個請求頭，再從8888裡面請求，發現8888裡面會開始請求8887，並且沒有報錯了，這個*是代表所有的網站都可以跨域請求8887,我們可以限制域名，比如'Access-Control-Allow-Origin': 'http://localhost:8888'，這裡只能設定一個值，不能設定多個，那麼想設定多個怎麼辦呢？可以設定一個值，動態的去判斷
這就是符合期望的跨域狀態，這裡就有一個概念，我們就這麼一個操作，就可以使這個跨域請求讓server2接受，其實不管server2有沒有接受這個請求，8888都會去傳送這個8887的請求，只是沒看到這個頭，會把請求返回內容給忽略掉，在curl並沒有這樣的限制，這是瀏覽器跨域的限制
二、跨域-jsonp 是否只有通過這種方式實現跨域呢，顯然不是，因為我們知道json這樣一個實現方法，那jsonp到底做了什麼呢？我們來看一下,8888埠的內容不變
//server2.js const http = require('http'); http.createServer(function(req,res){ console.log('req come', req.url); res.end('345'); }).listen(8887);server2裡面去除掉Access-Control-Allow-Origin，test.html請求的方式改掉
<!--test.html--> <body> <!-- <script> var xhr = new XMLHttpRequest(); xhr.open('GET', 'http://127.0.0.1:8887'); xhr.send(); </script> --> <script src="http://127.0.0.1:8887"></script> </body>再重啟8887服務，發現請求使正常傳送，也是正常返回的，這是因為，瀏覽器允許js的跨域請求，他並不在乎跨域的頭，所以可以在script裡面的程式碼是一段可執行的js程式碼，然後去呼叫jsonp，在發起請求之前，他給我們設定的一些內容，這樣就可以達到目的，這就是json的原理，利用了link,script標籤的可跨域性