nodejs搭建本地服務(wù)器輕松解決跨域問(wèn)題
最近把以前用jquery寫(xiě)的一個(gè)小demo拿出來(lái)運(yùn)行的，剛開(kāi)始的時(shí)候忘了開(kāi)啟本地服務(wù)導(dǎo)致控制臺(tái)一直報(bào)XMLHttpRequest cannot load file:///C:/Users/79883/Desktop/ajax/data.json?{%22username%22:%22lcl@qq.com%22,%22pwd%22:%22Home20170702%22}. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.然后我就去啟動(dòng)自己寫(xiě)的server.js服務(wù)器，在這過(guò)程中，感覺(jué)這種方式挺麻煩的，就一直去嘗試了其它的方式什么去改瀏覽器屬性等都試過(guò)了但是都沒(méi)有解決跨域問(wèn)題，最終得出兩種有效方式，在這里我就把這兩種方式一起介紹大家。
一、使用 Node 創(chuàng)建 Web 服務(wù)器
注：Node.js 提供了 http 模塊，http 模塊主要用于搭建 HTTP 服務(wù)端和客戶端，下面就是簡(jiǎn)單的服務(wù)器實(shí)現(xiàn)過(guò)程：
1、編寫(xiě)服務(wù)器代碼server.js
var http = require('http');
var fs = require('fs');//引入文件讀取模塊
var documentRoot = 'C:/Users/79883/Desktop/jquery/ajax';//需要訪問(wèn)的文件的存放目錄
var server= http.createServer(function(req,res){
//客戶端輸入的url，例如如果輸入localhost:8888/index.html
//那么這里的url == /index.html
var url = req.url;
var file = documentRoot + url;
console.log(url);
fs.readFile( file , function(err,data){
/*
一參為文件路徑
二參為回調(diào)函數(shù)
回調(diào)函數(shù)的一參為讀取錯(cuò)誤返回的信息，返回空就沒(méi)有錯(cuò)誤
二參為讀取成功返回的文本內(nèi)容
*/
if(err){
//HTTP 狀態(tài)碼 404 ： NOT FOUND
//Content Type:text/plain
res.writeHeader(404,{
'content-type' : 'text/html;charset="utf-8"'
});
res.write('<h1>404錯(cuò)誤</h1><p>你要找的頁(yè)面不存在</p>');
res.end();
}else{
//HTTP 狀態(tài)碼 200 ： OK
//Content Type:text/plain
res.writeHeader(200,{
'content-type' : 'text/html;charset="utf-8"'
});
res.write(data);//將index.html顯示在客戶端
res.end();
}
});
}).listen(8888);
console.log('服務(wù)器開(kāi)啟成功');
通過(guò)上面代碼，我們就能夠?qū)崿F(xiàn)服務(wù)器對(duì)于文件的查找，下面，我們就進(jìn)行創(chuàng)建一個(gè)html文件，然后通過(guò)瀏覽器進(jìn)行訪問(wèn)。
2、編寫(xiě)html文件（index.html），用于瀏覽器進(jìn)行請(qǐng)求
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> </head> <body> 這是一個(gè)用于進(jìn)行nodejs服務(wù)器測(cè)試的html文件，通過(guò)在瀏覽器上面輸入 http://127.0.0.1:8888/index.html(自己所建的項(xiàng)目名)進(jìn)行訪問(wèn) </body> </html>
3、進(jìn)行測(cè)試
(1) 首先我們啟動(dòng)服務(wù)器，打開(kāi)cmd，找到項(xiàng)目所在位置，然后輸入命令node server.js啟動(dòng)服務(wù)器
(2) 在瀏覽器進(jìn)行訪問(wèn)，在url欄中輸入http://127.0.0.1:888/index.html
如果對(duì)應(yīng)頁(yè)面顯示出來(lái)就證明你成功了。接下來(lái)我將介紹nodejs快速搭建本地服務(wù)，也就是我說(shuō)的第二種方法。
二、使用nodejs快速搭建本地服務(wù)
注：node.js 的anywhere就是隨時(shí)隨地將你的當(dāng)前目錄變成一個(gè)靜態(tài)文件服務(wù)器的根目錄
1、首先打開(kāi)cmd，輸入node -v檢測(cè)你確定你是否安裝好了node.js,然后輸入命令npm install angwhere -g，進(jìn)行安裝靜態(tài)文件服務(wù)器，安裝完如下圖顯示：
2、在cmd頁(yè)面 找到你想搭建服務(wù)器的路徑
3、然后再當(dāng)前路徑下輸入： anywhere 8888 如下圖顯示
4、回車(chē)后，瀏覽器就自動(dòng)打開(kāi)本地訪問(wèn)網(wǎng)址，一個(gè)簡(jiǎn)單的node服務(wù)器就這樣被我們搭建好啦！
總結(jié)
以上所述是小編給大家介紹的nodejs搭建本地服務(wù)器輕松解決跨域問(wèn)題，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
nodejs部署到騰訊云服務(wù)器的實(shí)現(xiàn)(寶塔面板linux系統(tǒng))
本文主要介紹了nodejs部署到騰訊云服務(wù)器的實(shí)現(xiàn)(寶塔面板linux系統(tǒng))，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
nodejs實(shí)現(xiàn)的一個(gè)簡(jiǎn)單聊天室功能分享
這篇文章主要介紹了nodejs實(shí)現(xiàn)的一個(gè)簡(jiǎn)單聊天室功能分享,本文使用了express和socket.io兩個(gè)庫(kù)結(jié)合實(shí)現(xiàn),需要的朋友可以參考下2014-12-12
node實(shí)現(xiàn)的爬蟲(chóng)功能示例
node.js利用express自動(dòng)搭建項(xiàng)目的全過(guò)程
詳解koa2學(xué)習(xí)中使用 async 、await、promise解決異步的問(wèn)題
iPhone手機(jī)上搭建nodejs服務(wù)器步驟方法
Nest.js使用multer實(shí)現(xiàn)文件上傳功能
nodejs做個(gè)爬蟲(chóng)爬取騰訊動(dòng)漫內(nèi)容簡(jiǎn)單實(shí)現(xiàn)