ไม่มีส่วนหัว 'Access-Control-Allow-Origin' อยู่ในข้อผิดพลาดของทรัพยากรที่ร้องขอ

ฉันพยายามดึงฟีดของเว็บไซต์ข่าว คิดว่าฉันจะใช้ feed API ของ Google เพื่อแปลง feedburner feed เป็น json URL ต่อไปนี้จะส่งคืน 10 โพสต์จากฟีดในรูปแบบ json http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&q=http://feeds.feedburner.com/mathrubhumi

ฉันใช้รหัสต่อไปนี้เพื่อรับเนื้อหาของ url ด้านบน

$.ajax({
  type: "GET",
  dataType: "jsonp",
  url: "http://ajax.googleapis.com/ajax/services/feed/load",
  data: {
    "v": "1.0",
    "num": "10",
    "q": "http://feeds.feedburner.com/mathrubhumi"
  },
  success: function(result) {
    //.....
  }
});

แต่มันใช้งานไม่ได้และฉันได้รับข้อผิดพลาดต่อไปนี้

XMLHttpRequest ไม่สามารถโหลด http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&q=http%3A%2F%2Ffeeds.feedburner.com%2Fmathrubhumi ไม่มีส่วนหัว "Access-Control-Allow-Origin" ในทรัพยากรที่ร้องขอ Origin " http: // localhost " จึงไม่ได้รับอนุญาตให้เข้าถึง

ฉันจะแก้ไขปัญหานี้ได้อย่างไร

ฉันเชื่อว่าสิ่งนี้อาจเป็นไปได้ว่า Chrome ไม่สนับสนุนlocalhostให้ทำตามAccess-Control-Allow-Origin- ดูปัญหา Chrome

หากต้องการให้ Chrome ส่งAccess-Control-Allow-Originในส่วนหัวเพียงแค่เปลี่ยนชื่อ localhost ในไฟล์ / etc / hosts ไปยังโดเมนอื่นเช่น:

127.0.0.1   localhost yourdomain.com

จากนั้นหากคุณเข้าถึงสคริปต์ของคุณโดยใช้yourdomain.comแทนlocalhostการโทรควรประสบความสำเร็จ

หากคุณใช้เบราว์เซอร์ Google Chrome คุณสามารถแฮ็กด้วยส่วนขยายได้

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

คุณสามารถใช้เพื่อดีบักแอปของคุณบนเครื่องท้องถิ่น (หากทุกอย่างทำงานในการผลิต)

แจ้งให้ทราบ : หาก URL กลายเป็นเสียชื่อนามสกุลคือการเข้าถึงการควบคุมอนุญาตให้-แหล่งกำเนิดสินค้า: * ฉันขอแนะนำให้คุณปิดการใช้งานส่วนขยายนี้เมื่อคุณไม่ได้ทำงานกับสิ่งต่างๆของคุณตัวอย่างเช่น youtube ไม่ทำงานกับส่วนขยายนี้

ลองทำเช่นนี้ - ตั้งค่าการโทร Ajax โดยตั้งค่าส่วนหัวดังนี้:

var uri = "http://localhost:50869/odata/mydatafeeds"
$.ajax({
    url: uri,
    beforeSend: function (request) {
        request.setRequestHeader("Authorization", "Negotiate");
    },
    async: true,
    success: function (data) {
        alert(JSON.stringify(data));
    },
    error: function (xhr, textStatus, errorMessage) {
        alert(errorMessage);
    }                
});

จากนั้นเรียกใช้โค้ดของคุณโดยเปิด Chrome ด้วยบรรทัดคำสั่งต่อไปนี้:

chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security

เพียงแค่ FYI ฉันสังเกตเห็นข้อมูลนี้จากเอกสาร jQuery ซึ่งฉันเชื่อว่าใช้ได้กับปัญหานี้:

เนื่องจากข้อ จำกัด ของการรักษาความปลอดภัยเบราว์เซอร์ส่วนใหญ่ "อาแจ็กซ์" คำขออยู่ภายใต้นโยบายกำเนิดเดียวกัน ; คำขอไม่สามารถดึงข้อมูลจากโดเมนโดเมนย่อยพอร์ตหรือโปรโตคอลอื่นได้สำเร็จ

การเปลี่ยนไฟล์โฮสต์เช่น @thanix ไม่ได้ผลสำหรับฉัน แต่ส่วนขยายที่กล่าวถึงโดย @dkruchok ช่วยแก้ปัญหาได้

Chrome ไม่อนุญาตให้คุณรวมสอง localhost ที่แตกต่างกันนั่นเป็นสาเหตุที่เราได้รับข้อผิดพลาดนี้ คุณต้องรวมแพ็คเกจ Microsoft Visual Studio Web Api Core จาก nuget manager และเพิ่มโค้ดสองบรรทัดในโครงการ WebApi ในWebApiConfig.cs ไฟล์ของคุณ

