ไม่มีส่วนหัว 'Access-Control-Allow-Origin' ในทรัพยากรที่ร้องขอ - เมื่อพยายามรับข้อมูลจาก REST API

ฉันพยายามดึงข้อมูลจาก REST API ของ HP Alm มันทำงานได้ค่อนข้างดีด้วยสคริปต์ม้วนเล็ก ๆ - ฉันได้รับข้อมูลของฉัน

ตอนนี้การทำเช่นนั้นกับ JavaScript, การดึงข้อมูลและ ES6 (มากกว่าหรือน้อยกว่า) ดูเหมือนจะเป็นปัญหาที่ใหญ่กว่า ฉันได้รับข้อความแสดงข้อผิดพลาดนี้:

Fetch API ไม่สามารถโหลดได้ การตอบสนองต่อคำขอ preflight ไม่ผ่านการตรวจสอบการควบคุมการเข้าถึง: ไม่มีส่วนหัว 'Access-Control-Allow-Origin' บนทรัพยากรที่ร้องขอ แหล่งกำเนิด ' http://127.0.0.1:3000 ' จึงไม่ได้รับอนุญาตให้เข้าถึง การตอบกลับมีรหัสสถานะ HTTP 501 หากการตอบกลับทึบแสงตอบสนองความต้องการของคุณให้ตั้งค่าโหมดคำขอเป็น 'ไม่คอร์' เพื่อดึงข้อมูลทรัพยากรโดยปิดการใช้งาน CORS

ฉันเข้าใจว่าเป็นเพราะฉันพยายามดึงข้อมูลจากภายในเครื่องของฉันและวิธีแก้ปัญหาควรใช้ CORS ตอนนี้ฉันคิดว่าฉันทำอย่างนั้นจริง แต่อย่างใดมันไม่สนใจสิ่งที่ฉันเขียนในส่วนหัวหรือปัญหาเป็นอย่างอื่น?

ดังนั้นจะมีปัญหาการใช้งานหรือไม่ ฉันทำผิดหรือเปล่า? ฉันไม่สามารถตรวจสอบบันทึกเซิร์ฟเวอร์ได้ ฉันติดอยู่ตรงนี้จริงๆ

function performSignIn() {

  let headers = new Headers();

  headers.append('Content-Type', 'application/json');
  headers.append('Accept', 'application/json');

  headers.append('Access-Control-Allow-Origin', 'http://localhost:3000');
  headers.append('Access-Control-Allow-Credentials', 'true');

  headers.append('GET', 'POST', 'OPTIONS');

  headers.append('Authorization', 'Basic ' + base64.encode(username + ":" + password));

  fetch(sign_in, {
      //mode: 'no-cors',
      credentials: 'include',
      method: 'POST',
      headers: headers
    })
    .then(response => response.json())
    .then(json => console.log(json))
    .catch(error => console.log('Authorization failed : ' + error.message));
}

ฉันกำลังใช้ Chrome ฉันยังลองใช้ปลั๊กอิน Chrome CORS นั้น แต่จากนั้นฉันได้รับข้อความแสดงข้อผิดพลาด:

ค่าของส่วนหัว 'Access-Control-Allow-Origin' ในการตอบกลับจะต้องไม่ใช่สัญลักษณ์แทน '*' เมื่อโหมดข้อมูลรับรองของคำขอคือ 'รวม' Origin ' http://127.0.0.1:3000 ' จึงไม่ได้รับอนุญาตให้เข้าถึง โหมดหนังสือรับรองของคำร้องขอที่เริ่มต้นโดย XMLHttpRequest ถูกควบคุมโดยแอ็ตทริบิวต์ withCredentials

คำตอบนี้ครอบคลุมพื้นดินจำนวนมากดังนั้นจึงแบ่งออกเป็นสามส่วน:

• วิธีการใช้พร็อกซี CORS เพื่อแก้ไขปัญหา“ ไม่มีการเข้าถึงการควบคุมอนุญาตส่วนหัว”
• วิธีหลีกเลี่ยง CORS preflight
• วิธีการแก้ไขปัญหา“ การเข้าถึงการควบคุมอนุญาตให้กำเนิดต้องไม่ใช่ปัญหาของสัญลักษณ์แทน”

