ทำไมคำขอ OPTIONS ถึงส่งมาและฉันจะปิดได้อย่างไร

ฉันกำลังสร้างเว็บ API ฉันพบว่าเมื่อใดก็ตามที่ฉันใช้ Chrome เพื่อ POST รับ API ของฉันมีคำขอ OPTIONS ส่งมาก่อนคำขอจริงซึ่งมักจะน่ารำคาญ ขณะนี้ฉันได้รับเซิร์ฟเวอร์ให้เพิกเฉยต่อคำขอ OPTIONS ตอนนี้คำถามของฉันคือสิ่งที่ดีที่จะส่งคำขอ OPTIONS เพื่อเพิ่มภาระของเซิร์ฟเวอร์เป็นสองเท่า มีวิธีใดบ้างที่จะหยุดเบราว์เซอร์ไม่ให้ส่งคำขอ OPTIONS ได้อย่างสมบูรณ์?

แก้ไข 2018-09-13 : เพิ่มเงื่อนไขบางประการเกี่ยวกับคำขอเที่ยวบินล่วงหน้านี้และวิธีหลีกเลี่ยงเมื่อสิ้นสุดการตอบกลับนี้

OPTIONSคำขอเป็นสิ่งที่เราเรียกpre-flightคำขอCross-origin resource sharing (CORS)มา

พวกเขาจำเป็นเมื่อคุณทำการร้องขอข้ามจุดกำเนิดต่าง ๆ ในสถานการณ์เฉพาะ

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

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

แหล่งข้อมูลที่ดีสามารถพบได้ที่นี่http://enable-cors.org/

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

Access-Control-Allow-Origin: *

สิ่งนี้จะบอกเบราว์เซอร์ว่าเซิร์ฟเวอร์ยินดีตอบรับการร้องขอจากแหล่งกำเนิดใด ๆ

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับวิธีเพิ่มการรองรับ CORS ให้กับเซิร์ฟเวอร์ของคุณโปรดดูผังงานต่อไปนี้

http://www.html5rocks.com/static/images/cors_server_flowchart.png

แก้ไข 2018-09-13

OPTIONSคำขอCORS จะถูกเรียกใช้ในบางกรณีดังที่อธิบายไว้ในเอกสาร MDN :

คำขอบางอย่างไม่เรียก CORS preflight สิ่งเหล่านี้เรียกว่า“ คำของ่าย ๆ ” ในบทความนี้ถึงแม้ว่าข้อมูลจำเพาะการดึงข้อมูล (ซึ่งกำหนด CORS) จะไม่ใช้คำนั้น คำขอที่ไม่เรียกใช้ CORS preflight ซึ่งเรียกว่า“ คำของ่าย” - เป็นคำขอที่ตรงตามเงื่อนไขต่อไปนี้ทั้งหมด:

วิธีการที่อนุญาตเท่านั้นคือ:

• GET
• ศีรษะ
• โพสต์

นอกเหนือจากส่วนหัวที่ตั้งค่าโดยอัตโนมัติโดยตัวแทนผู้ใช้ (ตัวอย่างเช่นการเชื่อมต่อตัวแทนผู้ใช้หรือส่วนหัวอื่น ๆ ที่มีชื่อที่กำหนดไว้ในสเปค Fetch เป็น "ชื่อส่วนหัวที่ต้องห้าม") ส่วนหัวเท่านั้นที่ได้รับอนุญาต การตั้งค่าด้วยตนเองคือค่าที่ Fetch spec กำหนดว่าเป็น“ CORS-safelisted request-header” ซึ่ง ได้แก่ :

• ยอมรับ
• ยอมรับภาษา
• เนื้อหาภาษา
• ประเภทเนื้อหา (แต่โปรดสังเกตข้อกำหนดเพิ่มเติมด้านล่าง)
• DPR
• downlink
• บันทึกข้อมูล
• วิวพอร์ตกว้าง
• ความกว้าง

ค่าที่อนุญาตเฉพาะสำหรับส่วนหัวประเภทเนื้อหาคือ:

• แอพลิเคชัน / x-www ฟอร์ม urlencoded
• multipart / form ข้อมูล
• ข้อความ / ธรรมดา

