“ การร้องขอข้ามต้นทางรองรับ HTTP เท่านั้น” ข้อผิดพลาดเมื่อโหลดไฟล์ในเครื่อง

ฉันกำลังพยายามโหลดโมเดล 3 มิติลงใน Three.js ด้วยJSONLoaderและโมเดล 3 มิตินั้นอยู่ในไดเรกทอรีเดียวกับเว็บไซต์ทั้งหมด

ฉันพบ"Cross origin requests are only supported for HTTP."ข้อผิดพลาด แต่ฉันไม่รู้ว่าอะไรเป็นสาเหตุหรือวิธีแก้ไข

ลูกบอลคริสตัลของฉันบอกว่าคุณกำลังโหลดโมเดลโดยใช้อย่างใดอย่างหนึ่งfile://หรือC:/ซึ่งยังคงเป็นจริงกับข้อความแสดงข้อผิดพลาดเนื่องจากไม่ใช่http://

ดังนั้นคุณสามารถติดตั้งเว็บเซิร์ฟเวอร์ในพีซีของคุณหรืออัปโหลดโมเดลจากที่อื่นและใช้jsonpและเปลี่ยน URL เป็นhttp://example.com/path/to/model

Origin ถูกกำหนดไว้ในRFC-6454เป็น

   ...they have the same
   scheme, host, and port.  (See Section 4 for full details.)

ดังนั้นแม้ว่าไฟล์ของคุณมาจากโฮสต์เดียวกัน ( localhost) แต่ตราบใดที่แบบแผนแตกต่างกัน ( http/ file) พวกเขาจะถือว่าเป็นจุดเริ่มต้นที่แตกต่างกัน

เพื่อให้ชัดเจน - ใช่ข้อผิดพลาดกำลังบอกว่าคุณไม่สามารถชี้เบราว์เซอร์ของคุณโดยตรงที่ file://some/path/some.html

นี่คือตัวเลือกบางตัวที่จะหมุนเว็บเซิร์ฟเวอร์ในพื้นที่อย่างรวดเร็วเพื่อให้เบราว์เซอร์ของคุณแสดงไฟล์ในเครื่อง

Python 2

หากคุณติดตั้ง Python ...

1. เปลี่ยนไดเรกทอรีเป็นโฟลเดอร์ที่ไฟล์some.htmlหรือไฟล์ของคุณมีอยู่โดยใช้คำสั่งcd /path/to/your/folder

2. เริ่มต้นเว็บเซิร์ฟเวอร์ Python โดยใช้คำสั่ง python -m SimpleHTTPServer

นี่จะเป็นการเริ่มต้นเว็บเซิร์ฟเวอร์เพื่อโฮสต์รายการไดเรกทอรีทั้งหมดของคุณที่ http://localhost:8000

3. คุณสามารถใช้พอร์ตที่กำหนดเอง python -m SimpleHTTPServer 9000เพื่อให้ลิงค์:http://localhost:9000

วิธีการนี้สร้างขึ้นในการติดตั้ง Python ใด ๆ

Python 3

ทำตามขั้นตอนเดียวกัน แต่ใช้คำสั่งต่อไปนี้แทน python3 -m http.server

Node.js

อีกทางเลือกหนึ่งถ้าคุณต้องการการตั้งค่าที่ตอบสนองได้มากกว่าและใช้ nodejs อยู่แล้ว ...

1. ติดตั้งhttp-serverโดยการพิมพ์npm install -g http-server

2. เปลี่ยนเป็นไดเรกทอรีทำงานที่some.htmlชีวิตของคุณ

3. เริ่มเซิร์ฟเวอร์ http ของคุณโดยการออก http-server -c-1

สิ่งนี้จะหมุน Node.js httpd ซึ่งทำหน้าที่ไฟล์ในไดเรกทอรีของคุณเป็นไฟล์สแตติกที่สามารถเข้าถึงได้ http://localhost:8080

ทับทิม

หากภาษาที่คุณต้องการคือทับทิม ... Ruby Gods บอกว่าใช้งานได้:

ruby -run -e httpd . -p 8080

PHP

แน่นอน PHP ยังมีวิธีแก้ปัญหา

php -S localhost:8000

ใน Chrome คุณสามารถใช้การตั้งค่าสถานะนี้:

--allow-file-access-from-files