วิธีการใช้พร็อกซี CORS เพื่อแก้ไขปัญหา“ ไม่มีการเข้าถึงการควบคุมอนุญาตส่วนหัว”

หากคุณไม่ได้ควบคุมเซิร์ฟเวอร์โค้ด JavaScript ส่วนหน้าของคุณกำลังส่งคำขอไปและปัญหาเกี่ยวกับการตอบสนองจากเซิร์ฟเวอร์นั้นเป็นเพียงแค่การขาดAccess-Control-Allow-Originส่วนหัวที่จำเป็นคุณยังสามารถทำงานได้โดยการขอผ่านทาง พร็อกซี CORS เพื่อแสดงวิธีการทำงานขั้นแรกนี่คือโค้ดบางส่วนที่ไม่ได้ใช้พร็อกซี CORS:

const url = "https://example.com"; // site that doesn’t send Access-Control-*
fetch(url)
.then(response => response.text())
.then(contents => console.log(contents))
.catch(() => console.log("Can’t access " + url + " response. Blocked by browser?"))

เหตุผลที่บล็อกได้รับการตีมีป้องกันเบราว์เซอร์ที่รหัสจากการเข้าถึงการตอบสนองที่กลับมาจากcatch https://example.comและสาเหตุที่เบราว์เซอร์ทำนั่นคือการตอบสนองขาดAccess-Control-Allow-Originส่วนหัวการตอบสนอง

ตอนนี้นี่เป็นตัวอย่างเดียวกัน แต่เพิ่มพร็อกซี CORS ใน:

const proxyurl = "https://cors-anywhere.herokuapp.com/";
const url = "https://example.com"; // site that doesn’t send Access-Control-*
fetch(proxyurl + url) // https://cors-anywhere.herokuapp.com/https://example.com
.then(response => response.text())
.then(contents => console.log(contents))
.catch(() => console.log("Can’t access " + url + " response. Blocked by browser?"))

หมายเหตุ: หาก https://cors-anywhere.herokuapp.com ไม่ทำงานหรือไม่พร้อมใช้งานเมื่อคุณลองใช้ดูวิธีการปรับใช้เซิร์ฟเวอร์ CORS Anywhere ของคุณเองที่ Heroku ในเวลาเพียง 2-3 นาที

รหัสสองตัวอย่างข้างต้นสามารถเข้าถึงการตอบสนองที่ประสบความสำเร็จเพราะการ URL ที่ร้องขอและเปลี่ยนไปhttps://cors-anywhere.herokuapp.com/https://example.com -by เพียง prefixing ด้วยพร็อกซี URL ของสาเหตุที่ทำให้ ขอให้ทำผ่านพร็อกซี่นั้นซึ่ง:

1. https://example.comส่งต่อการร้องขอไปยัง
2. https://example.comได้รับการตอบสนองจาก
3. เพิ่มAccess-Control-Allow-Originส่วนหัวในการตอบกลับ
4. ผ่านการตอบกลับนั้นโดยมีส่วนหัวที่เพิ่มกลับไปยังรหัสส่วนหน้าที่ร้องขอ

เบราว์เซอร์อนุญาตให้โค้ดส่วนหน้าสามารถเข้าถึงการตอบสนองได้เนื่องจากการตอบสนองที่มีAccess-Control-Allow-Originส่วนหัวการตอบสนองคือสิ่งที่เบราว์เซอร์เห็น

คุณสามารถเรียกใช้พร็อกซี่ของคุณเองโดยใช้รหัสได้อย่างง่ายดายจากhttps://github.com/Rob--W/cors-anywhere/
คุณสามารถปรับใช้พร็อกซีของคุณเองกับ Heroku ได้อย่างง่ายดายในเวลาเพียง 2-3 นาทีโดยมี 5 คำสั่ง:

git clone https://github.com/Rob--W/cors-anywhere.git
cd cors-anywhere/
npm install
heroku create
git push heroku master

