การตอบสนองต่อคำขอ preflight ไม่ผ่านการตรวจสอบการควบคุมการเข้าถึง

ฉันได้รับข้อผิดพลาดนี้โดยใช้ ngResource โทรหา REST API บน Amazon Web Services:

XMLHttpRequest ไม่สามารถโหลด http://server.apiurl.com:8000/s/login?login=facebook การตอบสนองต่อคำขอ preflight ไม่ผ่านการตรวจสอบการควบคุมการเข้าถึง: ไม่มีส่วนหัว 'Access-Control-Allow-Origin' บนทรัพยากรที่ร้องขอ แหล่งกำเนิด ' http: // localhost ' จึงไม่ได้รับอนุญาตให้เข้าถึง ข้อผิดพลาด 405

บริการ:

socialMarkt.factory('loginService', ['$resource', function($resource){    
    var apiAddress = "http://server.apiurl.com:8000/s/login/";
    return $resource(apiAddress, { login:"facebook", access_token: "@access_token" ,facebook_id: "@facebook_id" }, {
                getUser: {method:'POST'}
            });
}]);

ควบคุม:

[...]
loginService.getUser(JSON.stringify(fbObj)),
                function(data){
                    console.log(data);
                },
                function(result) {
                    console.error('Error', result.status);
                }
[...]

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

คุณกำลังประสบปัญหา CORS

มีหลายวิธีในการแก้ไข / แก้ไขปัญหานี้

1. ปิด CORS ตัวอย่างเช่นวิธีปิด cors ใน chrome
2. ใช้ปลั๊กอินสำหรับเบราว์เซอร์ของคุณ
3. ใช้พร็อกซีเช่น nginx ตัวอย่างของวิธีการตั้งค่า
4. ทำตามการตั้งค่าที่จำเป็นสำหรับเซิร์ฟเวอร์ของคุณ นี่เป็นอีกปัจจัยหนึ่งของเว็บเซิร์ฟเวอร์ที่คุณโหลดบนอินสแตนซ์ EC2 ของคุณ (สมมติว่านี่คือสิ่งที่คุณหมายถึงโดย "บริการเว็บของ Amazon") สำหรับเซิร์ฟเวอร์เฉพาะของคุณคุณสามารถอ้างถึงเว็บไซต์เปิดใช้งาน CORS

คุณกำลังพยายามเข้าถึง api.serverurl.com จาก localhost นี่คือคำจำกัดความที่แน่นอนของคำขอข้ามโดเมน

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

ดังนั้น api.serverurl.com อาจกลายเป็น localhost: 8000 / api และ nginx ในพื้นที่ของคุณหรือพร็อกซีอื่นจะส่งไปยังปลายทางที่ถูกต้อง

ตอนนี้ตามความต้องการที่เป็นที่นิยมข้อมูล CORS มากขึ้น 100% .... รสชาติเยี่ยมเหมือนกัน!

และสำหรับ downvoters .... การผ่าน CORS เป็นสิ่งที่แสดงให้เห็นสำหรับผู้ที่เรียนรู้ส่วนหน้า https://codecraft.tv/courses/angular/http/http-with-promises/

"API เซิร์ฟเวอร์" ของฉันเป็นแอปพลิเคชั่น PHP ดังนั้นเพื่อแก้ปัญหานี้ฉันพบวิธีแก้ไขด้านล่างในการทำงาน:

วางบรรทัดในindex.php

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS');
header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token');

ใน AspNetCore web api ปัญหานี้ได้รับการแก้ไขโดยการเพิ่ม "Microsoft.AspNetCore.Cors" (เวอร์ชั่น 1.1.1) และเพิ่มการเปลี่ยนแปลงด้านล่างใน Startup.cs

public void ConfigureServices(IServiceCollection services)
{ 
    services.AddCors(options =>
    {
          options.AddPolicy("AllowAllHeaders",
                builder =>
            {
                    builder.AllowAnyOrigin()
                           .AllowAnyHeader()
                           .AllowAnyMethod();
                });
    });
    .
    .
    .
}

และ

public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
{


    // Shows UseCors with named policy.
    app.UseCors("AllowAllHeaders");
    .
    .
    .
}

