ทำไมบุรุษไปรษณีย์ไม่ได้รับข้อผิดพลาด“ ไม่มีการเข้าถึง - การควบคุม - อนุญาต - กำเนิด” ในทรัพยากรที่ร้องขอ” เมื่อรหัส JavaScript ของฉันไม่ทำงาน

Mod note : คำถามนี้เกี่ยวกับสาเหตุที่บุรุษไปรษณีย์ไม่อยู่ภายใต้ข้อ จำกัด ของ CORS ในลักษณะเดียวกับ XMLHttpRequest คำถามนี้ไม่ได้เกี่ยวกับวิธีการแก้ไขข้อผิดพลาด "ไม่ 'การเข้าถึงการควบคุมการอนุญาตให้กำเนิด' ... "

กรุณาหยุดโพสต์ :

• การกำหนดค่า CORS สำหรับทุกภาษา / กรอบภายใต้ดวงอาทิตย์ แทนที่จะหา / คำถามกรอบของภาษาที่เกี่ยวข้องของคุณ
• บริการของบุคคลที่สามที่อนุญาตให้มีการร้องขอเพื่อหลีกเลี่ยง CORS
• ตัวเลือกบรรทัดคำสั่งสำหรับการปิด CORS สำหรับเบราว์เซอร์ต่างๆ

ฉันกำลังพยายามที่จะทำการอนุญาตใช้งาน JavaScriptโดยการเชื่อมต่อไปยังสงบ APIในตัวขวด อย่างไรก็ตามเมื่อฉันขอฉันได้รับข้อผิดพลาดดังต่อไปนี้:

XMLHttpRequest ไม่สามารถโหลดhttp: // myApiUrl / เข้าสู่ระบบ ไม่มีส่วนหัว 'Access-Control-Allow-Origin' บนทรัพยากรที่ร้องขอ จุดเริ่มต้น 'null' ไม่อนุญาตให้เข้าถึง

ฉันรู้ว่า API หรือทรัพยากรระยะไกลต้องตั้งค่าส่วนหัว แต่ทำไมมันทำงานเมื่อฉันทำคำขอผ่านบุรุษไปรษณีย์ส่วนขยายของ Chrome ?

นี่คือรหัสคำขอ:

$.ajax({
    type: "POST",
    dataType: 'text',
    url: api,
    username: 'user',
    password: 'pass',
    crossDomain : true,
    xhrFields: {
        withCredentials: true
    }
})
    .done(function( data ) {
        console.log("done");
    })
    .fail( function(xhr, textStatus, errorThrown) {
        alert(xhr.responseText);
        alert(textStatus);
    });

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

เมื่อคุณใช้บุรุษไปรษณีย์พวกเขาจะไม่ถูก จำกัด โดยนโยบายนี้ อ้างถึงจากXMLHttpRequest Cross-Origin :

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

คำเตือน:การใช้Access-Control-Allow-Origin: *สามารถทำให้ API / เว็บไซต์ของคุณเสี่ยงต่อการถูกโจมตีด้วยการปลอมแปลง (CSRF) ให้แน่ใจว่าคุณเข้าใจความเสี่ยงก่อนที่จะใช้รหัสนี้

มันง่ายมากที่จะแก้หากคุณกำลังใช้PHP เพียงเพิ่มสคริปต์ต่อไปนี้ในตอนต้นของหน้า PHP ซึ่งจัดการคำขอ:

<?php header('Access-Control-Allow-Origin: *'); ?>

หากคุณใช้Node-redคุณต้องอนุญาตให้CORSในnode-red/settings.jsไฟล์โดยไม่แสดงความคิดเห็นในบรรทัดต่อไปนี้:

// The following property can be used to configure cross-origin resource sharing
// in the HTTP nodes.
// See https://github.com/troygoode/node-cors#configuration-options for
// details on its contents. The following is a basic permissive set of options:
httpNodeCors: {
 origin: "*",
 methods: "GET,PUT,POST,DELETE"
},

หากคุณใช้Flaskเหมือนคำถาม คุณต้องติดตั้งก่อนflask-cors

$ pip install -U flask-cors

จากนั้นรวม Flors cors ในแอปพลิเคชันของคุณ

from flask_cors import CORS

แอปพลิเคชั่นที่เรียบง่ายจะมีลักษณะดังนี้:

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

@app.route("/")
def helloWorld():
  return "Hello, cross-origin-world!"

สำหรับรายละเอียดเพิ่มเติมคุณสามารถตรวจสอบเอกสารขวด

