Cross-Origin Resource Sharing (CORS) คืออะไร – จะเพิ่มลงใน Java Jersey Web Server ได้อย่างไร

เผยแพร่แล้ว: 2014-07-19

บทช่วยสอนการแบ่งปันทรัพยากรข้ามแหล่งกำเนิด (CORS) โดย Crunchify

จะแก้ไขข้อผิดพลาดนี้ระหว่างการสื่อสารระหว่าง client-server ได้อย่างไร เซิร์ฟเวอร์ส่งข้อมูลในรูปแบบ JSON หรือ XML และไคลเอนต์ส่งข้อยกเว้นด้านล่าง

1
2
3
XMLHttpRequest cannot load https : //crunchify.com/api/test.
No 'Access-Control-Allow-Origin' header is present on the requested resource .
Origin 'null' is therefore not allowed access .

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

นอกจากนี้ หากคุณมีคำถามด้านล่าง แสดงว่าคุณอยู่ในตำแหน่งที่ถูกต้อง:

  1. การทำความเข้าใจการแบ่งปันทรัพยากรข้ามแหล่งกำเนิด (ตัวกรอง CORS)
  2. ฉันสามารถใช้ Cross-Origin Resource Sharing ได้หรือไม่
  3. วิธีเปิดใช้งานการแชร์ทรัพยากรข้ามต้นทาง
  4. Ajax ข้ามโดเมนพร้อมการแชร์ทรัพยากรข้ามแหล่งกำเนิดคืออะไร
  5. การควบคุมการเข้าถึง HTTP (CORS) คืออะไร

CORS (Cross Origin Resource Sharing) เป็นกลไกที่สนับสนุนโดย W3C เพื่อเปิดใช้งานคำขอข้ามต้นทางในเว็บเบราว์เซอร์ CORS ต้องการการสนับสนุนจากทั้งเบราว์เซอร์และเซิร์ฟเวอร์ในการทำงาน นี่คือการใช้งานตัวกรอง Java Jersey Web Server ของ CORS ฝั่งเซิร์ฟเวอร์สำหรับคอนเทนเนอร์เว็บ เช่น Apache Tomcat และ Embedded Web Servers อื่นๆ

Crunchify ตัวอย่างเซิร์ฟเวอร์ CORFilter Jersey

ขั้นตอนที่ 1:

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

ขั้นตอนที่ 2:

ตัวแทนผู้ใช้สามารถค้นหาได้ผ่านคำขอ preflight ว่าทรัพยากรข้ามต้นทางพร้อมที่จะยอมรับคำขอโดยใช้วิธีการที่ไม่ง่ายจากต้นทางที่กำหนดหรือไม่ สิ่งนี้ถูกตรวจสอบอีกครั้งโดยตัวแทนผู้ใช้

ขั้นตอนที่ 3:

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

มาเริ่มกันเลยกับตัวอย่าง

ตัวอย่างที่ 1: Java Jersey Web Server

เมื่อสองสามสัปดาห์ก่อน ฉันเขียนบทความเกี่ยวกับวิธีเริ่มเซิร์ฟเวอร์ HTTP แบบฝังตัวระหว่างการเริ่มต้นแอปพลิเคชัน Java โพสต์นี้จะกล่าวถึงขั้นตอนในการเพิ่ม CORS Filter ให้กับ Jersey Server เดียวกัน

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

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

  1. การเข้าถึง-การควบคุม-อนุญาต-แหล่งกำเนิด
  2. การเข้าถึง-ควบคุม-อนุญาต-วิธีการ
  3. Access-Control-Max-Age
  4. Access-Control-Allow-Headers

รหัสตัวกรอง CORS:

CrunchifyCORSFilter.java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
package com . crunchify . tutorial ;
 
/**
*
* @author Crunchify.com
*/
 
import com . sun . jersey . spi . container . ContainerRequest ;
import com . sun . jersey . spi . container . ContainerResponse ;
import com . sun . jersey . spi . container . ContainerResponseFilter ;
import javax . ws . rs . core . Response ;
import javax . ws . rs . core . Response . ResponseBuilder ;
 
public class CrunchifyCORSFilter implements ContainerResponseFilter {
 