หลังจากใช้คำสั่งเหล่านั้นคุณจะจบลงด้วยเซิร์ฟเวอร์ล ธ ทุกที่ของคุณเองทำงานที่เช่นhttps://cryptic-headland-94862.herokuapp.com/ ดังนั้นแทนที่จะนำหน้า URL คำขอของคุณด้วยhttps://cors-anywhere.herokuapp.comนำหน้าแทนด้วย URL สำหรับอินสแตนซ์ของคุณเอง เช่นhttps://cryptic-headland-94862.herokuapp.com/https://example.com

ดังนั้นหากคุณลองใช้ https://cors-anywhere.herokuapp.com คุณจะพบว่ามันไม่ทำงาน (ซึ่งบางครั้งมันจะเป็น) ให้พิจารณารับบัญชี Heroku (ถ้าคุณยังไม่ได้) และใช้เวลา 2 หรือ 3 นาทีเพื่อทำตามขั้นตอนด้านบนเพื่อปรับใช้เซิร์ฟเวอร์ CORS Anywhere ของคุณเองใน Heroku

ไม่ว่าคุณจะเรียกใช้ของคุณเองหรือใช้https://cors-anywhere.herokuapp.comหรือเปิดพร็อกซีอื่น ๆ โซลูชันนี้จะทำงานแม้ว่าคำขอจะเป็นตัวกระตุ้นให้เบราว์เซอร์ทำการOPTIONSร้องขอCORS preflight— เพราะในกรณีนั้น พร็อกซียังส่งกลับAccess-Control-Allow-HeadersและAccess-Control-Allow-Methodsส่วนหัวที่จำเป็นเพื่อให้ preflight ประสบความสำเร็จ

วิธีหลีกเลี่ยง CORS preflight

รหัสในคำถามทริกเกอร์ CORS preflight— เนื่องจากส่งAuthorizationส่วนหัว

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Preflighted_requests

แม้ว่าจะไม่มีContent-Type: application/jsonส่วนหัวก็ตามก็จะทำให้เกิด preflight

ความหมาย“ preflight” หมายถึง: ก่อนที่เบราว์เซอร์จะพยายามPOSTในรหัสในคำถามก่อนอื่นมันจะส่งOPTIONSคำขอไปยังเซิร์ฟเวอร์ - เพื่อตรวจสอบว่าเซิร์ฟเวอร์เลือกที่จะรับ cross-origin POSTซึ่งรวมถึงส่วนหัวAuthorizationและContent-Type: application/json

มันทำงานได้ค่อนข้างดีด้วยสคริปต์ม้วนเล็ก ๆ - ฉันได้รับข้อมูลของฉัน

ในการทดสอบอย่างถูกต้องcurlคุณต้องเลียนแบบOPTIONSคำขอpreflight ที่เบราว์เซอร์ส่ง:

curl -i -X OPTIONS -H "Origin: http://127.0.0.1:3000" \
    -H 'Access-Control-Request-Method: POST' \
    -H 'Access-Control-Request-Headers: Content-Type, Authorization' \
    "https://the.sign_in.url"

… https://the.sign_in.urlแทนที่ด้วยsign_inURL ที่แท้จริงของคุณ

การตอบกลับที่เบราว์เซอร์จำเป็นต้องดูจากOPTIONSคำขอนั้นต้องมีส่วนหัวดังนี้:

Access-Control-Allow-Origin:  http://127.0.0.1:3000
Access-Control-Allow-Methods: POST
Access-Control-Allow-Headers: Content-Type, Authorization

หากการOPTIONSตอบสนองไม่รวมส่วนหัวเหล่านั้นเบราว์เซอร์จะหยุดอยู่ตรงนั้นและไม่เคยพยายามส่งPOSTคำขอ นอกจากนี้รหัสสถานะ HTTP สำหรับการตอบสนองจะต้องเป็น 2xx โดยทั่วไปคือ 200 หรือ 204 หากเป็นรหัสสถานะอื่น ๆ เบราว์เซอร์จะหยุดอยู่ที่นั่น