เนื่องจาก
$ .ajax ({type: "POST" - เรียกOPTIONS
$ .post ( - โทรPOST

ทั้งสองต่างกัน บุรุษไปรษณีย์เรียกว่า "POST" อย่างถูกต้อง แต่เมื่อเราเรียกมันว่ามันจะเป็น "OPTIONS"

สำหรับ C # web services - Web API

โปรดเพิ่มรหัสต่อไปนี้ในไฟล์web.configของคุณภายใต้แท็ก <system.webServer> สิ่งนี้จะได้ผล:

<httpProtocol>
    <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
    </customHeaders>
</httpProtocol>

โปรดตรวจสอบว่าคุณไม่ได้ทำผิดพลาดใด ๆ ในการโทร Ajax

jQuery

$.ajax({
    url: 'http://mysite.microsoft.sample.xyz.com/api/mycall',
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
    },
    type: "POST", /* or type:"GET" or type:"PUT" */
    dataType: "json",
    data: {
    },
    success: function (result) {
        console.log(result);
    },
    error: function () {
        console.log("error");
    }
});

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

System.Net.WebClient wc = new System.Net.WebClient();
string str = wc.DownloadString("http://mysite.microsoft.sample.xyz.com/api/mycall");

การใช้ข้อ จำกัด ธ เป็นคุณลักษณะการรักษาความปลอดภัยที่กำหนดโดยเซิร์ฟเวอร์และดำเนินการโดยเบราว์เซอร์

เบราว์เซอร์ดูที่นโยบาย CORS ของเซิร์ฟเวอร์และให้ความเคารพ

อย่างไรก็ตามเครื่องมือบุรุษไปรษณีย์ไม่ได้กังวลเกี่ยวกับนโยบาย CORS ของเซิร์ฟเวอร์

นั่นคือสาเหตุที่ข้อผิดพลาด CORS ปรากฏในเบราว์เซอร์ แต่ไม่ใช่ในบุรุษไปรษณีย์

ในการตรวจสอบด้านล่างว่าเป็น API ฉันใช้http://example.comแทนhttp: // myApiUrl / เข้าสู่ระบบจากคำถามของคุณเพราะอันแรกใช้ได้

ฉันคิดว่าหน้าของคุณอยู่ในhttp: //my-site.local: 8088

สาเหตุที่คุณเห็นผลลัพธ์ต่างกันคือบุรุษไปรษณีย์:

• ส่วนหัวชุดHost=example.com(API ของคุณ)
• ไม่ได้ตั้งค่าส่วนหัว Origin

นี้จะคล้ายกับวิธีที่เบราว์เซอร์ของการส่งคำขอเมื่อสถานที่และ API มีโดเมนเดียวกัน (เบราว์เซอร์ยังตั้งค่ารายการส่วนหัวReferer=http://my-site.local:8088แต่ผมไม่เห็นมันใน Postman) เมื่อไม่ได้ตั้งค่าOriginส่วนหัวโดยปกติเซิร์ฟเวอร์อนุญาตการร้องขอดังกล่าวตามค่าเริ่มต้น

วิธีนี้เป็นวิธีมาตรฐานวิธีการที่บุรุษไปรษณีย์ส่งคำขอ แต่เบราว์เซอร์ส่งคำขอแตกต่างกันเมื่อไซต์และ API ของคุณมีโดเมนที่แตกต่างกันจากนั้นCORSจะเกิดขึ้นและเบราว์เซอร์จะดำเนินการโดยอัตโนมัติ:

• ตั้งค่าส่วนหัวHost=example.com(ของคุณเป็น API)
• ชุดส่วนหัวOrigin=http://my-site.local:8088(เว็บไซต์ของคุณ)

(ส่วนหัวRefererมีค่าเหมือนกันOrigin) และตอนนี้ในแท็บคอนโซลและเครือข่ายของ Chrome คุณจะเห็น:

เมื่อคุณมีHost != Originนี้คือ ธ และเมื่อเซิร์ฟเวอร์ตรวจพบการร้องขอดังกล่าวก็มักจะบล็อกได้โดยเริ่มต้นที่

Origin=nullถูกตั้งค่าเมื่อคุณเปิดเนื้อหา HTML จากไดเรกทอรีท้องถิ่นและมันจะส่งคำขอ สถานการณ์เดียวกันคือเมื่อคุณส่งคำขอภายใน<iframe>เช่นในตัวอย่างด้านล่าง (แต่ที่นี่Hostส่วนหัวไม่ได้ตั้งค่าทั้งหมด) - โดยทั่วไปข้อมูลจำเพาะ HTML ทุกที่บอกว่าต้นกำเนิดทึบแสงคุณสามารถแปลOrigin=nullได้ ข้อมูลเพิ่มเติมเกี่ยวกับเรื่องนี้คุณสามารถหาได้ที่นี่

fetch('http://example.com/api', {method: 'POST'});

Look on chrome-console > network tab

หากคุณไม่ได้ใช้ง่ายล ธ ขอมักเบราว์เซอร์โดยอัตโนมัตินอกจากนี้ยังส่ง OPTIONS ขอก่อนที่จะส่งคำขอหลัก - ข้อมูลเพิ่มเติมที่นี่ ตัวอย่างด้านล่างแสดง:

fetch('http://example.com/api', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json'}
});

Look in chrome-console -> network tab to 'api' request.
This is the OPTIONS request (the server does not allow sending a POST request)

คุณสามารถเปลี่ยนการกำหนดค่าเซิร์ฟเวอร์ของคุณเพื่อให้การร้องขอ CORS

นี่คือการกำหนดค่าตัวอย่างซึ่งเปิดCORS บน nginx (ไฟล์ nginx.conf) - ระวังให้มากด้วยการตั้งค่าalways/"$http_origin"สำหรับ nginx และ"*"Apache - นี่จะเป็นการปิดกั้น CORS จากโดเมนใด ๆ

location ~ ^/index\.php(/|$) {
   ...
    add_header 'Access-Control-Allow-Origin' "$http_origin" always;
    add_header 'Access-Control-Allow-Credentials' 'true' always;
    if ($request_method = OPTIONS) {
        add_header 'Access-Control-Allow-Origin' "$http_origin"; # DO NOT remove THIS LINES (doubled with outside 'if' above)
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Max-Age' 1728000; # cache preflight value for 20 days
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'My-First-Header,My-Second-Header,Authorization,Content-Type,Accept,Origin';
        add_header 'Content-Length' 0;
        add_header 'Content-Type' 'text/plain charset=UTF-8';
        return 204;
    }
}

นี่คือการกำหนดค่าตัวอย่างซึ่งเปิดCORS บน Apache (ไฟล์. htaccess)

# ------------------------------------------------------------------------------
# | Cross-domain Ajax requests                                                 |
# ------------------------------------------------------------------------------

# Enable cross-origin Ajax requests.
# http://code.google.com/p/html5security/wiki/CrossOriginRequestSecurity
# http://enable-cors.org/

# <IfModule mod_headers.c>
#    Header set Access-Control-Allow-Origin "*"
# </IfModule>

# Header set Header set Access-Control-Allow-Origin "*"
# Header always set Access-Control-Allow-Credentials "true"

Access-Control-Allow-Origin "http://your-page.com:80"
Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
Header always set Access-Control-Allow-Headers "My-First-Header,My-Second-Header,Authorization, content-type, csrf-token"

พบข้อผิดพลาดเดียวกันในกรณีการใช้งานที่แตกต่างกัน

ใช้ตัวพิมพ์:ในโครเมี่ยมเมื่อพยายามเรียกจุดสิ้นสุดSpring REST เป็นมุม

โซลูชัน:เพิ่มคำอธิบายประกอบ@CrossOrigin ("*")ที่ด้านบนของคลาสตัวควบคุมที่เกี่ยวข้อง

หากคุณใช้. NET เป็นชั้นกลางให้ตรวจสอบแอตทริบิวต์เส้นทางอย่างชัดเจนตัวอย่างเช่น

ฉันมีปัญหาเมื่อมันเป็นเช่นนี้

[Route("something/{somethingLong: long}")] //Space.

แก้ไขโดยสิ่งนี้

[Route("something/{somethingLong:long}")] //No space

สำหรับโครงการ. NET Core Web API เท่านั้นให้เพิ่มการเปลี่ยนแปลงต่อไปนี้:

1. เพิ่มรหัสต่อไปนี้หลังจากservices.AddMvc()บรรทัดในConfigureServices()วิธีการของไฟล์ Startup.cs:

services.AddCors(allowsites=>{allowsites.AddPolicy("AllowOrigin", options => options.AllowAnyOrigin());
            });

2. เพิ่มรหัสต่อไปนี้หลังจากapp.UseMvc()บรรทัดในConfigure()วิธีการของไฟล์ Startup.cs:

app.UseCors(options => options.AllowAnyOrigin());

3. เปิดคอนโทรลเลอร์ที่คุณต้องการเข้าถึงภายนอกโดเมนและเพิ่มแอ็ตทริบิวต์ต่อไปนี้ที่ระดับคอนโทรลเลอร์:

[EnableCors("AllowOrigin")]