var cors = new EnableCorsAttribute("*", "*", "*");
config.EnableCors(cors);

เสร็จแล้ว

หากเรียกใช้บริการสปริงบูต คุณสามารถจัดการได้โดยใช้รหัสด้านล่าง

@Bean
public WebMvcConfigurer corsConfigurer() {
    return new WebMvcConfigurerAdapter() {
        @Override
        public void addCorsMappings(CorsRegistry registry) {
            registry.addMapping("/**")
                    .allowedOrigins("*")
                    .allowedMethods("GET", "POST", "PUT", "DELETE", "HEAD", "OPTIONS")
                    .allowedHeaders("*", "Access-Control-Allow-Headers", "origin", "Content-type", "accept", "x-requested-with", "x-requested-by") //What is this for?
                    .allowCredentials(true);
        }
    };
}

สำหรับการพัฒนาคุณสามารถใช้https://cors-anywhere.herokuapp.comสำหรับการผลิตควรตั้งค่าพร็อกซีของคุณเอง

async function read() {
   let r= await (await fetch('https://cors-anywhere.herokuapp.com/http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&q=http://feeds.feedburner.com/mathrubhumi')).json();
   console.log(r);
}

read();

cors unblock ใช้งานได้ดีสำหรับ chrome 78 [COrs unb] [1] https://chrome.google.com/webstore/detail/cors-unblock/lfhmikememgdcahcdlaciloancbhjino

เป็นปลั๊กอินสำหรับ Google Chrome ที่เรียกว่า "cors unblock"

สรุป: ไม่มีข้อผิดพลาด CORS อีกต่อไปโดยเพิ่มส่วนหัว 'Access-Control-Allow-Origin: *' เข้ากับคำขอเว็บในพื้นที่และระยะไกลเมื่อเปิดใช้งาน

ส่วนขยายนี้ให้การควบคุม XMLHttpRequest และวิธีการดึงข้อมูลโดยให้ส่วนหัว "access-control-allow-origin" และ "access-control-allow-method" ที่กำหนดเองสำหรับทุกคำขอที่เบราว์เซอร์ได้รับ ผู้ใช้สามารถสลับเปิดและปิดส่วนขยายได้จากปุ่มแถบเครื่องมือ หากต้องการแก้ไขวิธีการเปลี่ยนแปลงส่วนหัวเหล่านี้ให้ใช้รายการเมนูบริบทคลิกขวา คุณสามารถกำหนดวิธีการที่อนุญาตได้ ตัวเลือกเริ่มต้นคืออนุญาตให้ใช้เมธอด 'GET', 'PUT', 'POST', 'DELETE', 'HEAD', 'OPTIONS', 'PATCH' นอกจากนี้คุณยังสามารถขอให้ส่วนขยายไม่เขียนทับส่วนหัวเหล่านี้ได้เมื่อเซิร์ฟเวอร์กรอกข้อมูลแล้ว

อีกวิธีหนึ่งคือใช้ cors proxy คุณเพียงแค่ต้องเพิ่มhttps://cors-anywhere.herokuapp.com/ก่อน URL ดังนั้น URL ของคุณจะเป็นเหมือนhttps://cors-anywhere.herokuapp.com/http :

พร็อกซีเซิร์ฟเวอร์รับhttp://ajax.googleapis.com/ajax/services/feed/loadจาก URL ด้านบน จากนั้นจึงทำการร้องขอเพื่อรับการตอบสนองของเซิร์ฟเวอร์นั้น และสุดท้ายพร็อกซีจะใช้

Access-Control-Allow-Origin: *

ต่อคำตอบเดิมนั้น

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

คุณสามารถอ่านเพิ่มเติมเกี่ยวกับวิธีแก้ปัญหาได้ที่นี่ใน Medium 3 วิธีในการแก้ไขข้อผิดพลาด CORS

โดยใช้@CrossOriginในbackendsideในฤดูใบไม้ผลิควบคุมการเริ่มระบบ (ทั้งระดับชั้นเรียนหรือวิธีการระดับ) เป็นวิธีแก้ปัญหาสำหรับข้อผิดพลาด Chrome 'No 'Access-Control-Allow-Origin'ส่วนหัวอยู่บนทรัพยากรที่ร้องขอ.

วิธีนี้ใช้ได้ผล 100% ...

ตัวอย่าง: ระดับชั้นเรียน

@CrossOrigin
@Controller
public class UploadController {

----- หรือ -------

ตัวอย่าง: ระดับวิธีการ

@CrossOrigin(origins = "http://localhost:3000", maxAge = 3600)
@RequestMapping(value = "/loadAllCars")
    @ResponseBody
    public List<Car> loadAllCars() {


Ref: https://spring.io/blog/2015/06/08/cors-support-in-spring-framework