前端解決跨域問題-nmp安裝http-server


前端解決跨域問題-nmp安裝http-server

問題背景

項目組的露露學習d3遇到問題,前端無法讀取js中調用的csv文件

前端無法讀取js中調用的csv文件

於是誠摯地邀請露露來了我的寢室坐坐,嘗試了相對路徑與絕對路徑均無效,且絕對路徑復制進chrome可直接下載,即文件路徑沒錯。

右鍵“檢查”進入開發者模式看報錯,

chrome報錯

報錯: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.

搜索得知為跨域問題

跨域問題

跨域問題: 在本場景下,指的是俠義的跨域問題。

由瀏覽器同源策略限制的一類請求場景。

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

大概看了Google的各種結果,嘗試了一下兩個看上去最容易的辦法

嘗試方法一:chrome快捷方式加” --allow-file-access-from-files“無效

嘗試方法二:嘗試使用nmp安裝本地服務器

node.js實際上我也只是安裝了但不熟悉,在配置的過程中仍然有幾個坑,具體步驟跟着下面的鏈接來就好了:

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

(講的全面且權威)

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

在對應的d3(前端文件)目錄下輸入http-server啟動,會看到它給出網址,復制“127.0.0.1”這一條到瀏覽器,能進入服務器(后台)頁面。

image-20201223222346017

image-20201223222424785

image-20201223222453312

后記

這個寫的看起來挺簡單的但實際上還是卡了一個多小時,心得就是幫美女解決問題不要慌,不能心猿意馬。

后續寫博客記錄再搜索了一下,https://zhuanlan.zhihu.com/p/130391287中寫了chrome版本使用場景: 80.0.3987.163(正式版本) (64 位)可以通過指定“ --allow-file-access-from-files”來繞過跨域問題。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM