ค้นหาเว็บไซต์

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 ดังนั้นบางทีนั่นอาจเป็นเหตุผลที่มันไม่ได้รับผลกระทบ

บทความที่เกี่ยวข้อง