และวาง[EnableCors("AllowAllHeaders")]บนคอนโทรลเลอร์

มีข้อแม้บางอย่างเมื่อพูดถึง CORS ครั้งแรกมันไม่อนุญาตให้ใช้สัญลักษณ์แทน*แต่อย่าจับฉันในที่นี้ฉันได้อ่านที่ใดที่หนึ่งและฉันไม่สามารถหาบทความได้ในขณะนี้

หากคุณกำลังร้องขอจากโดเมนอื่นคุณต้องเพิ่มส่วนหัวอนุญาตที่มา

 Access-Control-Allow-Origin: www.other.com 

ถ้าคุณกำลังทำคำขอที่ส่งผลกระทบต่อทรัพยากรของเซิร์ฟเวอร์ต้องการโพสต์ / นำ / PATCH และถ้าชนิด mime ที่แตกต่างต่อไปapplication/x-www-form-urlencoded, multipart/form-dataหรือtext/plainเบราว์เซอร์โดยอัตโนมัติจะทำให้ตัวเลือกก่อนการบินขอให้ตรวจสอบกับเซิร์ฟเวอร์ถ้ามันจะช่วยให้มัน .

ดังนั้น API / เซิร์ฟเวอร์ของคุณต้องการที่จะจัดการการร้องขอตัวเลือกเหล่านี้ตามที่คุณจำเป็นต้องตอบสนองกับความเหมาะสมaccess control headersและความต้องการการตอบสนอง http 200รหัสสถานะที่จะเป็น

ส่วนหัวควรเป็นอะไรเช่นนี้ปรับความต้องการของคุณ:

   Access-Control-Allow-Methods: GET, POST, PUT, PATCH, POST, DELETE, OPTIONS
   Access-Control-Allow-Headers: Content-Type
   Access-Control-Max-Age: 86400

ส่วนหัวอายุสูงสุดมีความสำคัญในกรณีของฉันมันจะไม่ทำงานหากไม่มีฉันเดาว่าเบราว์เซอร์ต้องการข้อมูลสำหรับระยะเวลาที่สิทธิ์การเข้าถึง "ถูกต้อง"

นอกจากนี้หากคุณทำเช่นPOSTคำขอที่มีapplication/jsonmime จากโดเมนอื่นคุณต้องเพิ่มส่วนหัวอนุญาตที่กล่าวถึงก่อนหน้านี้ดังนั้นมันจะมีลักษณะเช่นนี้:

   Access-Control-Allow-Origin: www.other.com 
   Access-Control-Allow-Methods: GET, POST, PUT, PATCH, POST, DELETE, OPTIONS
   Access-Control-Allow-Headers: Content-Type
   Access-Control-Max-Age: 86400

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

โดยทั่วไปการพูดสิ่งใดก็ตามที่Access-Controlมีการร้องขอส่วนหัวในคำขอเริ่มต้นหรือก่อนเที่ยวบินควรได้รับการตอบสนองเพื่อให้มันสามารถทำงานได้

มีตัวอย่างที่ดีในเอกสาร MDN ที่นี่ในลิงค์นี้และคุณควรตรวจสอบโพสต์ SO นี้

JavaScript XMLHttpRequestและดึงข้อมูลทำตามนโยบายแหล่งกำเนิดเดียวกัน ดังนั้นเว็บแอปพลิเคชันที่ใช้ XMLHttpRequest หรือ Fetch สามารถส่งคำขอ HTTP ไปยังโดเมนของตัวเองได้เท่านั้น

ที่มา: https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

คุณต้องส่งAccess-Control-Allow-Origin: *ส่วนหัว HTTP จากฝั่งเซิร์ฟเวอร์ของคุณ

หากคุณใช้ Apache เป็นเซิร์ฟเวอร์ HTTP ของคุณคุณสามารถเพิ่มลงในไฟล์กำหนดค่า Apache ดังนี้:

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
</IfModule>

Mod_headers ถูกเปิดใช้งานโดยค่าเริ่มต้นใน Apache อย่างไรก็ตามคุณอาจต้องการตรวจสอบให้แน่ใจว่าได้เปิดใช้งานโดยเรียกใช้:

 a2enmod headers