ไม่มีการลงทะเบียนตัวรับฟังเหตุการณ์บนวัตถุ XMLHttpRequestUpload ใด ๆ ที่ใช้ในคำขอ สิ่งเหล่านี้เข้าถึงได้โดยใช้คุณสมบัติ XMLHttpRequest.upload

ไม่มีวัตถุ ReadableStream ถูกใช้ในการร้องขอ

ได้ผ่านปัญหานี้ด้านล่างนี้เป็นข้อสรุปของฉันสำหรับปัญหานี้และวิธีแก้ไขปัญหาของฉัน

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

มีสองวิธีที่คุณสามารถหลีกเลี่ยงได้:

1. ตรวจสอบให้แน่ใจว่าคำขอของคุณเป็น "คำของ่าย"
2. ตั้งค่าAccess-Control-Max-Ageสำหรับคำขอ OPTIONS

ของ่าย

คำขอข้ามไซต์อย่างง่ายคือคำขอที่ตรงตามเงื่อนไขต่อไปนี้ทั้งหมด:

วิธีการที่อนุญาตเท่านั้นคือ:

• GET
• ศีรษะ
• โพสต์

นอกเหนือจากส่วนหัวที่ตั้งค่าโดยอัตโนมัติโดยตัวแทนผู้ใช้ (เช่นการเชื่อมต่อตัวแทนผู้ใช้ ฯลฯ ) เพียงส่วนหัวที่ได้รับอนุญาตให้ตั้งค่าด้วยตนเองคือ:

• ยอมรับ
• ยอมรับภาษา
• เนื้อหาภาษา
• ชนิดของเนื้อหา

ค่าที่อนุญาตเฉพาะสำหรับส่วนหัวประเภทเนื้อหาคือ:

• แอพลิเคชัน / x-www ฟอร์ม urlencoded
• multipart / form ข้อมูล
• ข้อความ / ธรรมดา

คำร้องขอแบบง่ายจะไม่ทำให้คำขอ OPTIONS ก่อนออกเดินทาง

ตั้งค่าแคชสำหรับการตรวจสอบ OPTIONS

คุณสามารถตั้งค่าAccess-Control-Max-Ageสำหรับคำขอ OPTIONS เพื่อไม่ให้ตรวจสอบการอนุญาตอีกครั้งจนกว่าจะหมดอายุ

Access-Control-Max-Age ให้ค่าในไม่กี่วินาทีสำหรับการตอบสนองคำขอแคชล่วงหน้าได้โดยไม่ต้องส่งคำขอ preflight อื่นอีก

ข้อ จำกัด ที่ระบุไว้

• สำหรับ Chrome, วินาทีสูงสุดสำหรับการAccess-Control-Max-Ageมี600ซึ่งเป็น 10 นาทีตามรหัสที่มาโครเมี่ยม
• Access-Control-Max-Ageใช้งานได้กับทรัพยากรเดียวทุกครั้งเช่นGETคำขอที่มีเส้นทาง URL เดียวกัน แต่แบบสอบถามที่แตกต่างกันจะถือว่าเป็นทรัพยากรที่แตกต่างกัน ดังนั้นการร้องขอไปยังทรัพยากรที่สองจะยังคงก่อให้เกิดการร้องขอ preflight

โปรดอ้างอิงคำตอบนี้เกี่ยวกับความต้องการที่แท้จริงสำหรับคำขอ OPTIONS ก่อนออกเดินทาง: CORS - อะไรคือแรงจูงใจเบื้องหลังการแนะนำคำขอ preflight?

หากต้องการปิดใช้งานคำขอ OPTIONS ต้องปฏิบัติตามเงื่อนไขด้านล่างสำหรับคำขอ ajax:

1. คำขอไม่ได้ตั้งค่าส่วนหัว HTTP ที่กำหนดเองเช่น 'application / xml' หรือ 'application / json' เป็นต้น
2. วิธีการร้องขอจะต้องเป็นหนึ่งใน GET, HEAD หรือ POST ถ้าโพสต์, ชนิดของเนื้อหาควรจะเป็นหนึ่งapplication/x-www-form-urlencoded, multipart/form-dataหรือtext/plain

การอ้างอิง: https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

