ทรัพยากรตีความว่าเป็นสไตล์ชีท แต่ถ่ายโอนด้วย MIME type text / html (ดูเหมือนจะไม่เกี่ยวข้องกับเว็บเซิร์ฟเวอร์)

ฉันมีปัญหานี้ Chrome ยังคงส่งคืนข้อผิดพลาดนี้อย่างต่อเนื่อง

ทรัพยากรตีความว่าเป็นสไตล์ชีท แต่ถ่ายโอนด้วย MIME type text / html

ไฟล์ที่ได้รับผลกระทบจากข้อผิดพลาดนี้เป็นเพียงรูปแบบที่เลือกและ jquery-gentleselect (ไฟล์ CSS อื่น ๆ ที่นำเข้าในดัชนีในลักษณะเดียวกันทำงานได้ดีและไม่มีข้อผิดพลาด) ฉันได้ตรวจสอบประเภท MIME แล้วและข้อความ / css นั้นอยู่ใน CSS แล้ว

สุจริตฉันต้องการเริ่มต้นด้วยการทำความเข้าใจปัญหา (สิ่งที่ดูเหมือนว่าฉันไม่สามารถทำคนเดียว)

ฉันต้องการเริ่มต้นด้วยการเข้าใจปัญหา

เบราว์เซอร์ทำการร้องขอ HTTP ไปยังเซิร์ฟเวอร์ เซิร์ฟเวอร์จะทำการตอบกลับ HTTP

ทั้งคำขอและคำตอบประกอบด้วยส่วนหัวและเนื้อหา (บางครั้งเป็นตัวเลือก) ที่มีเนื้อหาอยู่ในนั้น

หากมีเนื้อหาส่วนหัวหนึ่งในนั้นจะContent-Typeอธิบายสิ่งที่เนื้อหา (เป็นเอกสาร HTML หรือไม่รูปภาพหรือเนื้อหาของการส่งแบบฟอร์มเป็นต้น)

เมื่อคุณขอสไตล์ชีทเซิร์ฟเวอร์ของคุณกำลังบอกเบราว์เซอร์ว่าเป็นเอกสาร HTML ( Content-Type: text/html) แทนที่จะเป็นสไตล์ชีท ( Content-Type: text/css)

ฉันได้ตรวจสอบ myme.type แล้วและ text / css นั้นอยู่ใน css

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

ใช้แท็บ Net ของเครื่องมือผู้พัฒนาเบราว์เซอร์ของคุณเพื่อตรวจสอบคำขอและการตอบกลับ

ใช้เชิงมุมหรือไม่

นี่เป็นข้อแม้ที่สำคัญมากที่ต้องจำ

แท็กฐานไม่เพียง แต่ต้องอยู่ในส่วนหัว แต่อยู่ในตำแหน่งที่ถูกต้อง

ฉันมีแท็กฐานของฉันในตำแหน่งที่ผิดในหัวมันควรมาก่อนแท็กใด ๆ ที่มีการร้องขอ URL โดยทั่วไปวางไว้เป็นแท็กที่สองภายใต้ชื่อแก้ไขให้ฉัน

<base href="/">

ฉันเขียนโพสต์เล็กน้อยที่นี่

ฉันยังมีปัญหากับข้อผิดพลาดนี้และหาวิธีแก้ไข นี่ไม่ได้อธิบายว่าทำไมข้อผิดพลาดเกิดขึ้น แต่ดูเหมือนว่าจะแก้ไขได้ในบางกรณี

รวมเครื่องหมายฟอร์เวิร์ดสแลช / ก่อนพา ธ ไปยังไฟล์ css เช่น:

<link rel="stylesheet" href="https://stackoverflow.com/css/bootstrap.min.css">

ปัญหาของฉันง่ายกว่าคำตอบทั้งหมดในโพสต์นี้

ฉันต้องติดตั้ง IIS เพื่อรวมเนื้อหาแบบคงที่

ลองสิ่งนี้ <link rel="stylesheet" type="text/css" href="../##/yourcss.css">

##โฟลเดอร์ของคุณอยู่ที่ไหนในที่นั้นคือ. CSS - ไฟล์

อย่าลืมเกี่ยวกับ: ..(จุดสองจุด)

การตั้งค่าข้อมูลประจำตัวรับรองความถูกต้องแบบไม่ระบุตัวตนให้กับApplication Pool Identityนั้นเป็นการหลอกลวงสำหรับฉัน

