อนุญาตคำขอ CORS REST ไปยังแอปพลิเคชัน Express / Node.js บน Heroku

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

คำขอแรกที่สร้างขึ้นโดยอัตโนมัติโดยส่วนหน้าของจาวาสคริปต์คือการ / api / search? uri = และดูเหมือนจะล้มเหลวในคำขอ OPTIONS "preflight"

ในแอปด่วนของฉันฉันกำลังเพิ่มส่วนหัว CORS โดยใช้:

var allowCrossDomain = function(req, res, next) {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
    res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization, Content-Length, X-Requested-With');

    // intercept OPTIONS method
    if ('OPTIONS' == req.method) {
      res.send(200);
    }
    else {
      next();
    }
};

และ:

app.configure(function () {
  app.use(express.bodyParser());
  app.use(express.methodOverride());
  app.use(app.router);
  app.use(allowCrossDomain);
  app.use(express.static(path.join(application_root, "public")));
  app.use(express.errorHandler({ dumpExceptions: true, showStack: true }));
});

จากคอนโซล Chrome ฉันได้รับส่วนหัวเหล่านี้:

ขอ URL: http: //furious-night-5419.herokuapp.com/api/search? uri = http% 3A% 2F% 2Flocalhost% 3A5000% 2Fcollections% 2F1% 2Fdocuments% 2F1

วิธีการขอ: OPTIONS

รหัสสถานะ: 200 ตกลง

ขอส่วนหัว

Accept:*/*
Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Access-Control-Request-Headers:origin, x-annotator-auth-token, accept
Access-Control-Request-Method:GET
Connection:keep-alive
Host:furious-night-5419.herokuapp.com
Origin:http://localhost:5000
Referer:http://localhost:5000/collections/1/documents/1
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_4) AppleWebKit/536.5 (KHTML, like Gecko) Chrome/19.0.1084.56 Safari/536.5

พารามิเตอร์สตริงการสืบค้น

uri:http://localhost:5000/collections/1/documents/1

ส่วนหัวการตอบกลับ

Allow:GET
Connection:keep-alive
Content-Length:3
Content-Type:text/html; charset=utf-8
X-Powered-By:Express

ดูเหมือนว่าแอปพลิเคชัน API จะส่งส่วนหัวที่ไม่ถูกต้องหรือไม่

ขอบคุณ.

ฉันได้ตรวจสอบรหัสของคุณในแอป ExpressJS ที่สะอาดและใช้งานได้ดี

ลองย้ายapp.use(allowCrossDomain)ไปที่ด้านบนสุดของฟังก์ชันกำหนดค่า

สำหรับการสนับสนุนคุกกี้ด้วยข้อมูลประจำตัวคุณต้องใช้บรรทัดนี้ xhr.withCredentials = true;

mdn docs xhr. withCredentials

ใน Express Server ให้เพิ่มบล็อกนี้ก่อนบล็อกอื่น ๆ

`app.all('*', function(req, res, next) {
     var origin = req.get('origin'); 
     res.header('Access-Control-Allow-Origin', origin);
     res.header("Access-Control-Allow-Headers", "X-Requested-With");
     res.header('Access-Control-Allow-Headers', 'Content-Type');
     next();
});`

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

ดังที่ @ConnorLeech ชี้ให้เห็นในความคิดเห็นของเขาต่อคำตอบที่ยอมรับข้างต้นมีแพ็คเกจ npm ที่มีประโยชน์มากเรียกว่าcorsไม่น่าแปลกใจเลย ใช้มันเป็นง่ายๆเป็นvar cors = require('cors'); app.use(cors());(อีกครั้ง cribbed จากคำตอบของนายปลิง) และนอกจากนี้ยังสามารถนำไปใช้ในที่เข้มงวดเป็นแฟชั่นที่กำหนดมากขึ้นตามที่ระบุไว้ในของพวกเขาเอกสาร

นอกจากนี้ยังอาจคุ้มค่าที่จะชี้ให้เห็นว่าความคิดเห็นดั้งเดิมที่ฉันอ้างถึงข้างต้นนั้นสร้างขึ้นในปี 2014 ตอนนี้เป็นปี 2019 และดูที่หน้า github ของแพ็คเกจ npmที่ repo ได้รับการอัปเดตเมื่อเร็ว ๆ นี้เมื่อเก้าวันที่แล้ว

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

ปรากฎว่าความลับของ JSON Web Token stringไม่ได้กำหนดไว้ในตัวแปรสภาพแวดล้อมดังนั้นจึงไม่สามารถเซ็นโทเค็นได้ สิ่งนี้เกิดจากPOSTคำขอใด ๆที่อาศัยการตรวจสอบหรือการลงนามโทเค็นเพื่อให้หมดเวลาและส่งคืน503ข้อผิดพลาดโดยแจ้งให้เบราว์เซอร์ทราบว่ามีบางอย่างผิดปกติCORSซึ่งไม่ใช่ การเพิ่มตัวแปรสภาพแวดล้อมใน Heroku ช่วยแก้ปัญหาได้

ฉันหวังว่านี่จะช่วยใครบางคนได้

ทำตามขั้นตอนด้านล่าง:

npm ติดตั้ง cors - บันทึก

ภายในไฟล์ root js ของคุณ:

 var express = require('express') 
 var cors = require('cors')
 var app = express()
 app.use(cors())