2. 程式人生 > >利用nodejs搭建本地伺服器 解決跨域問題

利用nodejs搭建本地伺服器 解決跨域問題

阿新 • • 發佈：2019-02-07

       最近把以前用jquery寫的一個小demo拿出來執行的，剛開始的時候忘了開啟本地服務導致控制檯一直報XMLHttpRequest cannot load file:///C:/Users/79883/Desktop/ajax/data.json?{%22username%22:%[email protected]%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

.然後我就去啟動自己寫的server.js伺服器，在這過程中，感覺這種方式挺麻煩的，就一直去嘗試了其它的方式什麼去改瀏覽器屬性等都試過了但是都沒有解決跨域問題，最終得出兩種有效方式，在這裡我就把這兩種方式一起介紹大家。

一、使用 Node 建立 Web 伺服器

注：Node.js 提供了 http 模組，http 模組主要用於搭建 HTTP 服務端和客戶端，下面就是簡單的伺服器實現過程：

1、編寫伺服器程式碼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){
    /*
        一參為檔案路徑
        二參為回撥函式
            回撥函式的一參為讀取錯誤返回的資訊，返回空就沒有錯誤
            二參為讀取成功返回的文字內容
    */
        if(err){
            //HTTP 狀態碼 404 ： NOT FOUND  
            //Content Type:text/plain 
            res.writeHeader(404,{
                'content-type' : 'text/html;charset="utf-8"'
            });
            res.write('<h1>404錯誤</h1><p>你要找的頁面不存在</p>');
            res.end();
        }else{
            //HTTP 狀態碼 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('伺服器開啟成功');

通過上面程式碼，我們就能夠實現伺服器對於檔案的查詢，下面，我們就進行建立一個html檔案，然後通過瀏覽器進行訪問。

2、編寫html檔案（index.html），用於瀏覽器進行請求

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>index</title>  
</head>  
<body>  
   這是一個用於進行nodejs伺服器測試的html檔案，通過在瀏覽器上面輸入  
   http://127.0.0.1:8888/index.html(自己所建的專案名)進行訪問  
</body>  
</html>
3、進行測試    (1) 首先我們啟動伺服器，開啟cmd，找到專案所在位置，然後輸入命令node server.js啟動伺服器
    (2) 在瀏覽器進行訪問，在url欄中輸入http://127.0.0.1:888/index.html如果對應頁面顯示出來就證明你成功了。接下來我將介紹nodejs快速搭建本地服務，也就是我說的第二種方法。

二、使用nodejs快速搭建本地服務

注：node.js 的anywhere就是隨時隨地將你的當前目錄變成一個靜態檔案伺服器的根目錄

1、首先開啟cmd，輸入node -v檢測你確定你是否安裝好了node.js,然後輸入命令npm install angwhere -g，進行安裝靜態檔案伺服器，安裝完如下圖顯示：


2、在cmd頁面 找到你想搭建伺服器的路徑

3、然後再當前路徑下輸入： anywhere 8888  如下圖顯示


4、回車後，瀏覽器就自動開啟本地訪問網址，一個簡單的node伺服器就這樣被我們搭建好啦！

以上就是我的一些小總結，希望能幫助到大家。


相關推薦

利用nodejs搭建本地伺服器 解決跨域問題

       最近把以前用jquery寫的一個小demo拿出來執行的，剛開始的時候忘了開啟本地服務導致控制檯一直報XMLHttpRequest cannot load file:///C:/Users/79883/Desktop/ajax/data.json?{%22user

通過nodejs代理伺服器解決跨域問題

1、本段程式碼用於解決前後端分離過程中產生的跨域問題。原理上是使用代理轉發。使用nodejs語法編寫，需要執行在nodejs環境下。 2、使用方法       1、普通ajax請求的url需要改成程式碼中監聽的路由和埠。   

利用nodeJs 建立本地伺服器環境-加手機訪問本地專案

本地啟個伺服器，方便呼叫帶資料的測試 1首先去nodeJs官網下載最新版nodeJs     https://nodejs.org/en/ 2安裝成功後win+r開啟cmd 輸入node -help 或者node -v檢視是否安裝成功  3裝好後輸入 npm

NodeJS搭建本地伺服器環境

第一步：建立server.js和mine.js檔案 server.js var http = require('http'), url = require('url'), fs = require('fs'), path = require('path'), min

nodejs搭建本地伺服器

1.下載webstorm，安裝詳情可參考 https://blog.csdn.net/weixin_39150852/article/details/83142523 2.官網下載nodejs，按照預設順序安裝 3.開啟webstorm建立一個新專案 4.建立一個新的資料夾，結構目錄如下

nodejs搭建本地伺服器並訪問檔案

在本地建立目錄：f:/nodetest，在該目錄下新建index.html作為我們將要訪問的內容。新建server.js作為node開啟的入口: $ cd f:/nodetest $ mkdir index.html $ mkdir server.js

Angular本地代理解決跨域問題

   今天在寫完了前端的登入表單元件後，本地測試時由於前端執行在http:localhost:4200,而後端部署在其他主機上，訪問後端介面產生了瀏覽器跨域問題，百度一番後找到了解決方案：   1.搭建本地代理到目標伺服器；   2.讓後端在response新增Access-

node搭建本地服務器後端解決跨域問題

clas har request method con set hub utf xmlhttp 第一種方法： // 通過跨域裏面的cors跨域// 跨域中間件app.use(function (req, res, next) { // 設置cors跨域 res.

Ajax 調用webservice 解決跨域請求和發布到服務器後本地調用成功外網失敗的問題

.org webmethod names -h com strong helper 解決 requested webservice 代碼 1 /// <summary> 2 /// MESService 的摘要說明 3

vue : 本地調試跨域問題的解決辦法：proxyTable

settings sat tell emp 相同 debug conf sts zip 本來我是不想寫的，但為了加深印象還是寫一寫吧。 ./config/index.js module.exports = { dev: { // Paths

用nodeJS搭建本地檔案伺服器

轉自：https://www.jb51.net/article/108566.htm 搭建nodejs伺服器步驟: 1.安裝nodejs服務，node相當於apache伺服器 2.在自己定義的目錄下新建伺服器檔案如 server.js  例如，我在E:\PhpProject

nodejs 解決跨域

app.all('*', function (req, res, next) { res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Headers", "X-Requested

伺服器端解決跨域問題的三種方法

跨域是指html檔案所在的伺服器與ajax請求的伺服器是不同的ip+port，例如：  - ‘192.168.1.1:8080’ 與 ‘192.168.1.2:8080’是不同的域。  - ‘192.168.1.1:8080’ 與 ‘192.168.1.1:8081’是不同的域。

通過設定chrome瀏覽器解決跨域問題，在本地進行開發工作

原文：http://www.cnblogs.com/kugeliu/p/6566462.html 後端跨域許可權無法開啟，於是去網上找了下我這邊能不能解決 現在的瀏覽器出於安全策略的限制，都是不允許跨域的，但是開發的時候經常需要一些別的域的介面，特別是一些介面不是自己能控制的時候，往

利用Access-Control-Allow-Origin響應頭解決跨域請求原理

 傳統的跨域請求沒有好的解決方案，無非就是jsonp和iframe，隨著跨域請求的應用越來越多，W3C提供了跨域請求的標準方案（Cross-Origin Resource Sharing）。IE8、Firefox 3.5 及其以後的版本、Chrome瀏覽器、Safari 4 等已經實現了

vue 本地環境API代理設定和解決跨域

寫一個config.js檔案，作為專案地址的配置。 1 //專案域名地址 2 const url = 'https://exaple.com'; 3 4 5 let ROOT; 6 //由於封裝的axios請求中，會將ROOT打包進去，為了方便之後不再更改，判斷了當前環境，而生成的不同

vue本地代理（解決跨域問題）

本文只針對axios+vue/cil3.0 axios配置： const http = axios.create({ baseURL: process.env.NODE_ENV === 'production' ? 'http://www.xxxxx.com/': '', //這裡是關鍵

利用中介軟體解決跨域

from django.utils.deprecation import MiddlewareMixin class Mymiddle(MiddlewareMixin): def process_response(self,request,response): response

伺服器端解決跨域訪問

跨域是頁面js請求ajax，js所在html的url與請求api，不在同一個域名下，跨域解決的思路。 1、伺服器端響應頭允許請求的url，即響應輸出允許訪問的域名； 2、請求由伺服器轉發，使用閘道器或者nginx對請求進行重定向。 具體方案： 1、php 在responce的header中輸

vue-cli本地環境API代理設定和解決跨域

前言 我們在使用vue-cli啟動專案的時候npm run dev便可以啟動我們的專案了，通常我們的請求地址是以localhost:8080來請求介面資料的，localhost是沒有辦法設定cookie的。 我們可以在vue-cli配置檔案裡面設定一個代理，跨域的方法有很