ฉันก็ประสบปัญหาเดียวกัน และหลังจากทำ R&D แล้วฉันก็พบว่าปัญหาเกิดขึ้นกับชื่อไฟล์ ชื่อของแฟ้มที่เกิดขึ้นจริงเป็น"lightgallery.css"แต่ในขณะที่การเชื่อมโยงฉันมีพิมพ์"lightGallery.css"

ข้อมูลเพิ่มเติม:

มันทำงานได้ดีบน localhost ของฉัน (OS: Windows 8.1 & Server: Apache) แต่เมื่อฉันอัปโหลดแอปพลิเคชันของฉันไปยังเซิร์ฟเวอร์ระยะไกล (ระบบปฏิบัติการและเว็บเซิร์ฟเวอร์ที่แตกต่างจากในพื้นที่ของฉัน) มันใช้งานไม่ได้ทำให้ฉันมีข้อผิดพลาดเช่นเดียวกับคุณ

ดังนั้นปัญหาคือความไวของตัวพิมพ์เล็ก (เกี่ยวกับชื่อไฟล์) ของเซิร์ฟเวอร์

จากคำตอบอื่น ๆ ดูเหมือนว่าข้อความนี้มีสาเหตุมากมายฉันคิดว่าฉันจะแบ่งปันวิธีแก้ปัญหาส่วนตัวของฉันในกรณีที่ใครก็ตามมีปัญหาที่แน่นอนของฉันในอนาคต

เว็บไซต์ของเราโหลดไฟล์ CSS จากการกระจาย AWS Cloudfront ซึ่งใช้ที่ฝากข้อมูล S3 เป็นจุดเริ่มต้น ที่ฝากข้อมูล S3 เฉพาะนี้ได้รับการซิงค์กับเซิร์ฟเวอร์ Linux ที่ใช้งาน Jenkins syncคำสั่งผ่านทางs3cmdชุดประเภทเนื้อหาสำหรับวัตถุ S3 โดยอัตโนมัติตามสิ่งที่ OS กล่าวว่า (น่าจะขึ้นอยู่กับนามสกุลของไฟล์) ด้วยเหตุผลบางอย่างในเซิร์ฟเวอร์ของเราทุกประเภทถูกกำหนดอย่างถูกต้องยกเว้นไฟล์ซึ่งมันทำให้ชนิด.css text/plainใน S3 เมื่อคุณตรวจสอบข้อมูลเมตาในคุณสมบัติของไฟล์คุณสามารถกำหนดประเภทเป็นสิ่งที่คุณต้องการ ตั้งค่าให้text/cssอนุญาตให้เว็บไซต์ของเราแปลไฟล์เป็น CSS และโหลดได้อย่างถูกต้อง

ในกรณีที่คุณรับใช้ CSS แบบคงที่ด้วย nginx คุณควรเพิ่ม

location ~ \.css {
    add_header  Content-Type    text/css;
}
location ~ \.js {
    add_header  Content-Type    application/x-javascript;
}

หรือ

location ~ \.css{
    default_type text/css;
}
location ~ \.js{
    default_type application/x-javascript;
}

เพื่อ nginx conf

@ Rob คำตอบ Sedgwick ของให้ผมชี้อย่างไรก็ตามในกรณีของฉัน app ของฉันเป็นBoot แอพลิเคชันฤดูใบไม้ผลิ ดังนั้นฉันเพิ่งเพิ่มการยกเว้นในการกำหนดค่าความปลอดภัยของฉันสำหรับเส้นทางไปยังไฟล์ที่เกี่ยวข้อง ...

หมายเหตุ - โซลูชันนี้ใช้ SpringBoot ... สิ่งที่คุณอาจต้องทำอาจแตกต่างกันไปตามภาษาการเขียนโปรแกรมที่คุณใช้และ / หรือกรอบการทำงานที่คุณใช้

อย่างไรก็ตามประเด็นที่ควรทราบคือ

โดยพื้นฐานแล้วปัญหาอาจเกิดขึ้นได้เมื่อทุกคำขอรวมถึงคำขอสำหรับเนื้อหาแบบสแตติกกำลังได้รับการตรวจสอบความถูกต้อง

ดังนั้นสมมติว่าบางพา ธ ไปยังเนื้อหาสแตติกของฉันซึ่งทำให้เกิดข้อผิดพลาดมีดังนี้