อ่านเพิ่มเติมได้ที่นี่

วิ่งเข้ามาในนี้วันนี้

ฉันเขียนรหัสที่มีลักษณะเช่นนี้:

app.controller('ctrlr', function($scope, $http){
    $http.get('localhost:3000').success(function(data) {
        $scope.stuff = data;
    });
});

... แต่มันควรจะเป็นแบบนี้:

app.controller('ctrlr', function($scope, $http){
    $http.get('http://localhost:3000').success(function(data) {
        $scope.stuff = data;
    });
});

ข้อแตกต่างเพียงอย่างเดียวคือการขาดhttp://ข้อมูลโค้ดที่สอง

แค่อยากจะเอามันออกมาในกรณีที่มีคนอื่นที่มีปัญหาคล้ายกัน

เพียงแค่เปลี่ยน URL เพื่อแทนhttp://localhost localhostถ้าคุณเปิดไฟล์ html จากท้องถิ่นคุณควรสร้างเซิร์ฟเวอร์ในท้องถิ่นที่จะให้บริการไฟล์ html Web Server for Chromeว่าวิธีที่ง่ายที่สุดคือการใช้ ที่จะแก้ไขปัญหา

ในแอป Android - ตัวอย่างเช่นการอนุญาตให้ JavaScript เพื่อให้มีการเข้าถึงสินทรัพย์ผ่านfile:///android_asset/- การใช้งานsetAllowFileAccessFromFileURLs(true)ในWebSettingsที่คุณได้รับจากการเรียกบนgetSettings()WebView

ใช้http://หรือhttps://เพื่อสร้าง URL

ข้อผิดพลาด :localhost:8080

วิธีแก้ปัญหา :http://localhost:8080

วิธีที่เร็วที่สุดสำหรับฉันคือ: สำหรับผู้ใช้ windows เรียกใช้ไฟล์ของคุณใน Firefox แก้ไขปัญหาหรือถ้าคุณต้องการใช้โครเมี่ยมวิธีที่ง่ายที่สุดสำหรับฉันคือการติดตั้ง Python 3 จากนั้นจาก command command run command command python -m http.server จากนั้นไปที่http: // localhost: 8000 / จากนั้นไปที่ไฟล์ของคุณ

python -m http.server

ฉันจะแสดงวิธีการต่าง ๆ 3 วิธีเพื่อแก้ไขปัญหานี้:

1. ใช้น้ำหนักเบามากnpmแพคเกจ : ติดตั้งสดเซิร์ฟเวอร์npm install -g live-serverโดยใช้ จากนั้นไปที่ไดเรกทอรีที่เปิดสถานีและพิมพ์และกดหน้าจะให้บริการที่live-server localhost:8080โบนัส: นอกจากนี้ยังรองรับการโหลดซ้ำร้อนตามค่าเริ่มต้น
2. การใช้แอป Google Chrome ที่มีน้ำหนักเบาที่พัฒนาโดย Google : ติดตั้งแอพจากนั้นไปที่แท็บแอพใน Chrome และเปิดแอป ในแอพให้ชี้ไปที่โฟลเดอร์ด้านขวา หน้าของคุณจะถูกแสดง!
3. การแก้ไขทางลัด Chrome ใน windows : สร้างทางลัดของเบราว์เซอร์ Chrome คลิกขวาที่ไอคอนและคุณสมบัติที่เปิด ในคุณสมบัติแก้ไขtargetไป"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir="C:/ChromeDevSession"และประหยัด จากนั้นใช้ Chrome ctrl+oเปิดหน้าโดยใช้ หมายเหตุ: อย่าไม่ใช้ทางลัดนี้สำหรับการเรียกดูปกติ

สำหรับผู้ที่ใช้ Windows ที่ไม่มี Python หรือ Node.js ยังมีโซลูชันน้ำหนักเบา: Mongooseพังพอน

สิ่งที่คุณทำคือการลากไฟล์ที่เรียกใช้ไปยังตำแหน่งใด ๆ ของรูทของเซิร์ฟเวอร์และเรียกใช้ ไอคอนจะปรากฏในทาสก์บาร์และจะนำทางไปยังเซิร์ฟเวอร์ในเบราว์เซอร์เริ่มต้น