เมื่อคุณเปิดคอนโซลดีบักและDisable Cacheตัวเลือกเปิดใช้งานคำขอ preflight จะถูกส่งเสมอ (เช่นก่อนคำขอแต่ละครั้งและทุกครั้ง) หากคุณไม่ได้ปิดการใช้งานแคชคำขอเที่ยวบินล่วงหน้าจะถูกส่งเพียงครั้งเดียว (ต่อเซิร์ฟเวอร์)

ใช่เป็นไปได้ที่จะหลีกเลี่ยงการร้องขอตัวเลือก คำขอตัวเลือกคือคำขอ preflight เมื่อคุณส่ง (โพสต์) ข้อมูลใด ๆ ไปยังโดเมนอื่น มันเป็นปัญหาด้านความปลอดภัยของเบราว์เซอร์ แต่เราสามารถใช้เทคโนโลยีอื่น: เลเยอร์การขนส่ง iframe ฉันขอแนะนำให้คุณลืมเกี่ยวกับการกำหนดค่า CORS ใด ๆ และใช้โซลูชัน readymade และจะทำงานได้ทุก

ลองดูที่นี่: https://github.com/jpillora/xdomain

และตัวอย่างการทำงาน: http://jpillora.com/xdomain/

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

ฉันพบว่าคุณสามารถปิดการใช้งาน CORS ใน Safari และ Chrome บน Mac

ปิดใช้งานนโยบายต้นกำเนิดเดียวกันใน Chrome

Chrome: ออกจาก Chrome เปิดเทอร์มินัลแล้ววางคำสั่งนี้: open /Applications/Google\ Chrome.app --args --disable-web-security --user-data-dir

Safari: การปิดใช้งานนโยบายดั้งเดิมใน Safari

หากคุณต้องการปิดการใช้งานนโยบายต้นกำเนิดเดียวกันบน Safari (ฉันมี 9.1.1) คุณจะต้องเปิดใช้งานเมนูนักพัฒนาและเลือก "ปิดการใช้งานข้อ จำกัด ข้ามแหล่งกำเนิด" จากเมนูพัฒนา

ตามที่กล่าวไว้ในโพสต์ก่อนหน้าแล้วOPTIONSคำขอจะมีเหตุผล หากคุณมีปัญหากับเวลาตอบสนองจำนวนมากจากเซิร์ฟเวอร์ของคุณ (เช่นการเชื่อมต่อในต่างประเทศ) คุณสามารถให้เบราว์เซอร์ของคุณทำการร้องขอ preflight ได้

ให้เซิร์ฟเวอร์ของคุณตอบกลับด้วยAccess-Control-Max-Ageส่วนหัวและสำหรับคำขอที่ไปยังจุดปลายทางเดียวกันคำขอ preflight จะถูกแคชและจะไม่เกิดขึ้นอีก

ฉันได้แก้ไขปัญหานี้แล้วเช่น

if($_SERVER['REQUEST_METHOD'] == 'OPTIONS' && ENV == 'devel') {
    header('Access-Control-Allow-Origin: *');
    header('Access-Control-Allow-Headers: X-Requested-With');
    header("HTTP/1.1 200 OK");
    die();
}

มันเป็นเพียงเพื่อการพัฒนา ด้วยสิ่งนี้ฉันกำลังรอ 9ms และ 500ms ไม่ใช่ 8s และ 500ms ฉันสามารถทำได้เพราะแอปผลิต JS จะอยู่ในเครื่องเดียวกับการผลิตดังนั้นจะไม่มีOPTIONSแต่การพัฒนาคือท้องถิ่นของฉัน

คุณทำไม่ได้ แต่คุณสามารถหลีกเลี่ยง CORS โดยใช้ JSONP ได้

หลังจากใช้เวลาทั้งวันและครึ่งหนึ่งพยายามที่จะทำงานผ่านปัญหาที่คล้ายกันผมพบว่ามันจะทำอย่างไรกับIIS

ตั้งค่าโปรเจ็กต์ Web API ของฉันดังนี้:

// WebApiConfig.cs
public static void Register(HttpConfiguration config)
{
    var cors = new EnableCorsAttribute("*", "*", "*");
    config.EnableCors(cors);
    //...
}