เส้นทางที่เรียกว่า "ปลั๊กอิน"

http: // localhost: 8080 / ปลั๊กอิน / รูปแบบ css / / ไฟล์ 1.css

http: // localhost: 8080 / ปลั๊กอิน / รูปแบบ css / / ไฟล์ 2.css

http: // localhost: 8080 / ปลั๊กอิน / js / สคริปต์ file.js

และเส้นทางที่เรียกว่า "หน้า"

http: // localhost: 8080 / หน้า / รูปแบบ css / / สไตล์ 1.css

http: // localhost: 8080 / หน้า / รูปแบบ css / / สไตล์ 2.css

http: // localhost: 8080 / หน้า / js / scripts.js

จากนั้นฉันก็เพิ่มการยกเว้นดังต่อไปนี้ใน Spring Boot Security Config;

@Configuration
@EnableGlobalMethodSecurity(prePostEnabled = true)
@Order(SecurityProperties.ACCESS_OVERRIDE_ORDER)
public class SecurityConfig extends WebSecurityConfigurerAdapter {

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.authorizeRequests()
            .antMatchers(<comma separated list of other permitted paths>, "/plugins/**", "/pages/**").permitAll()
            // other antMatchers can follow here
    }

}

ไชโย!

การใช้เชิงมุม

ในกรณีของฉันใช้ng-hrefแทนhrefแก้ไขให้ฉัน

บันทึก :

ฉันกำลังทำงานกับ laravel เหมือนแบ็คเอนด์

ฉันกำลังเผชิญกับสิ่งเดียวกันโดยมีไฟล์. htaccess เรียงกันเพื่อสร้าง URL ที่สวย หลังจากผ่านไปหลายชั่วโมงและมองไปรอบ ๆ ฉันพบว่าข้อผิดพลาดเป็นเพราะการเชื่อมโยงไฟล์ค่อนข้าง

เบราว์เซอร์จะเริ่มดึงไฟล์ html ต้นทางเดียวกันสำหรับไฟล์ css, js และรูปภาพทั้งหมดเมื่อฉันจะเรียกดูขั้นตอนลึกเข้าไปในเซิร์ฟเวอร์

เพื่อตอบโต้สิ่งนี้คุณสามารถใช้<base>แท็กกับซอร์ส html ของคุณ

<base href="http://localhost/assets/">

และลิงก์ไปยังไฟล์เช่น

<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="js/script.js"></script>

หรือใช้ลิงก์แบบสมบูรณ์สำหรับไฟล์ทั้งหมดของคุณ

<link rel="stylesheet" type="text/css" href="http://localhost/assets/css/style.css" />
<script src="http://localhost/assets/js/script.js"></script>
<img src="http://localhost/assets/images/logo.png" />

หากคุณใช้ JSP ปัญหานี้อาจมาจากการแม็พเซิร์ฟเล็ตของคุณ หากการจับคู่ของคุณใช้ URL โดย defaut เช่นนี้:

@WebServlet("/")

จากนั้นคอนเทนเนอร์จะแปล css url ของคุณและไปที่เซิร์ฟเล็ตแทนที่จะไปที่ไฟล์ css

ฉันมีปัญหาเดียวกันฉันเปลี่ยนการแมปและตอนนี้ทุกอย่างทำงานได้

ฉันมีปัญหาที่คล้ายกันใน MVC4 โดยใช้การตรวจสอบแบบฟอร์ม ปัญหาคือบรรทัดนี้ใน web.config

<modules runAllManagedModulesForAllRequests="true">

ซึ่งหมายความว่าทุกคำขอรวมถึงคำขอสำหรับเนื้อหาแบบคงที่จะได้รับการตรวจสอบสิทธิ์

เปลี่ยนบรรทัดนี้เป็น:

<modules runAllManagedModulesForAllRequests="false">

ฉันยังต้องเผชิญกับปัญหานี้เมื่อเร็ว ๆ นี้โครเมี่ยม ฉันแค่ให้เส้นทางที่แน่นอนในการแก้ไขปัญหาไฟล์ CSS ของฉัน

<link rel="stylesheet" href="<?=SS_URL?>arica/style.css" type="text/css" />

