Home > Web Front-end > JS Tutorial > When Does CORS Use a Preflight Request in Cross-Domain Scenarios?

When Does CORS Use a Preflight Request in Cross-Domain Scenarios?

DDD
Release: 2024-10-18 21:48:30
Original
523 people have browsed it

When Does CORS Use a Preflight Request in Cross-Domain Scenarios?

CORS: Understanding the 'Preflight' Request for Cross-Domain Requests

Cross-origin resource sharing (CORS) poses challenges when making HTTP requests across domains. To address these limitations, preflight requests have been introduced as a workaround.

Preflight Request Explained

Preflight requests are OPTIONS requests that precede actual requests (such as GET or POST) and serve to negotiate with the server regarding the request's permissions. These requests include two additional headers:

  • Access-Control-Request-Method: Specifies the method of the actual request.
  • Access-Control-Request-Headers: Lists the headers that will be included in the actual request.

Configuring the Server Response

To handle preflight requests, the server must respond with the following headers:

  • Access-Control-Allow-Origin: Grants permission to the origin specified in the request.
  • Access-Control-Allow-Methods: Specifies the methods allowed for the actual request.
  • Access-Control-Allow-Headers: Lists the headers that the browser is allowed to send in the actual request.

Client-Side Preflight Implementation

For the preflight request to be successful, the client must include the following modifications:

  • Send an OPTIONS request: Before the actual request, send an OPTIONS request with the appropriate Access-Control-Request-* headers.
  • Include necessary headers: Ensure that the actual request contains all the headers specified in the Access-Control-Allow-Headers response header.

Example:

Consider a preflight request for a POST request to fetch data from a remote URL.

Preflight Request:

  • Origin: https://yourdomain.com
  • Access-Control-Request-Method: POST
  • Access-Control-Request-Headers: X-Custom-Header

Server Response (Assuming POST and X-Custom-Header are allowed):

  • Access-Control-Allow-Origin: https://yourdomain.com
  • Access-Control-Allow-Methods: POST
  • Access-Control-Allow-Headers: X-Custom-Header

Actual Request:

  • Origin: https://yourdomain.com
  • Method: POST
  • X-Custom-Header: value

By following these steps, you can effectively preflight HTTP requests to overcome cross-domain limitations using CORS.

The above is the detailed content of When Does CORS Use a Preflight Request in Cross-Domain Scenarios?. For more information, please follow other related articles on the PHP Chinese website!

source:php
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template