angular - ไม่มีหัวข้อ 'Access-Control-Allow-Origin' อยู่ในทรัพยากรที่ร้องขอ - แอปพลิเคชัน ionic 2
ฉันได้รับข้อผิดพลาดดังต่อไปนี้เมื่อฉันพยายามเข้าถึงเซิร์ฟเวอร์ท้องถิ่นของฉันด้วยคำขอ POST:
XMLHttpRequest ไม่สามารถโหลด http://127.0.0.1:8000/api/v1/users/login ได้ ไม่มีหัวข้อ 'Access-Control-Allow-Origin' อยู่ในทรัพยากรที่ร้องขอ ดังนั้นต้นทาง 'http://localhost:8100' จึงไม่ได้รับอนุญาตให้เข้าถึง
เซิร์ฟเวอร์ของฉันอนุญาต CORS เพราะฉันทดสอบโดยส่งคำขอด้วย Postman และมันใช้งานได้
นี่คือโค้ดของฉันในฝั่งหน้า:
private headers = new Headers({
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'GET, POST, OPTIONS, PUT, PATCH, DELETE',
'Access-Control-Allow-Headers': 'X-Requested-With,content-type',
'Access-Control-Allow-Credentials': true
});
postLogin(data) {
console.log(data);
return new Promise((resolve) => {
this.http.post(this.api + "users/login", data, {headers: this.headers})
.map(res => res.json())
.subscribe(answer => {
this.loggedIn = true;
this.token = answer.token;
resolve(answer);
});
});
}
ป.ล. ฉันไม่ได้เจอข้อผิดพลาดนี้กับคำขอแบบ GET
ฉันพยายามตั้งพร็อกซี่แล้ว แต่มันก็ไม่เปลี่ยนอะไรเลย :(
นี่คือ ionic.config.json ของฉัน:
{
"name": "hardShop",
"app_id": "",
"v2": true,
"typescript": true,
"proxies": [
{
"path": "/api",
"proxyUrl": "http://127.0.0.1:8000"
}
]
}
คำตอบ #1
ลองใช้ปลั๊กอินนี้ในเบราว์เซอร์ของคุณอีกครั้ง
มันช่วยให้คุณสามารถส่งคำขอ Ajax ไปยังที่อยู่ใดๆ จากแหล่งใดๆ ได้ โดยข้ามข้อกำหนดด้านความปลอดภัย http/https หรือข้อจำกัดอื่นๆ ที่ตั้งค่าโดยเบราว์เซอร์ (รู้จักกันในชื่อ CORS) ในทางปฏิบัติ มันจะฝังหัวข้อ 'Access-Control-Allow-Origin': '*' ในการตอบสนองที่ได้รับ ก่อนที่จะถูกส่งต่อไปยังแอปของคุณที่ทำงานในเบราว์เซอร์
โปรดจำไว้ว่านี่เป็นเพียงวิธีแก้ปัญหาเฉพาะหน้า ใช้สำหรับการพัฒนาส่วนใหญ่ การตอบกลับของ เซิร์ฟเวอร์ ของคุณจะต้องมีเฮดเดอร์ 'Access-Control-Allow-Origin': '*' จริง ๆ ซึ่งควรใช้ค่าที่เฉพาะเจาะจงมากกว่า *
สิ่งที่คุณกำลังทำอยู่ตอนนี้แทบจะไม่มีผลเลย เนื่องจาก คุณในฐานะลูกค้า กำลังส่งคำขอพร้อมหัวข้อนั้น ไปยังเซิร์ฟเวอร์ ซึ่งจากนั้นก็เพิกเฉยมันทันที สิ่งที่สำคัญคือเซิร์ฟเวอร์มีหัวข้อนี้ ในคำตอบต่อไคลเอนต์ของคุณ
เท่าที่ฉันรู้ Postman จะไม่ใช้ CORS ดังนั้นบางทีนั่นอาจเป็นเหตุผลที่มันไม่ได้รับผลกระทบ