     public ContainerResponse filter ( ContainerRequest req , ContainerResponse crunchifyContainerResponse ) {
 
         ResponseBuilder crunchifyResponseBuilder = Response . fromResponse ( crunchifyContainerResponse . getResponse ( ) ) ;
        
         // *(allow from all servers) OR https://crunchify.com/ OR http://example.com/
         crunchifyResponseBuilder . header ( "Access-Control-Allow-Origin" , "https://crunchify.com/" )
        
         // As a part of the response to a request, which HTTP methods can be used during the actual request.
         . header ( "Access-Control-Allow-Methods" , "API, CRUNCHIFYGET, GET, POST, PUT, UPDATE, OPTIONS" )
        
         // How long the results of a request can be cached in a result cache.
         . header ( "Access-Control-Max-Age" , "151200" )
        
         // As part of the response to a request, which HTTP headers can be used during the actual request.
         . header ( "Access-Control-Allow-Headers" , "x-requested-with,Content-Type" ) ;
 
         String crunchifyRequestHeader = req . getHeaderValue ( "Access-Control-Request-Headers" ) ;
 
         if ( null ! = crunchifyRequestHeader && !crunchifyRequestHeader.equals(null)) {
            crunchifyResponseBuilder.header("Access-Control-Allow-Headers", crunchifyRequestHeader);
         }
 
         crunchifyContainerResponse . setResponse ( crunchifyResponseBuilder . build ( ) ) ;
         return crunchifyContainerResponse ;
     }
}

การปรับเปลี่ยนใน JerseyEmbeddedHTTPServerCrunchify.java จากบทช่วยสอนก่อนหน้า

เพียงเพิ่มบรรทัดด้านล่างใน createHttpServer() และรีสตาร์ทเซิร์ฟเวอร์

1
crunchifyResourceConfig . getContainerResponseFilters ( ) . add ( CrunchifyCORSFilter . class ) ;

ผลลัพธ์:

http://localhost:8085/api

บีบอัดส่วนหัวของการตอบสนองด้วยตัวกรอง CORS

นี่คือรายละเอียดส่วนหัว

บีบอัดส่วนหัวของการตอบสนองโดยไม่มีตัวกรอง CORS

ตัวอย่างที่ 2: เซิร์ฟเวอร์ Apache HTTP

หากต้องการเปิดเผยส่วนหัว คุณสามารถเพิ่มบรรทัดต่อไปนี้ในส่วน <Directory>, <Location> และ <Files> หรือภายในไฟล์ . .htaccess

.htaccess file
1
2
3
< IfModule mod_headers . c >
   Header set Access - Control - Allow - Origin "*"
< / IfModule >

ตัวอย่างที่ 3: .NET เซิร์ฟเวอร์สามารถกำหนดค่านี้ได้ใน web.config ดังต่อไปนี้

web.config
1
2
3
4
5
6
< system . webServer >
   < httpProtocol >
     < customHeaders >
       < add name = "Access-Control-Allow-Origin" value = "your_clientside_websiteurl" / >
     < / customHeaders >
< system . webServer >

ตัวอย่างที่ 4: สำหรับท่าเทียบเรือ (7 ขึ้นไป)

รวม JAR ของ jetty-servlets ไว้ใน WEB-INF/lib และรวมไว้ใน WEB-INF/web.xml ของคุณ

web.xml
1
2
3
4
5
6
7
8
   < 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 >

ตัวอย่างที่ 5: เซิร์ฟเวอร์ Apache Tomcat (v 7.0.41 +)

web.xml
1
2
3
4
5
6
7
8
< filter >
   < filter - name > CorsFilter < / filter - name >
   < filter - class > org . apache . catalina . filters . CorsFilter < / filter - class >
< / filter >
< filter - mapping >
   < filter - name > CorsFilter < / filter - name >
   < url - pattern > /* < / url - pattern >
< / filter - mapping >

ตัวอย่างที่ 6: ใน PHP

1
2
3
<?php
header ( "Access-Control-Allow-Origin: *" ) ;
?>

โปรดแจ้งให้เราทราบหากคุณมีคำถามเพิ่มเติมเกี่ยวกับเรื่องนี้ รายชื่อ Java Tutorials ทั้งหมดจะอยู่ที่นี่