หากคุณกำลังเขียนส่วนขยายของโครเมี่ยม

คุณต้องเพิ่มmanifest.jsonการอนุญาตสำหรับโดเมนของคุณ

"permissions": [
   "http://example.com/*",
   "https://example.com/*"
]

หากคุณใช้เซิร์ฟเวอร์ IIS โดยบังเอิญ คุณสามารถตั้งค่าด้านล่างส่วนหัวในตัวเลือกคำขอส่วนหัว HTTP

Access-Control-Allow-Origin:*
Access-Control-Allow-Methods: 'HEAD, GET, POST, PUT, PATCH, DELETE'
Access-Control-Allow-Headers: 'Origin, Content-Type, X-Auth-Token';

ด้วยโพสต์ทั้งหมดนี้รับ ฯลฯ จะทำงานได้ดี

สำหรับเซิร์ฟเวอร์ขวดหลามคุณสามารถใช้ปลั๊กอิน flask-cors เพื่อเปิดใช้งานคำขอข้ามโดเมน

ดู: https://flask-cors.readthedocs.io/en/latest/

ใน PHP คุณสามารถเพิ่มส่วนหัวได้:

<?php
header ("Access-Control-Allow-Origin: *");
header ("Access-Control-Expose-Headers: Content-Length, X-JSON");
header ("Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS");
header ("Access-Control-Allow-Headers: *");
...

ในการแก้ไขปัญหาการร้องขอข้ามต้นทางในแอปพลิเคชัน Node JS:

npm i cors

และเพิ่มบรรทัดด้านล่างลงใน app.js

let cors = require('cors')
app.use(cors())

ในไฟล์กำหนดค่า Apache VirtualHost ของฉันฉันได้เพิ่มบรรทัดต่อไปนี้:

Header always set Access-Control-Allow-Origin "*"
Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
Header always set Access-Control-Max-Age "1000"
Header always set Access-Control-Allow-Headers "x-requested-with, Content-Type, origin, authorization, accept, client-security-token"

RewriteEngine On
RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule ^(.*)$ $1 [R=200,L]

สำหรับผู้ที่กำลังใช้แลมบ์ดาพร็อกซีแบบบูรณาการกับ API เกตเวย์ คุณต้องกำหนดค่าฟังก์ชั่นแลมบ์ดาของคุณราวกับว่าคุณกำลังส่งคำขอไปยังฟังก์ชันโดยตรงหมายความว่าฟังก์ชั่นควรตั้งค่าส่วนหัวการตอบสนองอย่างถูกต้อง (หากคุณกำลังใช้ฟังก์ชั่นแลมบ์ดาที่กำหนดเองระบบจะจัดการ API เกตเวย์นี้)