เซิร์ฟเวอร์ในคำถามกำลังตอบกลับOPTIONSคำขอด้วยรหัสสถานะ 501 ซึ่งเห็นได้ชัดว่าหมายความว่าพยายามระบุว่าไม่ได้ใช้การสนับสนุนOPTIONSคำขอ เซิร์ฟเวอร์อื่นมักตอบกลับด้วยรหัสสถานะ 405“ วิธีที่ไม่อนุญาต” ในกรณีนี้

ดังนั้นคุณจะไม่สามารถPOSTส่งคำขอไปยังเซิร์ฟเวอร์นั้นโดยตรงจากโค้ด JavaScript ส่วนหน้าของคุณหากเซิร์ฟเวอร์ตอบสนองOPTIONSคำขอนั้นด้วย 405 หรือ 501 หรือสิ่งอื่นใดนอกเหนือจาก 200 หรือ 204 หรือหากไม่ตอบสนองต่อสิ่งที่จำเป็น ส่วนหัวการตอบสนอง

วิธีที่จะหลีกเลี่ยงการเรียก preflight สำหรับกรณีในคำถามจะเป็น:

• หากเซิร์ฟเวอร์ไม่ต้องการAuthorizationส่วนหัวคำขอ แต่ให้แทนที่ (ตัวอย่าง) อาศัยข้อมูลการตรวจสอบความถูกต้องที่ฝังอยู่ในเนื้อความของPOSTคำขอหรือเป็นพารามิเตอร์การสืบค้น
• ถ้าเซิร์ฟเวอร์ไม่ต้องการให้POSTเนื้อความมีContent-Type: application/jsonชนิดสื่อบันทึก แต่ยอมรับPOSTเนื้อความเช่นเดียวapplication/x-www-form-urlencodedกับพารามิเตอร์ที่ชื่อjson(หรืออะไรก็ตาม) ที่มีค่าเป็นข้อมูล JSON

วิธีการแก้ไขปัญหา“ การเข้าถึงการควบคุมอนุญาตให้กำเนิดต้องไม่ใช่ปัญหาของสัญลักษณ์แทน”

ฉันได้รับข้อความแสดงข้อผิดพลาดอื่น:

ค่าของส่วนหัว 'Access-Control-Allow-Origin' ในการตอบกลับจะต้องไม่ใช่สัญลักษณ์แทน '*' เมื่อโหมดข้อมูลรับรองของคำขอคือ 'รวม' Origin ' http://127.0.0.1:3000 ' จึงไม่ได้รับอนุญาตให้เข้าถึง โหมดหนังสือรับรองของคำร้องขอที่เริ่มต้นโดย XMLHttpRequest ถูกควบคุมโดยแอ็ตทริบิวต์ withCredentials

สำหรับคำขอที่มีข้อมูลประจำตัวที่เบราว์เซอร์จะไม่ยอมให้การเข้าถึงรหัส JavaScript ส่วนหน้าของคุณตอบสนองถ้าค่าของส่วนหัวของการตอบสนองAccess-Control-Allow-Origin แทนค่าในกรณีที่ต้องตรงกับต้นกำเนิดรหัสส่วนหน้าของคุณ*http://127.0.0.1:3000

ดูคำร้องขอและสัญลักษณ์แทนในบทความ MDN HTTP access control (CORS)

หากคุณควบคุมเซิร์ฟเวอร์ที่คุณกำลังส่งคำขอไปดังนั้นวิธีทั่วไปในการจัดการกับกรณีนี้คือการกำหนดค่าเซิร์ฟเวอร์ให้ใช้ค่าของOriginส่วนหัวคำขอและ echo / สะท้อนกลับเข้าไปในค่าของAccess-Control-Allow-Originส่วนหัวการตอบกลับ ตัวอย่างเช่นกับ nginx:

add_header Access-Control-Allow-Origin $http_origin

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

ฉันกำลังใช้ Chrome ฉันลองใช้ปลั๊กอิน Chrome CORS ด้วย

