คำขอส่วนหัวฟิลด์ Access-Control-Allow-Headers ไม่ได้รับอนุญาตจาก Access-Control-Allow-Headers

ฉันกำลังพยายามส่งไฟล์ไปยังเซิร์ฟเวอร์ของฉันด้วยคำขอโพสต์ แต่เมื่อมันส่งมันทำให้เกิดข้อผิดพลาด:

ช่องคำขอส่วนหัวเนื้อหาไม่ได้รับอนุญาตจาก Access-Control-Allow-Headers

ดังนั้นฉันจึงไปที่ข้อผิดพลาดและเพิ่มส่วนหัว:

$http.post($rootScope.URL, {params: arguments}, {headers: {
    "Access-Control-Allow-Origin" : "*",
    "Access-Control-Allow-Methods" : "GET,POST,PUT,DELETE,OPTIONS",
    "Access-Control-Allow-Headers": "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With"
}

จากนั้นฉันได้รับข้อผิดพลาด:

ช่องคำขอส่วนหัว Access-Control-Allow-Origin ไม่ได้รับอนุญาตจาก Access-Control-Allow-Headers

ดังนั้นฉันจึงค้นหาและคำถามที่คล้ายกันเพียงข้อเดียวที่ฉันพบก็คือให้คำตอบเพียงครึ่งเดียวจากนั้นปิดหัวข้อ ฉันควรจะเพิ่ม / ลบส่วนหัวใด

เซิร์ฟเวอร์ (ว่าคำขอ POST จะถูกส่งไป) ความต้องการที่จะรวมถึงAccess-Control-Allow-Headersส่วนหัว ( ฯลฯ ) ในการตอบสนองของมัน ทำให้พวกเขาในคำขอของคุณจากลูกค้าไม่มีผล

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

ผมมีปัญหาเหมือนกัน. ในเอกสาร jQueryฉันพบ:

สำหรับการร้องขอข้ามโดเมน, การตั้งค่าชนิดเนื้อหาอื่นใดนอกเหนือจากapplication/x-www-form-urlencoded, multipart/form-dataหรือtext/plainจะเรียกเบราว์เซอร์เพื่อส่ง OPTIONS preflight ร้องขอไปยังเซิร์ฟเวอร์

ดังนั้นแม้ว่าเซิร์ฟเวอร์อนุญาตการร้องขอข้ามต้นทาง แต่ไม่อนุญาตAccess-Control-Allow-Headersก็จะเกิดข้อผิดพลาด โดยค่าเริ่มต้นประเภทเนื้อหาเชิงมุมคือapplication/jsonซึ่งพยายามที่จะส่งคำขอ OPTION ลองเขียนทับส่วนหัวเริ่มต้นเชิงมุมหรืออนุญาตAccess-Control-Allow-Headersในส่วนท้ายของเซิร์ฟเวอร์ นี่คือตัวอย่างเชิงมุม:

$http.post(url, data, {
    headers : {
        'Content-Type' : 'application/x-www-form-urlencoded; charset=UTF-8'
    }
});

ถ้านั่นช่วยทุกคน (แม้ว่ามันจะแย่เพราะเราต้องยอมให้สิ่งนี้เพื่อจุดประสงค์ในการพัฒนา) นี่คือวิธีแก้ปัญหาของจาวาที่ฉันพบปัญหาเดียวกัน [แก้ไข] อย่าใช้ไวลด์การ์ด * เนื่องจากเป็นโซลูชันที่ไม่ดีใช้localhostหากคุณต้องการทำงานในพื้นที่

public class SimpleCORSFilter implements Filter {

public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
    HttpServletResponse response = (HttpServletResponse) res;
    response.setHeader("Access-Control-Allow-Origin", "my-authorized-proxy-or-domain");
    response.setHeader("Access-Control-Allow-Methods", "POST, GET");
    response.setHeader("Access-Control-Max-Age", "3600");
    response.setHeader("Access-Control-Allow-Headers", "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With");
    chain.doFilter(req, res);
}

public void init(FilterConfig filterConfig) {}

public void destroy() {}

}

เซิร์ฟเวอร์ (ที่คำขอ POST ถูกส่งไปยัง) จำเป็นต้องมีส่วนหัวContent-Typeในการตอบกลับ

นี่คือรายการของส่วนหัวโดยทั่วไปที่จะรวมรวมถึงส่วนหัว "X_ACCESS_TOKEN" ที่กำหนดเองหนึ่งรายการ:

"X-ACCESS_TOKEN", "Access-Control-Allow-Origin", "Authorization", "Origin", "x-requested-with", "Content-Type", "Content-Range", "Content-Disposition", "Content-Description"

นั่นคือสิ่งที่ผู้ชายเซิร์ฟเวอร์ HTTP ของคุณต้องกำหนดค่าสำหรับเว็บเซิร์ฟเวอร์ที่คุณส่งคำขอไป

คุณอาจต้องการให้คนที่แต่งตัวประหลาดเซิร์ฟเวอร์เปิดเผยส่วนหัว "ความยาวเนื้อหา"

เขาจะรับรู้ว่าสิ่งนี้เป็นคำขอ Cross-Origin Resource Sharing (CORS) และควรเข้าใจความหมายของการกำหนดค่าเซิร์ฟเวอร์เหล่านั้น

ดูรายละเอียดได้ที่:

• http://www.w3.org/TR/cors/
• http://enable-cors.org/

คุณสามารถเปิดใช้งานส่วนหัวที่เหมาะสมใน PHP ด้วยสิ่งนี้:

header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE");
header("Access-Control-Allow-Headers: Content-Type, Access-Control-Allow-Headers, X-Requested-With");

งานต่อไปนี้สำหรับฉันที่มี nodejs:

xServer.use(function(req, res, next) {
  res.setHeader("Access-Control-Allow-Origin", 'http://localhost:8080');
  res.setHeader('Access-Control-Allow-Methods', 'POST,GET,OPTIONS,PUT,DELETE');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type,Accept');

  next();
});

ส่วนหัวที่คุณพยายามตั้งค่าคือส่วนหัวการตอบสนอง พวกเขาจะต้องได้รับการตอบกลับจากเซิร์ฟเวอร์ที่คุณกำลังร้องขอ

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

หากใครประสบปัญหานี้กับเซิร์ฟเวอร์ด่วนเพิ่มมิดเดิลแวร์ต่อไปนี้

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

หากคุณทดสอบการร้องขอ javascript สำหรับ ionic2 หรือ angularjs 2 ใน chrome ของคุณบนพีซีหรือ Mac ให้แน่ใจว่าคุณติดตั้งปลั๊กอิน CORS สำหรับเบราว์เซอร์ chrome เพื่อให้สามารถใช้กับจุดกำเนิดไขว้ได้

mayba รับคำขอจะทำงานได้โดยไม่จำเป็นต้องมี แต่โพสต์และวางและลบจะต้องให้คุณติดตั้งปลั๊กอิน cors สำหรับการทดสอบที่จะไปโดยไม่มีปัญหา definitley ที่ไม่เจ๋ง แต่ฉันไม่รู้ว่าคนทำอย่างไรโดยไม่ต้องใช้ปลั๊กอิน CORS

และต้องแน่ใจว่าการตอบสนองของ json ไม่ได้คืน 400 โดยสถานะ json บางอย่าง

นี่เป็นปัญหาแบ็กเอนด์ ถ้าใช้ sails API ในแบ็กเอนด์เปลี่ยน cors.js และเพิ่มไฟล์ของคุณที่นี่

module.exports.cors = {
  allRoutes: true,
  origin: '*',
  credentials: true,
  methods: 'GET, POST, PUT, DELETE, OPTIONS, HEAD',
  headers: 'Origin, X-Requested-With, Content-Type, Accept, Engaged-Auth-Token'
};

ในAsp Net Coreเพื่อให้ทำงานได้อย่างรวดเร็วเพื่อการพัฒนา ในStartup.cs, Configure methodเพิ่ม

app.UseCors(options => options.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader());

ในกรณีของฉันฉันได้รับพารามิเตอร์หลายอย่างเป็น @HeaderParam เป็นวิธีการบริการเว็บ

พารามิเตอร์เหล่านี้จะต้องประกาศในตัวกรอง CORS ของคุณด้วยวิธีนี้:

@Provider
public class CORSFilter implements ContainerResponseFilter {

    @Override
    public void filter(ContainerRequestContext requestContext, ContainerResponseContext responseContext) throws IOException {

        MultivaluedMap<String, Object> headers = responseContext.getHeaders();

        headers.add("Access-Control-Allow-Origin", "*");
        ...
        headers.add("Access-Control-Allow-Headers", 
        /*
         * name of the @HeaderParam("name") must be declared here (raw String):
         */
        "name", ...);
        headers.add("Access-Control-Allow-Credentials", "true");
        headers.add("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS, HEAD");   
    }
}

Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headersข้อผิดพลาดหมายความว่าAccess-Control-Allow-Originฟิลด์ของส่วนหัว HTTP ไม่ได้รับการจัดการหรืออนุญาตโดยการตอบกลับ ลบAccess-Control-Allow-Originฟิลด์ออกจากส่วนหัวคำขอ

หากคุณใช้localhostและตั้งค่า PHP เป็นสิ่งนี้เพื่อแก้ปัญหา:

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Headers: Content-Type'); 

จากการใช้ส่วนหน้าของคุณ:

{headers: {"Content-Type": "application/json"}}

และบูมไม่มีปัญหาจากlocalhost!