นอกจากนี้Z-WAMPเป็นWAMPแบบพกพา 100% ที่ทำงานในโฟลเดอร์เดียวมันยอดเยี่ยม นั่นเป็นตัวเลือกหากคุณต้องการเซิร์ฟเวอร์ PHP และ MySQL ที่รวดเร็ว

หากคุณใช้ Mozilla Firefox มันจะทำงานได้อย่างที่คาดไว้โดยไม่มีปัญหาใด ๆ

PS น่าแปลกที่ IntenetExplorer_Edge ทำงานได้ดีอย่างแน่นอน !!!

ทางออกที่ง่ายสำหรับผู้ที่ใช้ VS Code

ฉันได้รับข้อผิดพลาดนี้มาระยะหนึ่งแล้ว คำตอบส่วนใหญ่ใช้ได้ผล แต่ฉันพบทางออกที่แตกต่าง หากคุณไม่ต้องการที่จะจัดการกับnode.jsหรือวิธีการแก้ปัญหาอื่น ๆ ที่นี่และคุณกำลังทำงานกับไฟล์ HTML (ฟังก์ชั่นการโทรจากไฟล์ js อื่นหรือเรียก json API ของ) พยายามใช้ส่วนขยายเซิร์ฟเวอร์สด

จะช่วยให้คุณเปิดเซิร์ฟเวอร์สดได้อย่างง่ายดาย และเนื่องจากมันสร้างlocalhostเซิร์ฟเวอร์ปัญหาจึงได้รับการแก้ไข คุณสามารถเริ่มlocalhostโดยเปิดไฟล์ HTML และคลิกขวาที่เครื่องมือแก้ไขแล้วคลิกOpen with Live Serverเปิดและคลิกขวาที่แก้ไขและคลิกที่

มันเป็นพื้นโหลดไฟล์โดยใช้แทนการใช้http://localhost/index.htmlfile://...

แก้ไข

ไม่จำเป็นต้องมี.htmlไฟล์ คุณสามารถเริ่มเซิร์ฟเวอร์สดด้วยทางลัด

กด(alt+L, alt+O)ปุ่มเพื่อเปิดเซิร์ฟเวอร์และ(alt+L, alt+C)หยุดเซิร์ฟเวอร์ [บน MAC cmd+L, cmd+Oและcmd+L, cmd+C]

หวังว่ามันจะช่วยให้ใครบางคน :)

ฉันได้รับข้อผิดพลาดนี้แน่นอนเมื่อโหลดไฟล์ HTML บนเบราว์เซอร์ที่ใช้ไฟล์ json จากไดเรกทอรีในเครื่อง ในกรณีของฉันฉันสามารถแก้ปัญหานี้ได้ด้วยการสร้างเซิร์ฟเวอร์โหนดแบบง่ายที่อนุญาตให้เนื้อหาแบบสแตติกของเซิร์ฟเวอร์ ผมออกจากรหัสสำหรับนี้ที่นี้คำตอบอื่น ๆ

ฉันขอแนะนำให้คุณใช้เซิร์ฟเวอร์ขนาดเล็กเพื่อเรียกใช้แอพพลิเคชั่นประเภทนี้บน localhost (หากคุณไม่ได้ใช้เซิร์ฟเวอร์ inbuilt บางตัว)

นี่คือหนึ่งในการติดตั้งและใช้งานที่ง่ายมาก:

https://www.npmjs.com/package/tiny-server

ฉันสงสัยว่ามันได้ถูกกล่าวถึงแล้วในคำตอบบางคำตอบ แต่ฉันจะแก้ไขสิ่งนี้เล็กน้อยเพื่อให้ได้คำตอบที่สมบูรณ์ (ค้นหาและใช้งานได้ง่ายกว่า)

1. ไปที่: https://nodejs.org/en/download/ ติดตั้ง nodejs

2. ติดตั้ง http npm install -g http-serverเซิร์ฟเวอร์โดยใช้คำสั่งจากพร้อมรับคำสั่ง

3. เปลี่ยนเป็นไดเร็คทอรี่สำหรับทำงานของคุณโดยที่index.html/ yoursome.htmlอยู่

4. เริ่มเซิร์ฟเวอร์ http ของคุณโดยใช้คำสั่ง http-server -c-1

เปิดเว็บเบราว์เซอร์ไปที่http://localhost:8080 หรือhttp://localhost:8080/yoursome.html - ขึ้นอยู่กับชื่อไฟล์ html ของคุณ