ปลั๊กอิน Chrome CORS นั้นเห็นได้ชัดว่าเพียงแค่แทรกAccess-Control-Allow-Origin: *ส่วนหัวลงในการตอบสนองที่เบราว์เซอร์เห็น หากปลั๊กอินได้อย่างชาญฉลาดในสิ่งที่มันจะทำคือการตั้งค่าของปลอมว่าAccess-Control-Allow-Originส่วนหัวของการตอบสนองต่อการกำเนิดที่แท้จริงของโค้ด JavaScript http://127.0.0.1:3000ส่วนหน้าของคุณ

ดังนั้นควรหลีกเลี่ยงการใช้ปลั๊กอินนั้นแม้แต่ในการทดสอบ มันเป็นเพียงความว้าวุ่นใจ หากคุณต้องการทดสอบการตอบสนองที่คุณได้รับจากเซิร์ฟเวอร์โดยที่ไม่มีเบราว์เซอร์กรองคุณควรใช้curl -Hตามที่กล่าวไว้ข้างต้น

เท่าที่รหัส JavaScript frontend สำหรับfetch(…)คำขอในคำถาม:

headers.append('Access-Control-Allow-Origin', 'http://localhost:3000');
headers.append('Access-Control-Allow-Credentials', 'true');

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

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

หากคุณกำลังโฮสติ้งบริการฤดูใบไม้ผลิ REST แล้วคุณสามารถหาได้ในบล็อกโพสต์สนับสนุน ธ ในฤดูใบไม้ผลิกรอบ

หากคุณกำลังโฮสต์บริการโดยใช้เซิร์ฟเวอร์ Node.js

1. หยุดเซิร์ฟเวอร์ Node.js
2. npm install cors --save

3. เพิ่มบรรทัดต่อไปนี้ใน server.js ของคุณ

   var cors = require('cors')
   
   app.use(cors()) // Use this after the variable declaration

ปัญหาเกิดขึ้นเนื่องจากคุณเพิ่มรหัสต่อไปนี้เป็นส่วนหัวคำขอในส่วนหน้าของคุณ:

headers.append('Access-Control-Allow-Origin', 'http://localhost:3000');
headers.append('Access-Control-Allow-Credentials', 'true');

ส่วนหัวเหล่านั้นเป็นของการตอบสนองไม่ขอ ดังนั้นลบพวกเขารวมถึงบรรทัด:

headers.append('GET', 'POST', 'OPTIONS');

คำขอของคุณมี 'ประเภทเนื้อหา: แอปพลิเคชัน / json' ดังนั้นจึงเรียกสิ่งที่เรียกว่า CORS preflight สิ่งนี้ทำให้เบราว์เซอร์ส่งการร้องขอด้วยวิธี OPTIONS ดูCORS preflightสำหรับข้อมูลรายละเอียด
ดังนั้นในback-end ของคุณคุณต้องจัดการคำขอ preflighted นี้โดยส่งกลับส่วนหัวการตอบสนองซึ่งรวมถึง:

Access-Control-Allow-Origin : http://localhost:3000
Access-Control-Allow-Credentials : true
Access-Control-Allow-Methods : GET, POST, OPTIONS
Access-Control-Allow-Headers : Origin, Content-Type, Accept

แน่นอนว่าไวยากรณ์ที่แท้จริงนั้นขึ้นอยู่กับภาษาการเขียนโปรแกรมที่คุณใช้สำหรับแบ็คเอนด์

ในส่วนหน้าของคุณมันควรจะเป็นเช่นนั้น:

function performSignIn() {
    let headers = new Headers();

    headers.append('Content-Type', 'application/json');
    headers.append('Accept', 'application/json');
    headers.append('Authorization', 'Basic ' + base64.encode(username + ":" +  password));
    headers.append('Origin','http://localhost:3000');

    fetch(sign_in, {
        mode: 'cors',
        credentials: 'include',
        method: 'POST',
        headers: headers
    })
    .then(response => response.json())
    .then(json => console.log(json))
    .catch(error => console.log('Authorization failed : ' + error.message));
}

ในกรณีของฉันฉันใช้วิธีแก้ปัญหาด้านล่าง