//In your lambda's index.handler():
exports.handler = (event, context, callback) => {
     //on success:
     callback(null, {
           statusCode: 200,
           headers: {
                "Access-Control-Allow-Origin" : "*"
           }
     }
}

ฉันคิด การปิดใช้งาน CORS จาก Chrome ไม่ใช่วิธีที่ดีเพราะถ้าคุณใช้ในรูปแบบอิออนิคแน่นอนว่าใน Mobile Build ปัญหาจะเพิ่มขึ้นอีกครั้ง

ดังนั้นดีกว่าที่จะแก้ไขในแบ็กเอนด์ของคุณ

ก่อนอื่นคุณต้องตั้งค่า -

• ส่วนหัว ('Access-Control-Allow-Origin: *');
• ส่วนหัว ('ส่วนหัวชุดการควบคุมการเข้าถึงอนุญาตให้ส่วนหัว: "แหล่งกำเนิด, X- ที่ร้องขอ, ประเภทเนื้อหา, ยอมรับ" ");

และถ้า API ทำงานเป็น GET และ POST ทั้งคู่ก็ให้ Set ในส่วนหัวของคุณด้วย

if ($ _SERVER ['REQUEST_METHOD'] == 'OPTIONS') {ถ้า (isset ($ _ SERVER ['HTTP_ACCESS_CONTROL_REQUEST_METHOD'])) ส่วนหัว ("การเข้าถึงการควบคุม - อนุญาตวิธีการ: GET, POST, OPTIONS");
if (isset ($ _ SERVER ['HTTP_ACCESS_CONTROL_REQUEST_HEADERS'])) ส่วนหัว ("Access-Control-Allow-Headers:
{$ _SERVER ['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']}"); ออก (0); }

สาเหตุที่พบบ่อยมากของข้อผิดพลาดนี้อาจเป็นไปได้ว่าโฮสต์ API แมปการร้องขอไปยังวิธีการ http (เช่น PUT) และลูกค้า API กำลังเรียก API โดยใช้วิธี http ที่แตกต่างกัน (เช่น POST หรือ GET)

ทีมของเราเห็นสิ่งนี้เป็นครั้งคราวโดยใช้ Vue, axios และ C # WebApi การเพิ่มแอททริบิวต์เส้นทางบนปลายทางที่คุณกำลังพยายามจะแก้ไขให้กับเรา

[Route("ControllerName/Endpoint")]
[HttpOptions, HttpPost]
public IHttpActionResult Endpoint() { }

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

ฉันใช้ AWS sdk เพื่ออัพโหลดหลังจากใช้เวลาค้นหาออนไลน์ฉันสะดุดกับกระทู้นี้ ขอบคุณ @lsimoneau 45581857ปรากฎสิ่งเดียวกันที่เกิดขึ้น ฉันเพียงแค่ร้องขอ Url ของฉันไปยังพื้นที่บนฝากข้อมูลของฉันโดยแนบตัวเลือกภูมิภาคและมันทำงาน

 const s3 = new AWS.S3({
 accessKeyId: config.awsAccessKeyID,
 secretAccessKey: config.awsSecretAccessKey,
 region: 'eu-west-2'  // add region here });

การแจกแจงแบบสแตนด์อโลนของGeoServerรวมถึงแอปพลิเคชันเซิร์ฟเวอร์ Jetty เปิดใช้งานการแบ่งปันทรัพยากรต้นกำเนิด (CORS) เพื่ออนุญาตแอปพลิเคชัน JavaScript นอกโดเมนของคุณเองให้ใช้ GeoServer

ไม่ใส่เครื่องหมายข้อคิดเห็นต่อไปนี้<filter>และ<filter-mapping>จาก webapps / geoserver / WEB-INF / web.xml:

<web-app>
  <filter>
      <filter-name>cross-origin</filter-name>
      <filter-class>org.eclipse.jetty.servlets.CrossOriginFilter</filter-class>
  </filter>
  <filter-mapping>
      <filter-name>cross-origin</filter-name>
      <url-pattern>/*</url-pattern>
  </filter-mapping>
</web-app>

การแก้ไขปัญหานี้ทำได้ง่ายเพียงไม่กี่ขั้นตอนโดยไม่ต้องกังวลอะไร กรุณาทำตามขั้นตอนเพื่อแก้ปัญหา

1. เปิด ( https://www.npmjs.com/package/cors#enabling-cors-pre-flight )
2. ไปที่การติดตั้งและคัดลอกคำสั่ง npm install cors เพื่อติดตั้งผ่านเทอร์มินัลโหนด
3. ไปที่การใช้งานง่าย (เปิดใช้งานการร้องขอทั้งหมดของ CORS) โดยการเลื่อนจากนั้นคัดลอกและวางการประกาศที่สมบูรณ์ในโครงการของคุณและเรียกใช้ ... ที่จะทำงานได้อย่างแน่นอน .. คัดลอกรหัสความคิดเห็นและวางใน ur app.js หรืออื่น ๆ โครงการและให้ลอง .. นี้จะทำงานนี้จะปลดล็อคทุกการแบ่งปันทรัพยากรข้ามแหล่งที่มา .. ดังนั้นเราจึงสามารถสลับระหว่างการให้บริการสำหรับการใช้งานของคุณ

สิ่งที่พลาดได้ง่ายมาก ...

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

ปิดใช้งานความปลอดภัยของ Chrome สร้างทางลัดของ Chrome คลิกขวา -> properties -> target วาง "C: \ Program Files (x86) \ Google \ Chrome \ Application \ chrome.exe" - ปิดใช้งานการรักษาความปลอดภัยเว็บ --user -Data-dir = "C: / chromedev"