อนุญาตส่วนหัว Access-Control-Allow-Origin โดยใช้ HTML5 fetch API

ฉันใช้ HTML5 fetch API

var request = new Request('https://davidwalsh.name/demo/arsenal.json');

fetch(request).then(function(response) {
    // Convert to JSON
    return response.json();
}).then(function(j) {
    // Yay, `j` is a JavaScript object
    console.log(JSON.stringify(j));
}).catch(function(error) {
    console.log('Request failed', error)
});

ฉันสามารถใช้ json ปกติ แต่ไม่สามารถดึงข้อมูลของ api url ด้านบนได้ มันแสดงข้อผิดพลาด:

ดึงข้อมูล API ไม่สามารถโหลดhttps://davidwalsh.name/demo/arsenal.json ไม่มีส่วนหัว "Access-Control-Allow-Origin" ในทรัพยากรที่ร้องขอ Origin ' http: // localhost ' จึงไม่ได้รับอนุญาตให้เข้าถึง หากการตอบกลับแบบทึบตอบสนองความต้องการของคุณให้ตั้งค่าโหมดของคำขอเป็น "no-cors" เพื่อดึงทรัพยากรโดยปิดใช้งาน CORS

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

fetch(request, {mode: 'cors'});

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

ตรวจสอบเอกสารล ธและนี่วิดีโอ Udacity น่ากลัวอธิบายเดียวกันนโยบายแหล่งกำเนิดสินค้า

คุณยังสามารถใช้โหมด no-cors ในฝั่งไคลเอ็นต์ได้ แต่สิ่งนี้จะให้การตอบสนองแบบทึบ (คุณไม่สามารถอ่านเนื้อหาได้ แต่การตอบกลับยังคงถูกแคชโดยผู้ปฏิบัติงานบริการหรือใช้โดย API บางตัวเช่น<img>) :

fetch(request, {mode: 'no-cors'})
.then(function(response) {
  console.log(response); 
}).catch(function(error) {  
  console.log('Request failed', error)  
});

ฉันมีโค้ดฟรอนต์เอนด์ที่ทำงานในhttp: // localhost: 3000และ API ของฉัน (รหัสแบ็กเอนด์) ทำงานที่ http: // localhost: 5000

กำลังใช้ fetch API เพื่อเรียก API ในขั้นต้นเป็นการส่งข้อผิดพลาด "cors" จากนั้นเพิ่มโค้ดด้านล่างนี้ในรหัส Backend API ของฉันทำให้สามารถเริ่มต้นและส่วนหัวได้จากทุกที่

let allowCrossDomain = function(req, res, next) {
  res.header('Access-Control-Allow-Origin', "*");
  res.header('Access-Control-Allow-Headers', "*");
  next();
}
app.use(allowCrossDomain);

อย่างไรก็ตามคุณควร จำกัด ต้นกำเนิดของคุณในกรณีที่อยู่ในสภาพแวดล้อมอื่น ๆ เช่น stage, prod

สิ่งนี้ใช้ได้ผลสำหรับฉัน:

npm install -g local-cors-proxy

ปลายทาง API ที่เราต้องการขอที่มีปัญหา CORS:

https://www.yourdomain.com/test/list

เริ่ม Proxy:

lcp --proxyUrl https://www.yourdomain.com

 Proxy Active 

 Proxy Url: http://www.yourdomain.com:28080
 Proxy Partial: proxy
 PORT: 8010

จากนั้นในรหัสลูกค้าของคุณปลายทาง API ใหม่:

http://localhost:8010/proxy/test/list

ผลลัพธ์สุดท้ายจะเป็นการร้องขอไปยังhttps://www.yourdomain.ie/test/listโดยไม่มีปัญหา CORS!

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

#(original) var request = new Request('https://davidwalsh.name/demo/arsenal.json');
#use IP instead
var request = new Request('https://0.0.0.0/demo/arsenal.json');

fetch(request).then(function(response) {
    // Convert to JSON
    return response.json();
}).then(function(j) {
    // Yay, `j` is a JavaScript object
    console.log(JSON.stringify(j));
}).catch(function(error) {
    console.log('Request failed', error)
});

หากคุณใช้ nginx ลองทำเช่นนี้

#Control-Allow-Origin access

    # Authorization headers aren't passed in CORS preflight (OPTIONS) calls. Always return a 200 for options.
    add_header Access-Control-Allow-Credentials "true" always;
    add_header Access-Control-Allow-Origin "https://URL-WHERE-ORIGIN-FROM-HERE " always;
    add_header Access-Control-Allow-Methods "GET,OPTIONS" always;
    add_header Access-Control-Allow-Headers "x-csrf-token,authorization,content-type,accept,origin,x-requested-with,access-control-allow-origin" always;

    if ($request_method = OPTIONS ) {
        return 200;
    }

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

headers['Access-Control-Allow-Origin'] = '*'
headers['Access-Control-Allow-Methods'] = 'POST, PUT, DELETE, GET, OPTIONS'
headers['Access-Control-Request-Method'] = '*'
headers['Access-Control-Allow-Headers'] = 'Origin, X-Requested-With, Content-Type, Accept, Authorization'

ดูที่https://expressjs.com/en/resources/middleware/cors.html คุณต้องใช้ cors

ติดตั้ง:

$ npm install cors

const cors = require('cors');
app.use(cors());

คุณต้องใส่รหัสนี้ในเซิร์ฟเวอร์โหนดของคุณ