前端解決跨域問(wèn)題nmp安裝http-server的問(wèn)題

更新時(shí)間：2022年07月25日 10:12:30 作者：BUZHOU

這篇文章主要介紹了前端解決跨域問(wèn)題-nmp安裝http-server的問(wèn)題，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

前端解決跨域問(wèn)題-nmp安裝http-server

問(wèn)題背景

項(xiàng)目組的露露學(xué)習(xí)d3遇到問(wèn)題，前端無(wú)法讀取js中調(diào)用的csv文件

于是誠(chéng)摯地邀請(qǐng)露露來(lái)了我的寢室坐坐，嘗試了相對(duì)路徑與絕對(duì)路徑均無(wú)效，且絕對(duì)路徑復(fù)制進(jìn)chrome可直接下載，即文件路徑?jīng)]錯(cuò)。

右鍵“檢查”進(jìn)入開(kāi)發(fā)者模式看報(bào)錯(cuò)，

報(bào)錯(cuò)：Access to XMLHttpRequest at 'file:///C:/Users/buzou/Desktop/OneNum/OneNum.csv' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.

搜索得知為跨域問(wèn)題

跨域問(wèn)題

跨域問(wèn)題: 在本場(chǎng)景下，指的是俠義的跨域問(wèn)題。

由瀏覽器同源策略限制的一類請(qǐng)求場(chǎng)景。

什么是同源策略？
同源策略/SOP（Same origin policy）是一種約定，由Netscape公司1995年引入瀏覽器，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，瀏覽器很容易受到XSS、CSFR等攻擊。所謂同源是指"協(xié)議+域名+端口"三者相同，即便兩個(gè)不同的域名指向同一個(gè)ip地址，也非同源。

大概看了Google的各種結(jié)果，嘗試了一下兩個(gè)看上去最容易的辦法

嘗試方法一：chrome快捷方式加” --allow-file-access-from-files“無(wú)效

嘗試方法二：嘗試使用nmp安裝本地服務(wù)器

node.js實(shí)際上我也只是安裝了但不熟悉，在配置的過(guò)程中仍然有幾個(gè)坑，具體步驟跟著下面的鏈接來(lái)就好了：

https://jasonwatmore.com/post/2016/06/22/nodejs-setup-simple-http-server-local-web-server

（講的全面且權(quán)威）

踩過(guò)的坑就是http-server要下載到全局，用這條命令安裝npm install -g http-server，

在對(duì)應(yīng)的d3（前端文件）目錄下輸入http-server啟動(dòng)，會(huì)看到它給出網(wǎng)址，復(fù)制“127.0.0.1”這一條到瀏覽器，能進(jìn)入服務(wù)器（后臺(tái)）頁(yè)面。

后記

這個(gè)寫的看起來(lái)挺簡(jiǎn)單的但實(shí)際上還是卡了一個(gè)多小時(shí)，心得就是幫美女解決問(wèn)題不要慌，不能心猿意馬。

后續(xù)寫博客記錄再搜索了一下，https://zhuanlan.zhihu.com/p/130391287中寫了chrome版本使用場(chǎng)景: 80.0.3987.163（正式版本）（64 位）可以通過(guò)指定“ --allow-file-access-from-files”來(lái)繞過(guò)跨域問(wèn)題。

補(bǔ)充：下面看下http-server服務(wù)跨域設(shè)置問(wèn)題

http-server --cors -p 9999

http-server --cors -p 9999 -c-1

--------------------------------------------------------------------------------------------------------------------------------------------------------------------

Available Options:
-p Port to use (defaults to 8080)

-a Address to use (defaults to 0.0.0.0)

-d Show directory listings (defaults to 'True')

-i Display autoIndex (defaults to 'True')

-g or --gzip When enabled (defaults to 'False') it will serve ./public/some-file.js.gzin place of ./public/some-file.js when a gzipped version of the file exists and the request accepts gzip encoding.

-e or --ext Default file extension if none supplied (defaults to 'html')

-s or --silent Suppress log messages from output

--cors Enable CORS via the Access-Control-Allow-Origin header

-o Open browser window after starting the server

-c Set cache time (in seconds) for cache-control max-age header, e.g. -c10 for 10 seconds (defaults to '3600'). To disable caching, use -c-1.

-U or --utc Use UTC time format in log messages.

-P or --proxy Proxies all requests which can't be resolved locally to the given url. e.g.: -P http://someurl.com

-S or --ssl Enable https.

-C or --cert Path to ssl cert file (default: cert.pem).

-K or --key Path to ssl key file (default: key.pem).

-r or --robots Provide a /robots.txt (whose content defaults to 'User-agent: *\nDisallow: /')

-h or --help Print this list and exit.