溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

nodejs搭建本地服務(wù)器輕松解決跨域問題

發(fā)布時(shí)間：2020-10-24 22:07:04 來源：腳本之家 閱讀：357 作者：Self_Growing 欄目：web開發(fā)

最近把以前用jquery寫的一個(gè)小demo拿出來運(yùn)行的，剛開始的時(shí)候忘了開啟本地服務(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)自己寫的server.js服務(wù)器，在這過程中，感覺這種方式挺麻煩的，就一直去嘗試了其它的方式什么去改瀏覽器屬性等都試過了但是都沒有解決跨域問題，最終得出兩種有效方式，在這里我就把這兩種方式一起介紹大家。

一、使用 Node 創(chuàng)建 Web 服務(wù)器

注：Node.js 提供了 http 模塊，http 模塊主要用于搭建 HTTP 服務(wù)端和客戶端，下面就是簡(jiǎn)單的服務(wù)器實(shí)現(xiàn)過程：

1、編寫服務(wù)器代碼server.js

var http = require('http'); 
var fs = require('fs');//引入文件讀取模塊 
var documentRoot = 'C:/Users/79883/Desktop/jquery/ajax';//需要訪問的文件的存放目錄 
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ò)誤返回的信息，返回空就沒有錯(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('<h2>404錯(cuò)誤</h2><p>你要找的頁面不存在</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ù)器開啟成功');

通過上面代碼，我們就能夠?qū)崿F(xiàn)服務(wù)器對(duì)于文件的查找，下面，我們就進(jìn)行創(chuàng)建一個(gè)html文件，然后通過瀏覽器進(jìn)行訪問。

2、編寫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文件，通過在瀏覽器上面輸入 
 http://127.0.0.1:8888/index.html(自己所建的項(xiàng)目名)進(jìn)行訪問 
</body> 
</html>

3、進(jìn)行測(cè)試

    (1) 首先我們啟動(dòng)服務(wù)器，打開cmd，找到項(xiàng)目所在位置，然后輸入命令node server.js啟動(dòng)服務(wù)器

    (2) 在瀏覽器進(jìn)行訪問，在url欄中輸入http://127.0.0.1:888/index.html

如果對(duì)應(yīng)頁面顯示出來就證明你成功了。接下來我將介紹nodejs快速搭建本地服務(wù)，也就是我說的第二種方法。

二、使用nodejs快速搭建本地服務(wù)

注：node.js 的anywhere就是隨時(shí)隨地將你的當(dāng)前目錄變成一個(gè)靜態(tài)文件服務(wù)器的根目錄

1、首先打開cmd，輸入node -v檢測(cè)你確定你是否安裝好了node.js,然后輸入命令npm install angwhere -g，進(jìn)行安裝靜態(tài)文件服務(wù)器，安裝完如下圖顯示：

nodejs搭建本地服務(wù)器輕松解決跨域問題

2、在cmd頁面 找到你想搭建服務(wù)器的路徑

3、然后再當(dāng)前路徑下輸入： anywhere 8888  如下圖顯示

nodejs搭建本地服務(wù)器輕松解決跨域問題

4、回車后，瀏覽器就自動(dòng)打開本地訪問網(wǎng)址，一個(gè)簡(jiǎn)單的node服務(wù)器就這樣被我們搭建好啦！

總結(jié)

以上所述是小編給大家介紹的nodejs搭建本地服務(wù)器輕松解決跨域問題，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)億速云網(wǎng)站的支持！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手