ฉันต้องการขยายจุดของ Todd R ใน OP ในหน้า asp.net web.configไฟล์จะกำหนดสิทธิ์ที่จำเป็นในการเข้าถึงแต่ละไฟล์หรือโฟลเดอร์ในแอปพลิเคชัน ในกรณีของเราโฟลเดอร์ของไฟล์ CSS ไม่อนุญาตการเข้าถึงสำหรับผู้ใช้ที่ไม่ได้รับอนุญาตทำให้ล้มเหลวในหน้าเข้าสู่ระบบก่อนที่ผู้ใช้จะได้รับอนุญาต การเปลี่ยนการอนุญาตที่จำเป็นในweb.configผู้ใช้ที่ไม่ได้รับอนุญาตให้เข้าถึงไฟล์ CSS และแก้ไขปัญหานี้

ในกรณีที่ใครมาโพสต์นี้และมีปัญหาที่คล้ายกัน ฉันเพิ่งพบปัญหาที่คล้ายกัน แต่การแก้ปัญหาค่อนข้างง่าย

ผู้พัฒนาวางสำเนา web.config ลงในไดเรกทอรี CSS โดยไม่ตั้งใจ เมื่อลบแล้วข้อผิดพลาดทั้งหมดจะได้รับการแก้ไขและแสดงหน้าอย่างถูกต้อง

ฉันเจอปัญหาเดียวกันในขณะที่ทำงานในโครงการสแต็ก MEAN อันเก่า ฉันถูกใช้เป็นเซิร์ฟเวอร์การพัฒนาท้องถิ่นของฉันและมีข้อผิดพลาดเดียวกันnodemon Resource interpreted as stylesheet but transferred with MIME type text/htmlผมเปลี่ยนจากnodemonการhttp-serverซึ่งสามารถพบได้ที่นี่ มันใช้งานได้ทันทีสำหรับฉัน

เป็นเพราะคุณต้องตั้งประเภทเนื้อหาเป็น text / html แทน text / css สำหรับหน้าเซิร์ฟเวอร์ของคุณ (php, node.js ฯลฯ )

สิ่งนี้เกิดขึ้นเมื่อฉันลบโปรโตคอลออกจากลิงก์ css สำหรับสไตล์ชีท css ที่ให้บริการโดย google CDN

สิ่งนี้ไม่มีข้อผิดพลาด:

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Architects+Daughter">

แต่สิ่งนี้จะทำให้เกิดข้อผิดพลาดในการตีความทรัพยากรเป็น Stylesheet แต่ถ่ายโอนด้วย MIME type text / html :

<link rel="stylesheet" href="fonts.googleapis.com/css?family=Architects+Daughter">

ฉันกำลังเผชิญกับปัญหาที่คล้ายกัน และสำรวจวิธีแก้ไขปัญหาในหน้า Stack Overflow ที่ยอดเยี่ยมนี้

การตอบสนองของผู้ใช้ 54861 ​​(ชื่อไม่ตรงกันในกรณีที่มีความรู้สึกไว) ทำให้ฉันอยากตรวจสอบรหัสของฉันอีกครั้งและตระหนักว่า " ฉันไม่ได้อัปโหลดไฟล์ js สองไฟล์ที่ฉันโหลดไว้ในแท็กหัว " :-)

เมื่อฉันอัปโหลดพวกเขาปัญหาจะหายไป! และการรันโค้ดและการแสดงผลหน้าเว็บโดยไม่มีข้อผิดพลาดอีก!

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

ฉันเจอปัญหาเดียวกันกับโปรแกรม. NET ซึ่งเป็น CMS โอเพ่นซอร์สที่เรียกว่า MojoPortal ในหนึ่งในธีมและสกินของฉันสำหรับบางไซต์เมื่อเรียกดูหรือทดสอบมันจะทำการบดและทำให้ช้าลงราวกับว่ามันสำลัก

ปัญหาของฉันไม่ใช่แอตทริบิวต์ "type" สำหรับ CSS แต่เป็น "สิ่งอื่น" การเปลี่ยนแปลงที่แน่นอนของฉันอยู่ในWeb.Config ฉันเปลี่ยนค่าทั้งหมดเป็น FALSE สำหรับ MinifyCSS, CacheCssOnserver และ CacheCSSinBrowser

เมื่อมีการตั้งค่าเว็บไซต์ก็รวดเร็วอีกครั้งในการผลิต

มีข้อผิดพลาดเดียวกันเพราะฉันลืมส่งหัวข้อที่ถูกต้องก่อน