Front-end หรือ Angular

post(
    this.serverUrl, dataObjToPost,
    {
      headers: new HttpHeaders({
           'Content-Type':  'application/json',
         })
    }
)

back-end (ฉันใช้ PHP)

header("Access-Control-Allow-Origin: http://localhost:4200");
header('Access-Control-Allow-Methods: GET, POST, OPTIONS');
header("Access-Control-Allow-Headers: Content-Type, Authorization");

$postdata = file_get_contents("php://input");
$request = json_decode($postdata);
print_r($request);

เพียงแค่สองเซ็นต์ของฉัน ... เกี่ยวกับวิธีใช้พร็อกซี CORS เพื่อAccess-Control-Allow-Originแก้ไขปัญหา“ ไม่มีส่วนหัว”

สำหรับผู้ที่คุณทำงานกับ PHP ที่แบ็กเอนด์การปรับใช้ "CORS proxy" นั้นง่ายเหมือน:

1. สร้างไฟล์ชื่อ 'no-cors.php' ด้วยเนื้อหาต่อไปนี้:

   $URL = $_GET['url']; echo json_encode(file_get_contents($URL)); die();

2. ที่ส่วนหน้าของคุณทำสิ่งที่ชอบ:

   fetch('https://example.com/no-cors.php' + '?url=' + url) .then(response=>{*/Handle Response/*})

ลบสิ่งนี้:

credentials: 'include',

การใช้ dataType: 'jsonp'งานได้สำหรับฉัน

   async function get_ajax_data(){
       var _reprojected_lat_lng = await $.ajax({
                                type: 'GET',
                                dataType: 'jsonp',
                                data: {},
                                url: _reprojection_url,
                                error: function (jqXHR, textStatus, errorThrown) {
                                    console.log(jqXHR)
                                },
                                success: function (data) {
                                    console.log(data);

                                    // note: data is already json type, you
                                    //       just specify dataType: jsonp
                                    return data;
                                }
                            });


 } // function               

ในกรณีของฉันเว็บเซิร์ฟเวอร์ป้องกันเมธอด "OPTIONS"

ตรวจสอบเว็บเซิร์ฟเวอร์ของคุณสำหรับวิธีการตัวเลือก

• apache: https://www-01.ibm.com/support/docview.wss?uid=ibm10735209
• webtier: 4.4.6 ปิดใช้งานวิธีตัวเลือกhttps://docs.oracle.com/cd/E23943_01/web.1111/e10144/getstart.htm#HSADM174
• nginx: https://medium.com/@hariomvashisth/cors-on-nginx-be38dd0e19df

ฉันใช้ "webtier"

/www/webtier/domains/[domainname]/config/fmwconfig/components/OHS/VCWeb1/httpd.conf

<IfModule mod_rewrite.c>
  RewriteEngine on
  RewriteCond %{REQUEST_METHOD} ^OPTIONS
  RewriteRule .* . [F]
</IfModule>

เปลี่ยนไป

<IfModule mod_rewrite.c>
  RewriteEngine off
  RewriteCond %{REQUEST_METHOD} ^OPTIONS
  RewriteRule .* . [F]
</IfModule>

ฉันทำงานกับ Spring REST และฉันแก้ไขมันด้วยการเพิ่ม AllowedMethods ลงใน WebMvcConfigurer

@Value( "${app.allow.origins}" )
    private String allowOrigins;    
@Bean
public WebMvcConfigurer corsConfigurer() {
            System.out.println("allow origin: "+allowOrigins);
            return new WebMvcConfigurerAdapter() {
                @Override
                public void addCorsMappings(CorsRegistry registry) {
                    registry.addMapping("/**")
                    //.allowedOrigins("http://localhost")
                    .allowedOrigins(allowOrigins)
                    .allowedMethods("PUT", "DELETE","GET", "POST");
                }
            };
        }

ฉันได้รับข้อผิดพลาดนี้ในพื้นที่ของฉัน ฉันใช้ Visual Studio ในฐานะผู้ดูแลระบบและแก้ไขได้