มันบอกว่าแอปพลิเคชันควรทำงานบนเว็บเซิร์ฟเวอร์ ฉันมีปัญหาเดียวกันกับโครเมี่ยมฉันเริ่มต้นคราวและย้ายแอปพลิเคชันของฉันไปที่นั่นและทำงานได้

เอ้อ ฉันเพิ่งพบคำบางคำอย่างเป็นทางการว่า "ความพยายามในการโหลด unbuilt, โมดูล AMD ระยะไกลที่ใช้ปลั๊กอิน dojo / text จะล้มเหลวเนื่องจากข้อ จำกัด ด้านความปลอดภัยข้ามแหล่งกำเนิด (โมดูล AMD รุ่นที่สร้างขึ้นนั้นไม่ได้รับผลกระทบเนื่องจากการเรียกใช้ dojo / text ถูกกำจัดโดย ระบบสร้าง) " https://dojotoolkit.org/documentation/tutorials/1.10/cdn/

วิธีหนึ่งที่ใช้งานได้ในการโหลดไฟล์ในเครื่องคือการใช้มันในโฟลเดอร์โครงการแทนที่จะอยู่นอกโฟลเดอร์โครงการของคุณ สร้างหนึ่งโฟลเดอร์ภายใต้ไฟล์ตัวอย่างโครงการของคุณคล้ายกับวิธีที่เราสร้างรูปภาพและแทนที่ส่วนที่ใช้เส้นทางโลคัลที่สมบูรณ์นอกเหนือจากเส้นทางโครงการและใช้ URL สัมพัทธ์ของไฟล์ภายใต้โฟลเดอร์โครงการ มันใช้งานได้สำหรับฉัน

สำหรับทุกคนในMacOS... การตั้งค่าLaunchAgentง่าย ๆเพื่อเปิดใช้งานความสามารถอันน่าทึ่งเหล่านี้ในสำเนาของChromeของคุณเอง ...

บันทึกplist, ชื่ออะไรก็ตาม ( launch.chrome.dev.mode.plistตัวอย่างเช่น) ~/Library/LaunchAgentsด้วยเนื้อหาที่คล้ายกันใน ...

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>Label</key>
    <string>launch.chrome.dev.mode</string>
    <key>ProgramArguments</key>
    <array>
        <string>/Applications/Google Chrome.app/Contents/MacOS/Google Chrome</string>
        <string>-allow-file-access-from-files</string>
    </array>
    <key>RunAtLoad</key>
    <true/>
</dict>
</plist>

มันควรจะเปิดตัวเมื่อเริ่มต้น .. แต่คุณสามารถบังคับให้มันทำตลอดเวลาด้วยคำสั่ง terminal

launchctl load -w ~/Library/LaunchAgents/launch.chrome.dev.mode.plist

TADA! 😎💁🏻🙊🙏🏾

• ติดตั้งเว็บเซิร์ฟเวอร์ในท้องถิ่นสำหรับ java เช่น Tomcat สำหรับ php คุณสามารถใช้ lamp เป็นต้น
• วางไฟล์ json ในไดเรกทอรีเซิร์ฟเวอร์แอปที่เข้าถึงได้

• 

• เริ่มแอพเซิร์ฟเวอร์และคุณควรจะสามารถเข้าถึงไฟล์ได้จาก localhost

ไม่สามารถโหลดไฟล์โลคัลสแตติก (เช่น: svg) โดยไม่มีเซิร์ฟเวอร์ หากคุณมี NPM / YARN ติดตั้งอยู่ในเครื่องของคุณคุณสามารถติดตั้งเซิร์ฟเวอร์ http ง่าย ๆ โดยใช้ " http-server "

npm install http-server -g
http-server [path] [options]

หรือเปิดเทอร์มินัลในโฟลเดอร์โครงการนั้นแล้วพิมพ์ "hs" มันจะเริ่ม HTTP เซิร์ฟเวอร์สดโดยอัตโนมัติ

มีปัญหามากมายในเรื่องนี้ปัญหาของฉันหายไป '/' ตัวอย่าง: jquery-1.10.2.js: 8720 XMLHttpRequest ไม่สามารถโหลดhttp: // localhost: xxxProduct / getList_tagLabels / มันต้องเป็น: http: // localhost: xxx / Product / getList_tagLabels /