header("Content-type: text/css; charset: UTF-8");
print 'body { text-align: justify; font-size: 2em; }';

การใช้ ReactJs เมื่อฉันเพิ่มไฟล์สไตล์ลงใน index.html โดยใช้ลิงก์ที่เกี่ยวข้องเช่น

<link rel="stylesheet" href="./css/style.css">

แล้วฉันก็นำทางไปยังเส้นทางที่พูด localhost:3000/artistและรีเฟรชฉันได้รับข้อผิดพลาด

ข้อผิดพลาดหายไปหลังจากฉันแทนที่ลิงค์สัมพัทธ์ด้วยลิงค์สัมบูรณ์บอกว่า;

<link rel="stylesheet" href="http://localhost/project/public/css/style.css".

ฉันพบปัญหานี้เมื่อโหลด CSS สำหรับโมดูลเค้าโครงแบบโต้ตอบที่ฉันติดตั้งด้วย npm คุณต้องนำเข้าไฟล์. css สองไฟล์เพื่อให้โมดูลนี้ทำงานดังนั้นฉันเริ่มนำเข้าไฟล์พวกนี้ดังนี้:

@import "../../../../node_modules/react-grid-layout/css/styles.css";

แต่พบว่าส่วนขยายไฟล์จะต้องถูกดร็อปดังนั้นสิ่งนี้จึงใช้ได้:

@import "../../../../node_modules/react-grid-layout/css/styles";

หากnodejsและใช้express รหัสด้านล่างใช้งานได้ ...

res.set('Content-Type', 'text/css');

ฉันมีปัญหาที่แน่นอนเหมือนกันและหลังจากนั้นไม่กี่นาทีฉันก็ถอดรหัสไม่ได้ว่าฉันพลาดที่จะเพิ่มนามสกุลไฟล์ไปยังส่วนหัวของฉัน ดังนั้นฉันเปลี่ยนบรรทัดต่อไปนี้:

<link uic-remove rel="stylesheet" href="css/bahblahblah">

ถึง

<link uic-remove rel="stylesheet" href="css/bahblahblah.css"> 

ฉันเริ่มที่จะได้รับปัญหาในวันนี้เฉพาะใน Chrome และไม่ใช่ซาฟารีสำหรับโครงการ / URL เดียวกันสำหรับคอนเทนเนอร์ goormide ของฉัน (node.js)

หลังจากลองใช้คำแนะนำหลายข้อด้านบนซึ่งไม่ปรากฏว่าใช้งานได้และย้อนรอยย้อนกลับเกี่ยวกับการเปลี่ยนแปลงรหัสบางอย่างฉันทำเมื่อวานนี้เป็นวันนี้ซึ่งก็ไม่ได้แตกต่างอะไรเลย

1.Settings;

2. เลื่อนลงไปด้านล่างเลือก: "ขั้นสูง";

3. เลื่อนลงไปด้านล่างเลือก: "กู้คืนการตั้งค่าเป็นค่าเริ่มต้นดั้งเดิม";

ที่ดูเหมือนจะมีการแก้ไขปัญหาที่ฉันไม่ได้รับการเตือน / ข้อผิดพลาดในคอนโซลและหน้าแสดงตามที่ควร การอ่านโพสต์ด้านบนดูเหมือนว่าปัญหาสามารถเกิดขึ้นได้จากแหล่งใด ๆ จำนวนมากดังนั้นการรีเซ็ตการตั้งค่าอาจเป็นวิธีแก้ไขทั่วไป ไชโย

หากคุณกำลังให้บริการแอพใน prod ตรวจสอบให้แน่ใจว่าคุณกำลังให้บริการไฟล์คงที่กับพนักงานบริการ ฉันมีข้อผิดพลาดนี้เมื่อฉันให้บริการเฉพาะโฟลเดอร์ย่อยแบบคงที่ของ React build บน Django (ไม่มีสินทรัพย์ที่มีสไตล์)

การใช้ React

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

หากคุณกำลังเชื่อมโยงไฟล์ในโฟลเดอร์สาธารณะของคุณคุณต้องจำไว้ว่าให้ใช้% PUBLIC_URL% ก่อนทรัพยากรเช่นนี้:

<link type="text/css" rel="stylesheet" href="%PUBLIC_URL%/bootstrap.min.css" />