ฉันไม่ได้มีตัวเลือกการกำหนดค่า CORS เฉพาะในโหนด web.config> system.webServer เหมือนที่ฉันเห็นในโพสต์มากมาย

ไม่มีรหัสเฉพาะ CORS ใน global.asax หรือในคอนโทรลเลอร์เป็นมัณฑนากร

ปัญหาคือการตั้งค่ากลุ่มแอพ

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

การเปลี่ยนการตั้งค่าเหล่านั้น (และการรีเฟรชพูลแอป) แก้ไขให้ฉัน

สิ่งที่ใช้ได้ผลสำหรับฉันคือการนำเข้า "github.com/gorilla/handlers" แล้วใช้วิธีนี้:

router := mux.NewRouter()
router.HandleFunc("/config", getConfig).Methods("GET")
router.HandleFunc("/config/emcServer", createEmcServers).Methods("POST")

headersOk := handlers.AllowedHeaders([]string{"X-Requested-With", "Content-Type"})
originsOk := handlers.AllowedOrigins([]string{"*"})
methodsOk := handlers.AllowedMethods([]string{"GET", "HEAD", "POST", "PUT", "OPTIONS"})

log.Fatal(http.ListenAndServe(":" + webServicePort, handlers.CORS(originsOk, headersOk, methodsOk)(router)))

ทันทีที่ฉันดำเนินการคำขอ Ajax POST และแนบข้อมูล JSON เข้ากับมัน Chrome จะเพิ่มส่วนหัวของประเภทเนื้อหาซึ่งไม่ได้อยู่ในการกำหนดค่า AllowedHeaders ก่อนหน้าของฉันเสมอ

ทางออกหนึ่งที่ฉันเคยใช้ในอดีต - สมมติว่าไซต์ของคุณอยู่บน mydomain.com และคุณต้องทำการร้องขอ ajax กับ foreigndomain.com

กำหนดค่าการเขียน IIS จากโดเมนของคุณไปยังโดเมนต่างประเทศ - เช่น

<rewrite>
  <rules>
    <rule name="ForeignRewrite" stopProcessing="true">
        <match url="^api/v1/(.*)$" />
        <action type="Rewrite" url="https://foreigndomain.com/{R:1}" />
    </rule>
  </rules>
</rewrite>

บนเว็บไซต์ mydomain.com ของคุณ - จากนั้นคุณสามารถส่งคำขอต้นฉบับและไม่จำเป็นต้องมีตัวเลือกคำขอใด ๆ :)

สามารถแก้ไขได้ในกรณีที่ใช้พรอกซีที่ขัดขวางคำขอและเขียนส่วนหัวที่เหมาะสม ในกรณีเฉพาะของวานิชสิ่งเหล่านี้จะเป็นกฎ:

if (req.http.host == "CUSTOM_URL" ) {
set resp.http.Access-Control-Allow-Origin = "*";
if (req.method == "OPTIONS") {
   set resp.http.Access-Control-Max-Age = "1728000";
   set resp.http.Access-Control-Allow-Methods = "GET, POST, PUT, DELETE, PATCH, OPTIONS";
   set resp.http.Access-Control-Allow-Headers = "Authorization,Content-Type,Accept,Origin,User-Agent,DNT,Cache-Control,X-Mx-ReqToken,Keep-Alive,X-Requested-With,If-Modified-Since";
   set resp.http.Content-Length = "0";
   set resp.http.Content-Type = "text/plain charset=UTF-8";
   set resp.status = 204;
}

}

อาจมีวิธีแก้ไข (แต่ฉันไม่ได้ทดสอบ): คุณสามารถใช้ CSP (นโยบายความปลอดภัยเนื้อหา) เพื่อเปิดใช้งานโดเมนระยะไกลและเบราว์เซอร์ของคุณอาจข้ามการตรวจสอบคำขอ CORS OPTIONS

ฉันถ้าหาเวลาฉันจะทดสอบและอัปเดตโพสต์นี้!

CSP: https://developer.mozilla.org/fr/docs/Web/HTTP/Headers/Content-Security-Policy

ข้อกำหนด CSP: https://www.w3.org/TR/CSP/