ฉันหวังว่าความช่วยเหลือนี้สำหรับผู้ที่พบปัญหานี้

ฉันยังสามารถสร้างข้อความแสดงข้อผิดพลาดนี้อีกครั้งเมื่อใช้แท็กจุดยึดด้วย href ต่อไปนี้:

<a href="javascript:">Example a tag</a>

ในกรณีของฉันมีการใช้แท็กเพื่อรับ 'Pointer Cursor' และเหตุการณ์นั้นควบคุมโดย jQuery บนคลิกเหตุการณ์ ฉันลบ href และเพิ่มคลาสที่เกี่ยวข้อง:

cursor:pointer;

สำหรับผู้ใช้ Linux Python:

import webbrowser
browser = webbrowser.get('google-chrome --allow-file-access-from-files %s')
browser.open(url)

หากคุณยืนยันในการเรียกใช้.htmlไฟล์ในเครื่องและไม่ให้บริการด้วยเว็บเซิร์ฟเวอร์คุณสามารถป้องกันคำขอข้ามที่เกิดขึ้นในครั้งแรกได้โดยทำให้ทรัพยากรที่มีปัญหาเป็นแบบอินไลน์

ฉันมีปัญหานี้เมื่อพยายามที่จะให้บริการไฟล์ผ่าน.js file://วิธีการแก้ปัญหาของฉันคือการปรับปรุงสร้างสคริปต์ของฉันที่จะเปลี่ยนแท็กที่มี<script src="..."> <script>...</script>นี่เป็นgulpวิธีการทำเช่นนั้น:

1. เรียกใช้npm install --save-devแพคเกจgulp, และgulp-inlinedel

2. หลังจากสร้าง a gulpfile.jsไปยังไดเรกทอรีรากเพิ่มรหัสต่อไปนี้ (เพียงเปลี่ยนเส้นทางของไฟล์สำหรับสิ่งที่เหมาะกับคุณ):

let gulp = require('gulp');
let inline = require('gulp-inline');
let del = require('del');

gulp.task('inline', function (done) {
    gulp.src('dist/index.html')
    .pipe(inline({
        base: 'dist/',
        disabledTypes: 'css, svg, img'
    }))
    .pipe(gulp.dest('dist/').on('finish', function(){
        done()
    }));
});

gulp.task('clean', function (done) {
    del(['dist/*.js'])
    done()
});

gulp.task('bundle-for-local', gulp.series('inline', 'clean'))

3. รันgulp bundle-for-localหรืออัพเดตสคริปต์บิลด์ของคุณเพื่อรันโดยอัตโนมัติ

ท่านสามารถเข้าดูรายละเอียดปัญหาและวิธีแก้ปัญหาสำหรับกรณีของฉันที่นี่

คอร์โดวาบรรลุเป้าหมายนี้ ฉันยังไม่สามารถหาวิธีที่คอร์โดวาทำ มันไม่ได้ผ่านการตรวจสอบควรจะขอ

ต่อมาฉันพบว่ากุญแจสำคัญในการโหลดไฟล์ใด ๆ จากท้องถิ่นคือ: myWebView.getSettings (). setAllowUniversalAccessFromFileURLs (จริง);

และเมื่อคุณต้องการเข้าถึงทรัพยากร http ใด ๆ webview จะทำการตรวจสอบด้วยวิธี OPTIONS ซึ่งคุณสามารถให้สิทธิ์การเข้าถึงผ่าน WebViewClient.shouldInterceptRequest ด้วยการส่งคืนการตอบกลับและสำหรับวิธี GET / POST ต่อไปนี้คุณสามารถคืนค่า Null ได้

ก่อนปิดอินสแตนซ์ทั้งหมดของ chrome

หลังจากนั้นทำตามสิ่งนี้

ฉันใช้คำสั่งนี้กับ mac

"/ Applications / Google Chrome.app/Contents/MacOS/Google Chrome" --allow-file-access-from-files

สำหรับ windows:

วิธีเปิด html โดยใช้ Chrome ในโหมด "--allow-file-access-from-files"

ประสบปัญหานี้เมื่อฉันดาวน์โหลดเพจเพื่อดูแบบออฟไลน์

ฉันเพิ่งลบintegrity="*****"และcrossorigin="anonymous"คุณลักษณะจากทั้งหมด<link>และ<script>แท็ก